InspectedElementContextTree() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js lines 35–105

export default function InspectedElementContextTree({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  const {hasLegacyContext, context, type} = inspectedElement;

  const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;

  if (context == null) {
    return null;
  }

  const entries = Object.entries(context);
  entries.sort(alphaSortEntries);
  const isEmpty = entries.length === 0;

  const handleCopy = withPermissionsCheck(
    {permissions: ['clipboardWrite']},
    () => copy(serializeDataForCopy(context)),
  );

  // We add an object with a "value" key as a wrapper around Context data
  // so that we can use the shared <KeyValue> component to display it.
  // This wrapper object can't be renamed.
  // $FlowFixMe[missing-local-annot]
  const canRenamePathsAtDepth = depth => depth > 1;

  if (isEmpty) {
    return null;
  } else {
    return (
      <div>
        <div className={styles.HeaderRow}>
          <div className={styles.Header}>
            {hasLegacyContext ? 'legacy context' : 'context'}
          </div>
          {!isEmpty && (
            <Button onClick={handleCopy} title="Copy to clipboard">
              <ButtonIcon type="copy" />
            </Button>
          )}
        </div>
        {isEmpty && <div className={styles.Empty}>None</div>}
        {!isEmpty &&
          (entries: any).map(([name, value]) => (
            <KeyValue
              key={name}
              alphaSort={true}
              bridge={bridge}
              canDeletePaths={!isReadOnly}
              canEditValues={!isReadOnly}
              canRenamePaths={!isReadOnly}
              canRenamePathsAtDepth={canRenamePathsAtDepth}
              depth={1}
              element={element}
              hidden={false}
              inspectedElement={inspectedElement}
              name={name}
              path={[name]}
              pathRoot="context"
              store={store}
              type="context"
              value={value}
            />
          ))}
      </div>
    );
  }
}