@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
57 lines • 2.34 kB
JavaScript
import { useEffect, useMemo, useState } from "react";
import { debounce } from "../../../util/index.js";
import { ownerDocument } from "../../../util/owner.js";
export function useScrollButtons(listRef) {
const [displayScroll, setDisplayScroll] = useState({
start: false,
end: false,
});
const updateScrollButtonState = useMemo(() => debounce(() => {
if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
return;
const { scrollWidth, clientWidth } = listRef.current;
const scrollLeft = listRef.current.scrollLeft;
// use 1 for the potential rounding error with browser zooms.
const showStartScroll = scrollLeft > 1;
const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
setDisplayScroll((oldDisplayScroll) => showStartScroll === oldDisplayScroll.start &&
showEndScroll === oldDisplayScroll.end
? oldDisplayScroll
: { start: showStartScroll, end: showEndScroll });
}), [listRef]);
useEffect(() => {
const handleResize = () => updateScrollButtonState();
const ownerDoc = ownerDocument(listRef.current);
ownerDoc.addEventListener("resize", handleResize);
let resizeObserver;
if (typeof ResizeObserver !== "undefined" && listRef.current) {
resizeObserver = new ResizeObserver(handleResize);
resizeObserver.observe(listRef.current);
}
return () => {
ownerDoc.removeEventListener("resize", handleResize);
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
updateScrollButtonState.clear();
};
}, [listRef, updateScrollButtonState]);
useEffect(() => {
updateScrollButtonState();
});
return {
update: updateScrollButtonState,
start: displayScroll.start,
end: displayScroll.end,
show: displayScroll.end || displayScroll.start,
scrollLeft: () => {
if (listRef.current) {
listRef.current.scrollLeft -= 100;
}
},
scrollRight: () => {
if (listRef.current) {
listRef.current.scrollLeft += 100;
}
},
};
}
//# sourceMappingURL=useScrollButtons.js.map