Improved selection and toggling for props/hooks/state (#17588)
1. Enable nested values to be expanded/collapsed by clicking on values as well as keys. 2. Enable keys and values to be selectable (for copy-pasting purposes)
Brian Vaughn committed
Dec 17, 2019 at 11:28 UTC
bb75a4fa897576a9d386e30efb451bfbc98619a8
4 files changed
+24
-8
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
+3
-2
@@ -27,7 +27,7 @@
27
.Name,
28
.NameAnonymous {
29
flex: 0 0 auto;
30
- user-select: none;
30
+ cursor: default;
31
}
32
.Name {
33
color: var(--color-dim);
@@ -39,7 +39,7 @@
39
.EditableName {
40
color: var(--color-attribute-name);
41
flex: 0 0 auto;
42
- user-select: none;
42
+ cursor: default;
43
}
44
.EditableName:after,
45
.Name:after {
@@ -52,6 +52,7 @@
52
color: var(--color-attribute-value);
53
overflow: hidden;
54
text-overflow: ellipsis;
55
+ cursor: default;
56
}
57
58
.None {
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+3
-1
@@ -208,7 +208,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
208
{name || 'Anonymous'}
209
</span>{' '}
210
{/* $FlowFixMe */}
211
- <span className={styles.Value}>{displayValue}</span>
211
+ <span className={styles.Value} onClick={toggleIsOpen}>
212
+ {displayValue}
213
+ </span>
214
</div>
215
<div className={styles.Children} hidden={!isOpen}>
216
{subHooksView}
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+3
-2
@@ -5,12 +5,12 @@
5
.Name {
6
color: var(--color-dim);
7
flex: 0 0 auto;
8
- user-select: none;
8
+ cursor: default;
9
}
10
.EditableName {
11
color: var(--color-attribute-name);
12
flex: 0 0 auto;
13
- user-select: none;
13
+ cursor: default;
14
}
15
.EditableName:after,
16
.Name:after {
@@ -24,6 +24,7 @@
24
white-space: nowrap;
25
overflow: hidden;
26
text-overflow: ellipsis;
27
+ cursor: default;
28
}
29
30
.None {
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+15
-3
@@ -127,7 +127,11 @@ export default function KeyValue({
127
onClick={isInspectable ? toggleIsOpen : undefined}>
128
{name}
129
</span>
130
- <span className={styles.Value}>{getMetaValueLabel(value)}</span>
130
+ <span
131
+ className={styles.Value}
132
+ onClick={isInspectable ? toggleIsOpen : undefined}>
133
+ {getMetaValueLabel(value)}
134
+ </span>
135
</div>
136
);
137
} else {
@@ -165,7 +169,11 @@ export default function KeyValue({
169
onClick={hasChildren ? toggleIsOpen : undefined}>
170
{name}
171
</span>
168
- <span className={styles.Value}>{displayName}</span>
172
+ <span
173
+ className={styles.Value}
174
+ onClick={hasChildren ? toggleIsOpen : undefined}>
175
+ {displayName}
176
+ </span>
177
</div>,
178
);
179
} else {
@@ -211,7 +219,11 @@ export default function KeyValue({
219
onClick={hasChildren ? toggleIsOpen : undefined}>
220
{name}
221
</span>
214
- <span className={styles.Value}>{displayName}</span>
222
+ <span
223
+ className={styles.Value}
224
+ onClick={hasChildren ? toggleIsOpen : undefined}>
225
+ {displayName}
226
+ </span>
227
</div>,
228
);
229
}