Add collapsible icon for object and array types
Lucas Cordeiro committed
Apr 8, 2019 at 22:42 UTC
0f955980a3db96e2197e52cb5549e8d46e28fa06
2 files changed
+52
-22
src/devtools/views/Components/KeyValue.css
+10
@@ -26,3 +26,13 @@
26
color: var(--color-dimmer);
27
font-style: italic;
28
}
29
+
30
+.Opener {
31
+ padding: 0.125rem;
32
+ margin-left: -1rem;
33
+}
34
+
35
+.Opener svg {
36
+ width: 0.75rem;
37
+ height: 0.75rem;
38
+}
src/devtools/views/Components/KeyValue.js
+42
-22
@@ -1,7 +1,9 @@
1
// @flow
2
3
-import React from 'react';
3
+import React, { useState } from 'react';
4
import EditableValue from './EditableValue';
5
+import Button from '../Button';
6
+import ButtonIcon from '../ButtonIcon';
7
import { getMetaValueLabel } from '../utils';
8
import { meta } from '../../../hydration';
9
import styles from './KeyValue.css';
@@ -23,6 +25,12 @@ export default function KeyValue({
25
path = [],
26
value,
27
}: KeyValueProps) {
28
+ const [open, setOpen] = useState(false);
29
+
30
+ const handleToggle = () => {
31
+ setOpen(prevOpen => !prevOpen);
32
+ };
33
+
34
const dataType = typeof value;
35
const isSimpleType =
36
dataType === 'number' ||
@@ -72,45 +80,57 @@ export default function KeyValue({
80
</div>
81
);
82
} else {
83
+ const opener = (
84
+ <Button className={styles.Opener} onClick={handleToggle}>
85
+ <ButtonIcon type={open ? 'up' : 'down'} />
86
+ </Button>
87
+ );
88
+
89
if (Array.isArray(value)) {
76
- children = value.map((innerValue, index) => (
77
- <KeyValue
78
- key={index}
79
- depth={depth + 1}
80
- name={index}
81
- overrideValueFn={overrideValueFn}
82
- path={path.concat(index)}
83
- value={value[index]}
84
- />
85
- ));
90
+ children = open
91
+ ? value.map((innerValue, index) => (
92
+ <KeyValue
93
+ key={index}
94
+ depth={depth + 1}
95
+ name={index}
96
+ overrideValueFn={overrideValueFn}
97
+ path={path.concat(index)}
98
+ value={value[index]}
99
+ />
100
+ ))
101
+ : [];
102
children.unshift(
103
<div
104
key={`${depth}-root`}
105
className={styles.Item}
106
style={{ paddingLeft }}
107
>
108
+ {value.length > 0 && opener}
109
<span className={styles.Name}>{name}</span>
110
<span>Array</span>
111
</div>
112
);
113
} else {
97
- // $FlowFixMe "Missing type annotation for U" whatever that means
98
- children = Object.entries(value).map(([name, value]) => (
99
- <KeyValue
100
- key={name}
101
- depth={depth + 1}
102
- name={name}
103
- overrideValueFn={overrideValueFn}
104
- path={path.concat(name)}
105
- value={value}
106
- />
107
- ));
114
+ children = open
115
+ ? // $FlowFixMe "Missing type annotation for U" whatever that means
116
+ Object.entries(value).map(([name, value]) => (
117
+ <KeyValue
118
+ key={name}
119
+ depth={depth + 1}
120
+ name={name}
121
+ overrideValueFn={overrideValueFn}
122
+ path={path.concat(name)}
123
+ value={value}
124
+ />
125
+ ))
126
+ : [];
127
children.unshift(
128
<div
129
key={`${depth}-root`}
130
className={styles.Item}
131
style={{ paddingLeft }}
132
>
133
+ {Object.entries(value).length > 0 && opener}
134
<span className={styles.Name}>{name}</span>
135
<span>Object</span>
136
</div>