@yandex/ui
Version:
Yandex UI components
55 lines (54 loc) • 2.47 kB
JavaScript
import { __read } from "tslib";
import { useCallback, useEffect, useState } from 'react';
import { calculateItemWidth } from './calculateItemWidth';
import { useIsomorphicLayoutEffect } from '../../useIsomorphicLayoutEffect';
export var useAdaptiveTabs = function (_a) {
var tabs = _a.tabs, tabsRefs = _a.tabsRefs, wrapperRef = _a.wrapperRef, moreRef = _a.moreRef;
var _b = __read(useState(tabs || []), 2), visibleTabs = _b[0], setVisibleTabs = _b[1];
var _c = __read(useState([]), 2), hiddenTabs = _c[0], setHiddenTabs = _c[1];
var _d = __read(useState([]), 2), tabWidths = _d[0], setTabWidths = _d[1];
var _e = __read(useState(0), 2), wrapperWidth = _e[0], setWrapperWidth = _e[1];
var _f = __read(useState(0), 2), tabMoreWidth = _f[0], setTabMoreWidth = _f[1];
useIsomorphicLayoutEffect(function () {
setVisibleTabs(tabs);
setHiddenTabs([]);
}, [tabs]);
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(function () {
setTabMoreWidth(calculateItemWidth(moreRef, true) || tabMoreWidth || 0);
var newWidths = tabsRefs.map(function (tab, index) {
return 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 = useCallback(function () {
setWrapperWidth(calculateItemWidth(wrapperRef));
}, [wrapperRef]);
useIsomorphicLayoutEffect(function () {
onWindowResize();
}, [onWindowResize]);
useEffect(function () {
window.addEventListener('resize', onWindowResize);
return function () {
window.removeEventListener('resize', onWindowResize);
};
}, [onWindowResize]);
return [visibleTabs, hiddenTabs];
};