OwnerView() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ OwnerView() — react Function Reference

Dependency Diagram

graph TD
  8b68cc87_fdfe_ca8e_b412_36b73226a155["OwnerView()"]
  fd1ac927_00ef_d34e_8747_a00d62b71152["OwnerView.js"]
  8b68cc87_fdfe_ca8e_b412_36b73226a155 -->|defined in| fd1ac927_00ef_d34e_8747_a00d62b71152
  style 8b68cc87_fdfe_ca8e_b412_36b73226a155 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/OwnerView.js lines 29–76

export default function OwnerView({
  displayName,
  environmentName,
  hocDisplayNames,
  compiledWithForget,
  id,
  isInStore,
}: OwnerViewProps): React.Node {
  const dispatch = useContext(TreeDispatcherContext);
  const {highlightHostInstance, clearHighlightHostInstance} =
    useHighlightHostInstance();

  const handleClick = useCallback(() => {
    logEvent({
      event_name: 'select-element',
      metadata: {source: 'owner-view'},
    });
    dispatch({
      type: 'SELECT_ELEMENT_BY_ID',
      payload: id,
    });
  }, [dispatch, id]);

  return (
    <Button
      key={id}
      className={styles.OwnerButton}
      disabled={!isInStore}
      onClick={handleClick}
      onMouseEnter={() => highlightHostInstance(id)}
      onMouseLeave={clearHighlightHostInstance}>
      <span className={styles.OwnerContent}>
        <span
          className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
          title={displayName}
          data-testname="OwnerView">
          {'<' + displayName + '>'}
        </span>

        <ElementBadges
          hocDisplayNames={hocDisplayNames}
          compiledWithForget={compiledWithForget}
          environmentName={environmentName}
        />
      </span>
    </Button>
  );
}