88 */
99
1010import * as React from 'react' ;
11- import { Fragment , useRef } from 'react' ;
11+ import { Fragment } from 'react' ;
1212import styles from './EditableValue.css' ;
1313import { useEditableValue } from '../hooks' ;
1414
@@ -27,7 +27,6 @@ export default function EditableValue({
2727 path,
2828 value,
2929} : EditableValueProps ) {
30- const inputRef = useRef < HTMLInputElement | null > ( null ) ;
3130 const [ state , dispatch ] = useEditableValue ( value ) ;
3231 const { editableValue, hasPendingChanges, isValid, parsedValue} = state ;
3332
@@ -44,6 +43,21 @@ export default function EditableValue({
4443 externalValue : value ,
4544 } ) ;
4645
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+
4761 const handleKeyDown = event => {
4862 // Prevent keydown events from e.g. change selected element in the tree
4963 event . stopPropagation ( ) ;
@@ -73,6 +87,8 @@ export default function EditableValue({
7387 placeholder = 'Enter valid JSON' ;
7488 }
7589
90+ const isBool = parsedValue === true || parsedValue === false ;
91+
7692 return (
7793 < Fragment >
7894 < input
@@ -82,10 +98,17 @@ export default function EditableValue({
8298 onChange = { handleChange }
8399 onKeyDown = { handleKeyDown }
84100 placeholder = { placeholder }
85- ref = { inputRef }
86101 type = "text"
87102 value = { editableValue }
88103 />
104+ { isBool && (
105+ < input
106+ className = { styles . Checkbox }
107+ checked = { parsedValue }
108+ type = "checkbox"
109+ onChange = { handleCheckBoxToggle }
110+ />
111+ ) }
89112 </ Fragment >
90113 ) ;
91114}
0 commit comments