src/EditableTree.js
/**
 * A dynamic node that decides how to draw itself based on its value (as a scalar value, or as a
 * subtree), and allows itsel to be edited.
 */
A dynamic node that decides how to draw itself based on its value (as a scalar value, or as a
subtree), and allows itsel to be edited.
A dynamic node that decides how to draw itself based on its value ( as a scalar value or as a subtree ) and allows itsel to be edited .
function Node({ k, value, isRoot, updateCallback, addSiblingCallback }, ref) {
  let [editing, setEditing] = useState(false);
  if (editing) {
    return <EditorNode
      initialKey={k}
      initialValue={value}
      isRoot={isRoot}
      doneEditingCallback={(...args) => {
        updateCallback(...args);
        setEditing(false);
      }}
      addSiblingCallback={addSiblingCallback} />;
  }
  let isSubtree = (typeof value === 'object') && value !== null;
  if (isSubtree) {
    return <SubtreeNode
      k={k}
      ref={ref}
      value={value}
      isRoot={isRoot}
      updateCallback={updateCallback}
      doneEditingCallback={() => setEditing(false)} />;
  }
  return <ScalarViewNode
    k={k}
    value={value}
    isRoot={isRoot}
    startEditingCallback={() => setEditing(true)}
    deleteCallback={() => updateCallback(k, null)} />
}
function Node ( { k , value , isRoot , updateCallback , addSiblingCallback } , ref ) { let [ editing , setEditing ] = useState ( false ) ; if ( editing ) { return < EditorNode initialKey = { k } initialValue = { value } isRoot = { isRoot } doneEditingCallback = { ( ... args ) => { updateCallback ( ... args ) ; setEditing ( false ) ; } } addSiblingCallback = { addSiblingCallback } / > ; } let isSubtree = ( typeof value === 'object' ) && value !== null ; if ( isSubtree ) { return < SubtreeNode k = { k } ref = { ref } value = { value } isRoot = { isRoot } updateCallback = { updateCallback } doneEditingCallback = { ( ) => setEditing ( false ) } / > ; } return < ScalarViewNode k = { k } value = { value } isRoot = { isRoot } startEditingCallback = { ( ) => setEditing ( true ) } deleteCallback = { ( ) => updateCallback ( k , null ) } / > }
A dynamic node that decides how to draw itself based on its value (as a scalar value, or as a
 subtree), and allows itsel to be edited.
A dynamic node that decides how to draw itself based on its value ( as a scalar value or as a subtree ) and allows itsel to be edited .