EditableValue() — react Function Reference

Architecture documentation for the EditableValue() function in EditableValue.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ EditableValue() — react Function Reference

Dependency Diagram

graph TD
  0e75ec50_6792_4e19_9cef_0f7f8a5ca3af["EditableValue()"]
  dc084a98_cfc9_b696_ce0b_8abf1ee07f6f["EditableValue.js"]
  0e75ec50_6792_4e19_9cef_0f7f8a5ca3af -->|defined in| dc084a98_cfc9_b696_ce0b_8abf1ee07f6f
  style 0e75ec50_6792_4e19_9cef_0f7f8a5ca3af fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js lines 24–118

export default function EditableValue({
  className = '',
  overrideValue,
  path,
  value,
}: EditableValueProps): React.Node {
  const [state, dispatch] = useEditableValue(value);
  const {editableValue, hasPendingChanges, isValid, parsedValue} = state;

  const reset = () =>
    dispatch({
      type: 'RESET',
      externalValue: value,
    });

  // $FlowFixMe[missing-local-annot]
  const handleChange = ({target}) =>
    dispatch({
      type: 'UPDATE',
      editableValue: target.value,
      externalValue: value,
    });

  // $FlowFixMe[missing-local-annot]
  const handleCheckBoxToggle = ({target}) => {
    dispatch({
      type: 'UPDATE',
      editableValue: target.checked,
      externalValue: value,
    });

    // Unlike <input type="text"> which has both an onChange and an onBlur,
    // <input type="checkbox"> updates state *and* applies changes in a single event.
    // So we read from target.checked rather than parsedValue (which has not yet updated).
    // We also don't check isValid (because that hasn't changed yet either);
    // we don't need to check it anyway, since target.checked is always a boolean.
    overrideValue(path, target.checked);
  };

  // $FlowFixMe[missing-local-annot]
  const handleKeyDown = event => {
    // Prevent keydown events from e.g. change selected element in the tree
    event.stopPropagation();

    switch (event.key) {
      case 'Enter':
        applyChanges();
        break;
      case 'Escape':
        reset();
        break;
      default:
        break;
    }
  };

  const applyChanges = () => {
    if (isValid && hasPendingChanges) {
      overrideValue(path, parsedValue);
    }
  };

  let placeholder = '';
  if (editableValue === undefined) {
    placeholder = '(undefined)';
  } else {
    placeholder = 'Enter valid JSON';
  }

  const isBool = parsedValue === true || parsedValue === false;

  return (
    <Fragment>
      <input
        autoComplete="new-password"
        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
        data-testname="EditableValue"
        onBlur={applyChanges}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}