Use :hidden attribute to collapse props/hooks
Brian Vaughn committed
Apr 12, 2019 at 08:53 UTC
7aadcdf624a9588128ef4bb54466f2880afe2aa7
3 files changed
+54
-48
src/devtools/views/Components/HooksTree.js
+15
-19
@@ -134,16 +134,14 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
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
- )}
137
+ <div className={styles.Children} hidden={!isOpen}>
138
+ <KeyValue depth={1} name="DebugValue" value={value} />
139
+ <InnerHooksTreeView
140
+ canEditHooks={canEditHooks}
141
+ hooks={subHooks}
142
+ id={id}
143
+ />
144
+ </div>
145
</div>
146
);
147
} else {
@@ -157,15 +155,13 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
155
{/* $FlowFixMe */}
156
<span className={styles.Value}>{displayValue}</span>
157
</div>
160
- {isOpen && (
161
- <div className={styles.Children}>
162
- <InnerHooksTreeView
163
- canEditHooks={canEditHooks}
164
- hooks={subHooks}
165
- id={id}
166
- />
167
- </div>
168
- )}
158
+ <div className={styles.Children} hidden={!isOpen}>
159
+ <InnerHooksTreeView
160
+ canEditHooks={canEditHooks}
161
+ hooks={subHooks}
162
+ id={id}
163
+ />
164
+ </div>
165
</div>
166
);
167
}
src/devtools/views/Components/KeyValue.css
+1
-1
@@ -1,4 +1,4 @@
1
-.Item {
1
+.Item:not([hidden]) {
2
display: flex;
3
}
4
src/devtools/views/Components/KeyValue.js
+38
-28
@@ -12,6 +12,7 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
12
13
type KeyValueProps = {|
14
depth: number,
15
+ hidden?: boolean,
16
name: string,
17
overrideValueFn?: ?OverrideValueFn,
18
path?: Array<any>,
@@ -20,6 +21,7 @@ type KeyValueProps = {|
21
22
export default function KeyValue({
23
depth,
24
+ hidden,
25
name,
26
overrideValueFn,
27
path = [],
@@ -60,7 +62,7 @@ export default function KeyValue({
62
typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;
63
64
children = (
63
- <div key="root" className={styles.Item} style={style}>
65
+ <div key="root" className={styles.Item} hidden={hidden} style={style}>
66
<div className={styles.ExpandCollapseToggleSpacer} />
67
<span className={nameClassName}>{name}</span>
68
{typeof overrideValueFn === 'function' ? (
@@ -78,7 +80,7 @@ export default function KeyValue({
80
} else if (value.hasOwnProperty(meta.type)) {
81
// TODO Is this type even necessary? Can we just drop it?
82
children = (
81
- <div key="root" className={styles.Item} style={style}>
83
+ <div key="root" className={styles.Item} hidden={hidden} style={style}>
84
<div className={styles.ExpandCollapseToggleSpacer} />
85
<span className={styles.Name}>{name}</span>
86
<span className={styles.Value}>{getMetaValueLabel(value)}</span>
@@ -88,20 +90,24 @@ export default function KeyValue({
90
if (Array.isArray(value)) {
91
const hasChildren = value.length > 0;
92
91
- children = isOpen
92
- ? value.map((innerValue, index) => (
93
- <KeyValue
94
- key={index}
95
- depth={depth + 1}
96
- name={index}
97
- overrideValueFn={overrideValueFn}
98
- path={path.concat(index)}
99
- value={value[index]}
100
- />
101
- ))
102
- : [];
93
+ children = value.map((innerValue, index) => (
94
+ <KeyValue
95
+ key={index}
96
+ depth={depth + 1}
97
+ hidden={hidden || !isOpen}
98
+ name={index}
99
+ overrideValueFn={overrideValueFn}
100
+ path={path.concat(index)}
101
+ value={value[index]}
102
+ />
103
+ ));
104
children.unshift(
104
- <div key={`${depth}-root`} className={styles.Item} style={style}>
105
+ <div
106
+ key={`${depth}-root`}
107
+ className={styles.Item}
108
+ hidden={hidden}
109
+ style={style}
110
+ >
111
{hasChildren ? (
112
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
113
) : (
@@ -119,20 +125,24 @@ export default function KeyValue({
125
} else {
126
const hasChildren = Object.entries(value).length > 0;
127
122
- children = isOpen
123
- ? Object.entries(value).map<Element<any>>(([name, value]) => (
124
- <KeyValue
125
- key={name}
126
- depth={depth + 1}
127
- name={name}
128
- overrideValueFn={overrideValueFn}
129
- path={path.concat(name)}
130
- value={value}
131
- />
132
- ))
133
- : [];
128
+ children = Object.entries(value).map<Element<any>>(([name, value]) => (
129
+ <KeyValue
130
+ key={name}
131
+ depth={depth + 1}
132
+ hidden={hidden || !isOpen}
133
+ name={name}
134
+ overrideValueFn={overrideValueFn}
135
+ path={path.concat(name)}
136
+ value={value}
137
+ />
138
+ ));
139
children.unshift(
135
- <div key={`${depth}-root`} className={styles.Item} style={style}>
140
+ <div
141
+ key={`${depth}-root`}
142
+ className={styles.Item}
143
+ hidden={hidden}
144
+ style={style}
145
+ >
146
{hasChildren ? (
147
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
148
) : (