@carbon/ibm-products
Version:
Carbon for IBM Products
98 lines (96 loc) • 3.54 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
require("../../../../_virtual/_rolldown/runtime.js");
const require_useResizeObserver = require("../useResizeObserver.js");
let react = require("react");
//#region src/global/js/hooks/useOverflowItems/useOverflowItems.ts
/**
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function useOverflowItems(items = [], containerRef, offsetRef, maxItems, onChange) {
const [remainingWidth, setRemainingWidth] = (0, react.useState)(0);
const offsetWidthRef = (0, react.useRef)(0);
const itemsRef = (0, react.useRef)(null);
const visibleItemCount = (0, react.useRef)(0);
const minWidthRef = (0, react.useRef)(0);
const requiredWidthRef = (0, react.useRef)(0);
const handleResize = () => {
if (containerRef?.current) {
offsetWidthRef.current = offsetRef?.current?.offsetWidth || 0;
setRemainingWidth(containerRef.current.offsetWidth - offsetWidthRef.current);
}
};
const offsetRefHandler = (node) => {
if (node && containerRef?.current) {
offsetWidthRef.current = node.offsetWidth;
setRemainingWidth(containerRef.current.offsetWidth - offsetWidthRef.current);
}
return node;
};
require_useResizeObserver.useResizeObserver(containerRef, handleResize);
const getMap = () => {
if (!itemsRef.current) itemsRef.current = /* @__PURE__ */ new Map();
return itemsRef.current;
};
const requiredWidth = items?.slice(0, maxItems)?.reduce((acc, item) => acc + (getMap().get(item.id) || 0), 0);
const itemRefHandler = (id, node) => {
const map = getMap();
if (node) {
const style = getComputedStyle?.(node);
const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
map.set(id, totalWidth);
}
return () => {
map.delete(id);
};
};
const getVisibleItems = () => {
if (!containerRef) return items;
const map = getMap();
let maxReached = false;
let accumulatedWidth = 0;
let includeOffset = false;
if (maxItems) includeOffset = requiredWidth + offsetWidthRef?.current > requiredWidth;
else includeOffset = requiredWidth > remainingWidth + offsetWidthRef?.current;
return items.slice(0, maxItems).reduce((prev, cur) => {
if (maxReached) return prev;
const itemWidth = map.get(cur.id) || 0;
let willFit = accumulatedWidth + itemWidth <= remainingWidth;
if (!includeOffset) willFit = accumulatedWidth + itemWidth <= remainingWidth + offsetWidthRef?.current;
if (willFit) {
accumulatedWidth += itemWidth;
prev.push(cur);
} else maxReached = true;
return prev;
}, []);
};
const visibleItems = getVisibleItems();
const hiddenItems = items.slice(visibleItems?.length);
if (visibleItems?.length !== visibleItemCount.current || remainingWidth !== minWidthRef.current || requiredWidth !== requiredWidthRef.current) {
visibleItemCount.current = visibleItems?.length;
minWidthRef.current = remainingWidth;
requiredWidthRef.current = requiredWidth;
const firstItemKey = getMap()?.keys()?.next()?.value || "";
const firstItemWidth = getMap()?.get(firstItemKey) || 0;
onChange?.({
hiddenItems,
minWidth: remainingWidth,
maxWidth: requiredWidth + firstItemWidth
});
}
return {
visibleItems,
itemRefHandler,
hiddenItems,
offsetRefHandler
};
}
//#endregion
exports.useOverflowItems = useOverflowItems;