EditableName() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ EditableName() — react Function Reference

Dependency Diagram

graph TD
  ca8114b4_a39e_775f_8cfb_ea560d8ed77f["EditableName()"]
  04e82e8f_4cf5_68df_3f32_fe28fb509921["EditableName.js"]
  ca8114b4_a39e_775f_8cfb_ea560d8ed77f -->|defined in| 04e82e8f_4cf5_68df_3f32_fe28fb509921
  style ca8114b4_a39e_775f_8cfb_ea560d8ed77f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/EditableName.js lines 32–101

export default function EditableName({
  allowEmpty = false,
  allowWhiteSpace = false,
  autoFocus = false,
  className = '',
  initialValue = '',
  overrideName,
  path,
  type,
}: EditableNameProps): React.Node {
  const [editableName, setEditableName] = useState(initialValue);
  const [isValid, setIsValid] = useState(false);

  const handleChange = useCallback(
    ({target}: $FlowFixMe) => {
      let value = target.value;
      if (!allowWhiteSpace) {
        value = value.trim();
      }

      if (allowEmpty || value !== '') {
        setIsValid(true);
      } else {
        setIsValid(false);
      }

      setEditableName(value);
    },
    [overrideName],
  );

  const handleKeyDown = useCallback(
    (event: $FlowFixMe) => {
      // Prevent keydown events from e.g. change selected element in the tree
      event.stopPropagation();

      switch (event.key) {
        case 'Enter':
        case 'Tab':
          if (isValid) {
            const basePath = path.slice(0, path.length - 1);
            overrideName(
              [...basePath, initialValue],
              [...basePath, editableName],
            );
          }
          break;
        case 'Escape':
          setEditableName(initialValue);
          break;
        default:
          break;
      }
    },
    [editableName, setEditableName, isValid, initialValue, overrideName],
  );

  return (
    <AutoSizeInput
      autoFocus={autoFocus}
      className={[styles.Input, className].join(' ')}
      onChange={handleChange}
      onKeyDown={handleKeyDown}
      placeholder="new entry"
      testName="EditableName"
      type="text"
      value={editableName}
    />
  );
}