KeyValue() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ KeyValue() — react Function Reference

Dependency Diagram

graph TD
  b5067ef5_22cb_1a20_66d3_9a573b206f48["KeyValue()"]
  276bc34e_3008_101e_3cd7_cc895fcd3848["KeyValue.js"]
  b5067ef5_22cb_1a20_66d3_9a573b206f48 -->|defined in| 276bc34e_3008_101e_3cd7_cc895fcd3848
  style b5067ef5_22cb_1a20_66d3_9a573b206f48 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js lines 64–201

export default function KeyValue({
  alphaSort,
  bridge,
  canDeletePaths,
  canEditValues,
  canRenamePaths,
  canRenamePathsAtDepth,
  depth,
  element,
  inspectedElement,
  isDirectChildOfAnArray,
  hidden,
  hookID,
  hookName,
  name,
  path,
  pathRoot,
  store,
  value,
}: KeyValueProps): React.Node {
  const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
  canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
  canEditValues = !readOnlyGlobalFlag && canEditValues;
  canRenamePaths = !readOnlyGlobalFlag && canRenamePaths;

  const {id} = inspectedElement;
  const fullPath = useMemo(() => [pathRoot, ...path], [pathRoot, path]);

  const [isOpen, setIsOpen] = useState<boolean>(false);
  const contextMenuTriggerRef = useRef(null);

  const {inspectPaths} = useContext(InspectedElementContext);
  const {viewAttributeSourceFunction} =
    useContext<ContextMenuContextType>(ContextMenuContext);

  let isInspectable = false;
  let isReadOnlyBasedOnMetadata = false;
  if (value !== null && typeof value === 'object') {
    isInspectable = value[meta.inspectable] && value[meta.size] !== 0;
    isReadOnlyBasedOnMetadata = value[meta.readonly];
  }

  const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
  const toggleIsOpen = () => {
    if (isOpen) {
      setIsOpen(false);
    } else {
      setIsOpen(true);

      if (isInspectable) {
        startInspectPathsTransition(() => {
          inspectPaths([pathRoot, ...path]);
        });
      }
    }
  };

  const dataType = typeof value;
  const isSimpleType =
    dataType === 'number' ||
    dataType === 'string' ||
    dataType === 'boolean' ||
    value == null;

  const pathType =
    value !== null &&
    typeof value === 'object' &&
    hasOwnProperty.call(value, meta.type)
      ? value[meta.type]
      : typeof value;
  const pathIsFunction = pathType === 'function';

  const style = {
    paddingLeft: `${(depth - 1) * 0.75}rem`,
  };

  const overrideValue = (newPath: Array<string | number>, newValue: any) => {
    if (hookID != null) {
      newPath = parseHookPathForEdit(newPath);
    }