@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
59 lines • 2.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabs = void 0;
const react_1 = require("react");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
const getTabMoves_1 = require("../../utils/tabUtil/getTabMoves");
const useMediaDevice_1 = require("../useMediaDevice/useMediaDevice");
const useRoveFocus_1 = require("../useRoveFocus/useRoveFocus");
const useTabs = ({ numTabsInView, tabsLength, selectedTab }) => {
const device = (0, useMediaDevice_1.useMediaDevice)();
const [position, setPosition] = (0, react_1.useState)(0);
const roveFocusProps = (0, react_1.useMemo)(() => ({
size: tabsLength,
keyDownMove: 0,
keyUpMove: 0,
keyRightMove: device === breakpoints_1.DeviceBreakpointsType.MOBILE
? (0, getTabMoves_1.keyRightMove)(tabsLength, position, numTabsInView)
: 1,
keyLeftMove: device === breakpoints_1.DeviceBreakpointsType.MOBILE ? (0, getTabMoves_1.keyLeftMove)(position, numTabsInView) : -1,
keyTabMove: null,
}), [device, position, numTabsInView]);
const [focus, setFocus, listEl] = (0, useRoveFocus_1.useRoveFocus)(roveFocusProps);
(0, react_1.useEffect)(() => {
if (listEl.current && device === breakpoints_1.DeviceBreakpointsType.MOBILE) {
const widthListOption = listEl?.current?.clientWidth / numTabsInView;
const translate = widthListOption * position;
listEl.current.style.transform = `translate(-${translate}px)`;
}
setFocus(position);
}, [position, device]);
const handlePositionUpdate = positionVisible => setPosition(prevPos => {
let newPosition = prevPos;
const positionVisibleInView = positionVisible >= prevPos && positionVisible < prevPos + numTabsInView;
if (!positionVisibleInView) {
newPosition = positionVisible - numTabsInView + 1;
newPosition = newPosition < 0 ? 0 : newPosition;
}
return newPosition;
});
(0, react_1.useEffect)(() => {
const positionVisible = selectedTab ?? 0;
handlePositionUpdate(positionVisible);
}, [selectedTab]);
const handleClickIcon = (isNextPosition) => {
setPosition(isNextPosition ? position + 1 : position - 1);
};
const handleClickTab = (newFocus) => {
setFocus(newFocus);
};
return {
position,
handleClickIcon,
focus,
handleClickTab,
listEl,
};
};
exports.useTabs = useTabs;
//# sourceMappingURL=useTabs.js.map