@redocly/theme
Version:
Shared UI components lib
54 lines • 2.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useCodeBlockTabsControls = useCodeBlockTabsControls;
const react_1 = require("react");
function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
var _a;
const [showControls, setShowControls] = (0, react_1.useState)(false);
const tabsWidth = (0, react_1.useMemo)(() => {
var _a;
return ((_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.reduce((acc, tabRef) => {
return tabRef ? acc + tabRef.offsetWidth : acc;
}, 0)) || 0;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
const { currentIndex, isFirstTab, isLastTab } = (0, react_1.useMemo)(() => {
const currentIndex = tabs.files.findIndex((file) => file.name === tabs.activeTabName);
return {
currentIndex,
isFirstTab: currentIndex === 0,
isLastTab: currentIndex === tabs.files.length - 1,
};
}, [tabs]);
(0, react_1.useEffect)(() => {
if (containerRef.current) {
const container = containerRef.current;
const resizeObserver = new ResizeObserver((entries) => {
const containerWidth = entries[0].contentRect.width;
setShowControls(tabsWidth > containerWidth);
});
resizeObserver.observe(container);
return () => {
resizeObserver.unobserve(container);
};
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [containerRef.current]);
const handlePrevTab = (0, react_1.useCallback)(() => {
if (!isFirstTab) {
const prevTab = tabs.files[currentIndex - 1].name;
tabs.handleTabSwitch(prevTab);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentIndex]);
const handleNextTab = (0, react_1.useCallback)(() => {
if (!isLastTab) {
const nextTab = tabs.files[currentIndex + 1].name;
tabs.handleTabSwitch(nextTab);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentIndex]);
return { showControls, handlePrevTab, handleNextTab };
}
//# sourceMappingURL=use-codeblock-tabs-controls.js.map