Function useCollectionRender

packages/@react-spectrum/s2/src/Breadcrumbs.tsx:450–560

(collection: Collection<Node<unknown>>)

};

let useCollectionRender = (collection: Collection<Node<unknown>>) => {
  let {containerRef, onAction} = useContext(CollapseContext) ?? {};
  let [visibleItems, setVisibleItems] = useState(collection.size);
  let {size = 'M'} = useContext(InternalBreadcrumbsContext);

  let children = useMemo(() => {
    let result: Node<any>[] = [];
    for (let key of collection.getKeys()) {
      result.push(collection.getItem(key)!);
    }
    return result;
  }, [collection]);

  let listRef = useRef<HTMLDivElement | null>(null);
  let updateOverflow = useCallback(() => {
    let currListRef: HTMLDivElement | null = listRef.current;
    if (!currListRef) {
      setVisibleItems(collection.size);
      return;
    }
    let container = currListRef.parentElement;
    if (!container) {
      setVisibleItems(collection.size);
      return;
    }

    let listItems = Array.from(
      currListRef.querySelectorAll('[data-hidden-breadcrumb]')
    ) as HTMLLIElement[];
    let folder = currListRef.querySelector('button') as HTMLButtonElement;
    if (listItems.length <= 0) {
      setVisibleItems(collection.size);
      return;
    }
    let containerWidth = container.offsetWidth;
    let containerGap = parseInt(getComputedStyle(container).gap, 10);
    let folderGap = parseInt(getComputedStyle(folder).marginInlineStart, 10);
    let newVisibleItems = 0;
    let maxVisibleItems = MAX_VISIBLE_ITEMS;

    let widths: Array<number> = [];
    let totalWidth = 0;
    for (let breadcrumb of listItems) {
      let width = breadcrumb.offsetWidth + 1; // offsetWidth is rounded down
      widths.push(width);
      totalWidth += width;
    }

    // can we fit all the items without collapsing
    if (
      totalWidth <= containerWidth - collection.size * containerGap &&
      collection.size <= MAX_VISIBLE_ITEMS
    ) {
      setVisibleItems(collection.size);
      return;
    }

    // we know there is always at least one item because of the listItems.length check up above