@yandex/ui
Version:
Yandex UI components
59 lines (58 loc) • 2.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAdaptiveTabs = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var calculateItemWidth_1 = require("./calculateItemWidth");
var useIsomorphicLayoutEffect_1 = require("../../useIsomorphicLayoutEffect");
var useAdaptiveTabs = function (_a) {
var tabs = _a.tabs, tabsRefs = _a.tabsRefs, wrapperRef = _a.wrapperRef, moreRef = _a.moreRef;
var _b = tslib_1.__read(react_1.useState(tabs || []), 2), visibleTabs = _b[0], setVisibleTabs = _b[1];
var _c = tslib_1.__read(react_1.useState([]), 2), hiddenTabs = _c[0], setHiddenTabs = _c[1];
var _d = tslib_1.__read(react_1.useState([]), 2), tabWidths = _d[0], setTabWidths = _d[1];
var _e = tslib_1.__read(react_1.useState(0), 2), wrapperWidth = _e[0], setWrapperWidth = _e[1];
var _f = tslib_1.__read(react_1.useState(0), 2), tabMoreWidth = _f[0], setTabMoreWidth = _f[1];
useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
setVisibleTabs(tabs);
setHiddenTabs([]);
}, [tabs]);
useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
if (wrapperWidth >= tabs.reduce(function (acc, _tab, index) { return acc + tabWidths[index]; }, 0)) {
setVisibleTabs(tabs);
setHiddenTabs([]);
return;
}
var index = 0;
var sum = tabMoreWidth;
while (sum + tabWidths[index] <= wrapperWidth) {
sum += tabWidths[index];
index++;
}
setVisibleTabs(tabs.slice(0, index));
setHiddenTabs(tabs.slice(index));
}, [wrapperWidth, tabMoreWidth, tabWidths, tabs]);
useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
setTabMoreWidth(calculateItemWidth_1.calculateItemWidth(moreRef, true) || tabMoreWidth || 0);
var newWidths = tabsRefs.map(function (tab, index) {
return calculateItemWidth_1.calculateItemWidth(tab, true) || tabWidths[index] || 0;
});
if (newWidths.reduce(function (acc, tabWidth) { return acc + tabWidth; }, 0) !==
tabWidths.reduce(function (acc, tabWidth) { return acc + tabWidth; }, 0)) {
setTabWidths(newWidths);
}
});
var onWindowResize = react_1.useCallback(function () {
setWrapperWidth(calculateItemWidth_1.calculateItemWidth(wrapperRef));
}, [wrapperRef]);
useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
onWindowResize();
}, [onWindowResize]);
react_1.useEffect(function () {
window.addEventListener('resize', onWindowResize);
return function () {
window.removeEventListener('resize', onWindowResize);
};
}, [onWindowResize]);
return [visibleTabs, hiddenTabs];
};
exports.useAdaptiveTabs = useAdaptiveTabs;