@gravity-ui/uikit
Version:
Gravity UI base styling and components
105 lines (104 loc) • 4.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabListCollapsedChildren = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const useCollapseChildren_1 = require("../../../hooks/useCollapseChildren/index.js");
const useResizeObserver_1 = require("../../../hooks/useResizeObserver/index.js");
const utils_1 = require("../../Breadcrumbs/utils.js");
const constants_1 = require("../constants.js");
const utils_2 = require("../utils.js");
const useTabListGapFromContainer_1 = require("./useTabListGapFromContainer.js");
const TAB_LIST_CHILD_SELECTOR = `.${(0, constants_1.bTab)()}`;
const useTabListCollapsedChildren = (children, tabListValue, containerRef, enabled) => {
const collapseItemRef = React.useRef(null);
const childrenHash = (0, utils_1.getReactNodeHash)(children);
const listGap = (0, useTabListGapFromContainer_1.useTabListGapFromContainer)(containerRef, {
enabled,
childrenHash,
childSelector: TAB_LIST_CHILD_SELECTOR,
});
const { recalculate, visibleCount: visibleChildrenCount } = (0, useCollapseChildren_1.useCollapseChildren)({
enabled,
containerRef,
preservedRefs: [collapseItemRef],
direction: 'end',
minCount: 0,
gap: listGap,
childSelector: TAB_LIST_CHILD_SELECTOR,
});
React.useEffect(() => {
recalculate();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childrenHash, tabListValue]);
(0, useResizeObserver_1.useResizeObserver)({
ref: collapseItemRef,
onResize: recalculate,
});
// Don't collapse selected tab
const isReactNodeCollapsible = React.useCallback((child) => {
const tabProps = (0, utils_2.getTabNodePropsFromReactNode)(child);
if (tabProps === undefined) {
return true;
}
return tabListValue !== tabProps['value'];
}, [tabListValue]);
const childrenList = [];
React.Children.forEach(children, (child, index) => {
if (!React.isValidElement(child)) {
return;
}
if (child.key === undefined || child.key === null) {
childrenList.push(React.cloneElement(child, { key: index }));
return;
}
childrenList.push(child);
});
if (!enabled) {
return {
shownChildren: childrenList,
collapsedChildren: [],
collapseItemRef,
triggerChild: null,
};
}
if (visibleChildrenCount === 0) {
const selectedChild = childrenList.find((child) => !isReactNodeCollapsible(child)) ?? childrenList[0];
const otherChildren = childrenList.filter((c) => c !== selectedChild);
// Only 1 tab is provided, so we don't need to collapse it
if (otherChildren.length === 0) {
return {
shownChildren: selectedChild ? [selectedChild] : [],
collapsedChildren: [],
collapseItemRef,
triggerChild: null,
};
}
return {
shownChildren: [],
collapsedChildren: otherChildren,
collapseItemRef,
triggerChild: selectedChild,
};
}
const notCollapsibleChildren = childrenList.filter((child) => !isReactNodeCollapsible(child));
const shownChildren = [];
const collapsedChildren = [];
let reservedToShowChildrenCount = notCollapsibleChildren.length;
childrenList.forEach((child) => {
if (!isReactNodeCollapsible(child)) {
shownChildren.push(child);
reservedToShowChildrenCount--;
return;
}
if (shownChildren.length < visibleChildrenCount - reservedToShowChildrenCount) {
shownChildren.push(child);
}
else {
collapsedChildren.push(child);
}
});
return { shownChildren, collapsedChildren, triggerChild: null, collapseItemRef };
};
exports.useTabListCollapsedChildren = useTabListCollapsedChildren;
//# sourceMappingURL=useTabListCollapsedChildren.js.map