@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
108 lines • 4.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabsScrollOverflow = void 0;
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const react_1 = require("react");
// Custom hook for managing scroll overflow behavior
const useTabsScrollOverflow = (scrollContainerRef) => {
const [scrollState, setScrollState] = (0, react_1.useState)({
isLeftVisible: false,
isRightVisible: false,
});
const checkOverflow = (0, react_1.useCallback)(() => {
const scrollContainer = scrollContainerRef.current;
if (!scrollContainer) {
return;
}
const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
const tolerance = 1;
setScrollState({
isLeftVisible: scrollLeft > 0,
isRightVisible: scrollLeft < scrollWidth - clientWidth - tolerance,
});
}, [scrollContainerRef]);
const scrollToNextItem = (0, react_1.useCallback)((direction) => {
const scrollContainer = scrollContainerRef.current;
if (!scrollContainer) {
return;
}
const tabs = Array.from(scrollContainer.querySelectorAll('.ndl-tab'));
if (tabs.length === 0) {
return;
}
const containerRect = scrollContainer.getBoundingClientRect();
const containerCenter = containerRect.left + containerRect.width / 2;
let targetTab = null;
if (direction === 'right') {
for (const tab of tabs) {
const tabRect = tab.getBoundingClientRect();
if (tabRect.right > containerRect.right) {
targetTab = tab;
break;
}
}
}
else {
for (let i = tabs.length - 1; i >= 0; i--) {
const tab = tabs[i];
const tabRect = tab.getBoundingClientRect();
if (tabRect.left < containerRect.left) {
targetTab = tab;
break;
}
}
}
if (targetTab) {
const tabRect = targetTab.getBoundingClientRect();
const scrollLeft = scrollContainer.scrollLeft;
const targetScrollLeft = scrollLeft + (tabRect.left - containerCenter + tabRect.width / 2);
scrollContainer.scrollTo({
behavior: 'smooth',
left: targetScrollLeft,
});
}
}, [scrollContainerRef]);
// Consolidated effect for all scroll-related event listeners
(0, react_1.useEffect)(() => {
const scrollContainer = scrollContainerRef.current;
if (!scrollContainer) {
return;
}
const handleScroll = () => checkOverflow();
const resizeObserver = new ResizeObserver(() => checkOverflow());
scrollContainer.addEventListener('scroll', handleScroll);
resizeObserver.observe(scrollContainer);
// Initial check
checkOverflow();
return () => {
scrollContainer.removeEventListener('scroll', handleScroll);
resizeObserver.disconnect();
};
}, [checkOverflow, scrollContainerRef]);
return {
checkOverflow,
scrollState,
scrollToNextItem,
};
};
exports.useTabsScrollOverflow = useTabsScrollOverflow;
//# sourceMappingURL=use-tabs-scroll-overflow.js.map