OwnerStackFlatList() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ OwnerStackFlatList() — react Function Reference

Dependency Diagram

graph TD
  4978a481_0c53_8f36_f6d4_e5f6fafaaeaa["OwnerStackFlatList()"]
  4e5b4a1f_694c_f426_36e2_a03da99b38d5["OwnersStack.js"]
  4978a481_0c53_8f36_f6d4_e5f6fafaaeaa -->|defined in| 4e5b4a1f_694c_f426_36e2_a03da99b38d5
  style 4978a481_0c53_8f36_f6d4_e5f6fafaaeaa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js lines 87–126

function OwnerStackFlatList({
  owners,
  selectedIndex,
  selectOwner,
  setElementsTotalWidth,
}: OwnerStackFlatListProps): React.Node {
  const containerRef = useRef<HTMLDivElement | null>(null);
  useLayoutEffect(() => {
    const container = containerRef.current;
    if (container === null) {
      return;
    }

    const ResizeObserver = container.ownerDocument.defaultView.ResizeObserver;
    const observer = new ResizeObserver(entries => {
      const entry = entries[0];
      setElementsTotalWidth(entry.contentRect.width);
    });

    observer.observe(container);
    return observer.disconnect.bind(observer);
  }, []);

  return (
    <div className={styles.OwnerStackFlatListContainer} ref={containerRef}>
      {owners.map((owner, index) => (
        <Fragment key={index}>
          <ElementView
            owner={owner}
            isSelected={index === selectedIndex}
            selectOwner={selectOwner}
          />
          {index < owners.length - 1 && (
            <span className={styles.OwnerStackFlatListSeparator}>»</span>
          )}
        </Fragment>
      ))}
    </div>
  );
}