Add checkbox toggle for boolean values (#19714)
* added a checkbox which appears to the right of a value when value is boolean * checkbox with toggle capability created for boolean props Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Meghnath Pillay committed
Sep 3, 2020 at 18:27 UTC
835c11eba713ea836af6dae67b4d0e835c0eabdf
2 files changed
+30
-13
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.css
+4
-10
@@ -1,13 +1,7 @@
1
-.CheckboxLabel {
2
- flex: 1 1 100%;
3
- display: flex;
4
-}
5
-.CheckboxLabel:focus-within {
6
- background-color: var(--color-button-background-focus);
7
-}
8
-
9
-.Checkbox:focus {
10
- outline: none;
1
+.Checkbox {
2
+ flex: 0 0 auto;
3
+ align-self: center;
4
+ margin: 0 0.25rem;
5
}
6
7
.Input {
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+26
-3
@@ -8,7 +8,7 @@
8
*/
9
10
import * as React from 'react';
11
-import {Fragment, useRef} from 'react';
11
+import {Fragment} from 'react';
12
import styles from './EditableValue.css';
13
import {useEditableValue} from '../hooks';
14
@@ -27,7 +27,6 @@ export default function EditableValue({
27
path,
28
value,
29
}: EditableValueProps) {
30
- const inputRef = useRef<HTMLInputElement | null>(null);
30
const [state, dispatch] = useEditableValue(value);
31
const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
32
@@ -44,6 +43,21 @@ export default function EditableValue({
43
externalValue: value,
44
});
45
46
+ const handleCheckBoxToggle = ({target}) => {
47
+ dispatch({
48
+ type: 'UPDATE',
49
+ editableValue: target.checked,
50
+ externalValue: value,
51
+ });
52
+
53
+ // Unlike <input type="text"> which has both an onChange and an onBlur,
54
+ // <input type="checkbox"> updates state *and* applies changes in a single event.
55
+ // So we read from target.checked rather than parsedValue (which has not yet updated).
56
+ // We also don't check isValid (because that hasn't changed yet either);
57
+ // we don't need to check it anyway, since target.checked is always a boolean.
58
+ overrideValueFn(path, target.checked);
59
+ };
60
+
61
const handleKeyDown = event => {
62
// Prevent keydown events from e.g. change selected element in the tree
63
event.stopPropagation();
@@ -73,6 +87,8 @@ export default function EditableValue({
87
placeholder = 'Enter valid JSON';
88
}
89
90
+ const isBool = parsedValue === true || parsedValue === false;
91
+
92
return (
93
<Fragment>
94
<input
@@ -82,10 +98,17 @@ export default function EditableValue({
98
onChange={handleChange}
99
onKeyDown={handleKeyDown}
100
placeholder={placeholder}
85
- ref={inputRef}
101
type="text"
102
value={editableValue}
103
/>
104
+ {isBool && (
105
+ <input
106
+ className={styles.Checkbox}
107
+ checked={parsedValue}
108
+ type="checkbox"
109
+ onChange={handleCheckBoxToggle}
110
+ />
111
+ )}
112
</Fragment>
113
);
114
}