Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added expand/collapse toggles to custom hooks

Browse Source
This commit is contained in:
Brian Vaughn
2019-04-12 08:39:03 -07:00
parent 94810b2b5a
commit da4accda31
6 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/devtools/views/Components/ExpandCollapseToggle.css
+6
View File
@@ -0,0 +1,6 @@
.ExpandCollapseToggle {
width: 1rem;
height: 1rem;
padding: 0;
color: var(--color-expand-collapse-toggle);
}
src/devtools/views/Components/ExpandCollapseToggle.js
+31
View File
@@ -0,0 +1,31 @@
// @flow
import React, { useCallback } from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import styles from './ExpandCollapseToggle.css';
type ExpandCollapseToggleProps = {|
isOpen: boolean,
setIsOpen: Function,
|};
export default function ExpandCollapseToggle({
isOpen,
setIsOpen,
}: ExpandCollapseToggleProps) {
const handleClick = useCallback(() => {
setIsOpen(prevIsOpen => !prevIsOpen);
}, [setIsOpen]);
return (
<Button
className={styles.ExpandCollapseToggle}
onClick={handleClick}
title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
>
<ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
</Button>
);
}
src/devtools/views/Components/HooksTree.css
+2
View File
@@ -27,10 +27,12 @@
.Name {
color: var(--color-dim);
flex: 0 0 auto;
user-select: none;
}
.EditableName {
color: var(--color-attribute-name);
flex: 0 0 auto;
user-select: none;
}
.EditableName:after,
.Name:after {
src/devtools/views/Components/HooksTree.js
+37 -20
View File
@@ -1,11 +1,12 @@
// @flow
import { copy } from 'clipboard-js';
import React, { useCallback, useContext } from 'react';
import React, { useCallback, useContext, useState } from 'react';
import { BridgeContext, StoreContext } from '../context';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import EditableValue from './EditableValue';
import ExpandCollapseToggle from './ExpandCollapseToggle';
import KeyValue from './KeyValue';
import { serializeHooksForCopy } from '../utils';
import styles from './HooksTree.css';
@@ -76,6 +77,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
const bridge = useContext(BridgeContext);
const store = useContext(StoreContext);
const [isOpen, setIsOpen] = useState<boolean>(false);
const toggleIsOpen = useCallback(
() => setIsOpen(prevIsOpen => !prevIsOpen),
[]
);
if (hook.hasOwnProperty(meta.inspected)) {
// This Hook is too deep and hasn't been hydrated.
// TODO: show UI to load its data.
@@ -121,34 +129,43 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
return (
<div className={styles.Hook}>
<div className={styles.NameValueRow}>
<span className={styles.ExpandCollapseToggleSpacer} />
<span className={styles.Name}>{name}</span>
</div>
<div className={styles.Children}>
<KeyValue depth={1} name="DebugValue" value={value} />
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
<span onDoubleClick={toggleIsOpen} className={styles.Name}>
{name}
</span>
</div>
{isOpen && (
<div className={styles.Children}>
<KeyValue depth={1} name="DebugValue" value={value} />
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
</div>
)}
</div>
);
} else {
return (
<div className={styles.Hook}>
<div className={styles.NameValueRow}>
<span className={styles.ExpandCollapseToggleSpacer} />
<span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
<span onDoubleClick={toggleIsOpen} className={styles.Name}>
{name}
</span>{' '}
{/* $FlowFixMe */}
<span className={styles.Value}>{displayValue}</span>
</div>
<div className={styles.Children}>
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
</div>
{isOpen && (
<div className={styles.Children}>
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
</div>
)}
</div>
);
}
src/devtools/views/Components/KeyValue.css
-7
View File
@@ -29,13 +29,6 @@
font-style: italic;
}
.ExpandCollapseToggle {
width: 1rem;
height: 1rem;
padding: 0;
color: var(--color-expand-collapse-toggle);
}
.ExpandCollapseToggleSpacer {
width: 1rem;
}
src/devtools/views/Components/KeyValue.js
+1 -26
View File
@@ -3,8 +3,7 @@
import React, { useCallback, useState } from 'react';
import type { Element } from 'react';
import EditableValue from './EditableValue';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import ExpandCollapseToggle from './ExpandCollapseToggle';
import { getMetaValueLabel } from '../utils';
import { meta } from '../../../hydration';
import styles from './KeyValue.css';
@@ -153,27 +152,3 @@ export default function KeyValue({
return children;
}
type ExpandCollapseToggleProps = {|
isOpen: boolean,
setIsOpen: Function,
|};
function ExpandCollapseToggle({
isOpen,
setIsOpen,
}: ExpandCollapseToggleProps) {
const handleClick = useCallback(() => {
setIsOpen(prevIsOpen => !prevIsOpen);
}, [setIsOpen]);
return (
<Button
className={styles.ExpandCollapseToggle}
onClick={handleClick}
title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
>
<ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
</Button>
);
}