Added expand/collapse toggles to custom hooks
Brian Vaughn committed
Apr 12, 2019 at 08:39 UTC
da4accda31fa35879c8cf56992fc8171a5b4b2fb
6 files changed
+77
-53
src/devtools/views/Components/ExpandCollapseToggle.css
new
+6
@@ -0,0 +1,6 @@
1
+.ExpandCollapseToggle {
2
+ width: 1rem;
3
+ height: 1rem;
4
+ padding: 0;
5
+ color: var(--color-expand-collapse-toggle);
6
+}
src/devtools/views/Components/ExpandCollapseToggle.js
new
+31
@@ -0,0 +1,31 @@
1
+// @flow
2
+
3
+import React, { useCallback } from 'react';
4
+import Button from '../Button';
5
+import ButtonIcon from '../ButtonIcon';
6
+
7
+import styles from './ExpandCollapseToggle.css';
8
+
9
+type ExpandCollapseToggleProps = {|
10
+ isOpen: boolean,
11
+ setIsOpen: Function,
12
+|};
13
+
14
+export default function ExpandCollapseToggle({
15
+ isOpen,
16
+ setIsOpen,
17
+}: ExpandCollapseToggleProps) {
18
+ const handleClick = useCallback(() => {
19
+ setIsOpen(prevIsOpen => !prevIsOpen);
20
+ }, [setIsOpen]);
21
+
22
+ return (
23
+ <Button
24
+ className={styles.ExpandCollapseToggle}
25
+ onClick={handleClick}
26
+ title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
27
+ >
28
+ <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
29
+ </Button>
30
+ );
31
+}
src/devtools/views/Components/HooksTree.css
+2
@@ -27,10 +27,12 @@
27
.Name {
28
color: var(--color-dim);
29
flex: 0 0 auto;
30
+ user-select: none;
31
}
32
.EditableName {
33
color: var(--color-attribute-name);
34
flex: 0 0 auto;
35
+ user-select: none;
36
}
37
.EditableName:after,
38
.Name:after {
src/devtools/views/Components/HooksTree.js
+37
-20
@@ -1,11 +1,12 @@
1
// @flow
2
3
import { copy } from 'clipboard-js';
4
-import React, { useCallback, useContext } from 'react';
4
+import React, { useCallback, useContext, useState } from 'react';
5
import { BridgeContext, StoreContext } from '../context';
6
import Button from '../Button';
7
import ButtonIcon from '../ButtonIcon';
8
import EditableValue from './EditableValue';
9
+import ExpandCollapseToggle from './ExpandCollapseToggle';
10
import KeyValue from './KeyValue';
11
import { serializeHooksForCopy } from '../utils';
12
import styles from './HooksTree.css';
@@ -76,6 +77,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
77
const bridge = useContext(BridgeContext);
78
const store = useContext(StoreContext);
79
80
+ const [isOpen, setIsOpen] = useState<boolean>(false);
81
+
82
+ const toggleIsOpen = useCallback(
83
+ () => setIsOpen(prevIsOpen => !prevIsOpen),
84
+ []
85
+ );
86
+
87
if (hook.hasOwnProperty(meta.inspected)) {
88
// This Hook is too deep and hasn't been hydrated.
89
// TODO: show UI to load its data.
@@ -121,34 +129,43 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
129
return (
130
<div className={styles.Hook}>
131
<div className={styles.NameValueRow}>
124
- <span className={styles.ExpandCollapseToggleSpacer} />
125
- <span className={styles.Name}>{name}</span>
126
- </div>
127
- <div className={styles.Children}>
128
- <KeyValue depth={1} name="DebugValue" value={value} />
129
- <InnerHooksTreeView
130
- canEditHooks={canEditHooks}
131
- hooks={subHooks}
132
- id={id}
133
- />
132
+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
133
+ <span onDoubleClick={toggleIsOpen} className={styles.Name}>
134
+ {name}
135
+ </span>
136
</div>
137
+ {isOpen && (
138
+ <div className={styles.Children}>
139
+ <KeyValue depth={1} name="DebugValue" value={value} />
140
+ <InnerHooksTreeView
141
+ canEditHooks={canEditHooks}
142
+ hooks={subHooks}
143
+ id={id}
144
+ />
145
+ </div>
146
+ )}
147
</div>
148
);
149
} else {
150
return (
151
<div className={styles.Hook}>
152
<div className={styles.NameValueRow}>
141
- <span className={styles.ExpandCollapseToggleSpacer} />
142
- <span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
153
+ <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
154
+ <span onDoubleClick={toggleIsOpen} className={styles.Name}>
155
+ {name}
156
+ </span>{' '}
157
+ {/* $FlowFixMe */}
158
<span className={styles.Value}>{displayValue}</span>
159
</div>
145
- <div className={styles.Children}>
146
- <InnerHooksTreeView
147
- canEditHooks={canEditHooks}
148
- hooks={subHooks}
149
- id={id}
150
- />
151
- </div>
160
+ {isOpen && (
161
+ <div className={styles.Children}>
162
+ <InnerHooksTreeView
163
+ canEditHooks={canEditHooks}
164
+ hooks={subHooks}
165
+ id={id}
166
+ />
167
+ </div>
168
+ )}
169
</div>
170
);
171
}
src/devtools/views/Components/KeyValue.css
-7
@@ -29,13 +29,6 @@
29
font-style: italic;
30
}
31
32
-.ExpandCollapseToggle {
33
- width: 1rem;
34
- height: 1rem;
35
- padding: 0;
36
- color: var(--color-expand-collapse-toggle);
37
-}
38
-
32
.ExpandCollapseToggleSpacer {
33
width: 1rem;
34
}
src/devtools/views/Components/KeyValue.js
+1
-26
@@ -3,8 +3,7 @@
3
import React, { useCallback, useState } from 'react';
4
import type { Element } from 'react';
5
import EditableValue from './EditableValue';
6
-import Button from '../Button';
7
-import ButtonIcon from '../ButtonIcon';
6
+import ExpandCollapseToggle from './ExpandCollapseToggle';
7
import { getMetaValueLabel } from '../utils';
8
import { meta } from '../../../hydration';
9
import styles from './KeyValue.css';
@@ -153,27 +152,3 @@ export default function KeyValue({
152
153
return children;
154
}
156
-
157
-type ExpandCollapseToggleProps = {|
158
- isOpen: boolean,
159
- setIsOpen: Function,
160
-|};
161
-
162
-function ExpandCollapseToggle({
163
- isOpen,
164
- setIsOpen,
165
-}: ExpandCollapseToggleProps) {
166
- const handleClick = useCallback(() => {
167
- setIsOpen(prevIsOpen => !prevIsOpen);
168
- }, [setIsOpen]);
169
-
170
- return (
171
- <Button
172
- className={styles.ExpandCollapseToggle}
173
- onClick={handleClick}
174
- title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}
175
- >
176
- <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
177
- </Button>
178
- );
179
-}