src/EditableTree.js
/**
 * The simplest version of a node, just rendering a key and scalar value pair.
 */
The simplest version of a node, just rendering a key and scalar value pair.
The simplest version of a node just rendering a key and scalar value pair .
function ScalarViewNode({ k, value, isRoot, startEditingCallback, deleteCallback }) {
  return <div className={cn('node', { 'is-root': isRoot })}>
    <div className="node-row">
      <div className="node-kv-box">
        <div className="node-key">{k}</div>
        <span className="node-eq">:</span>
        <div className="inline-value" onClick={() => startEditingCallback()}>
          {JSON.stringify(value)}
        </div>
        <button className="icon-button delete-button" onClick={() => deleteCallback()}>
          <i className="material-icons">close</i>
        </button>
      </div>
    </div>
  </div>;
}
function ScalarViewNode ( { k , value , isRoot , startEditingCallback , deleteCallback } ) { return < div className = { cn ( 'node' , { 'is-root' : isRoot } ) } > < div className = "node-row" > < div className = "node-kv-box" > < div className = "node-key" > { k } < / div > < span className = "node-eq" > : < / span > < div className = "inline-value" onClick = { ( ) => startEditingCallback ( ) } > { JSON . stringify ( value ) } < / div > < button className = "icon-button delete-button" onClick = { ( ) => deleteCallback ( ) } > < i className = "material-icons" > close < / i > < / button > < / div > < / div > < / div > ; }
The simplest version of a node, just rendering a key and scalar value pair.
The simplest version of a node just rendering a key and scalar value pair .