@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
54 lines (53 loc) • 2.41 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
const require_compose_event_handlers = require("../utils/compose-event-handlers.cjs");
const require_ScrollAreaScrollbarVisible = require("./ScrollAreaScrollbarVisible.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.tsx
function ScrollAreaScrollbarScroll(props) {
const { forceMount, ...scrollbarProps } = props;
const context = require_ScrollArea_context.useScrollAreaContext();
const isHorizontal = props.orientation === "horizontal";
const [state, setState] = (0, react.useState)("hidden");
const debounceScrollEnd = (0, _mantine_hooks.useDebouncedCallback)(() => setState("idle"), 100);
(0, react.useEffect)(() => {
if (state === "idle") {
const hideTimer = window.setTimeout(() => setState("hidden"), context.scrollHideDelay);
return () => window.clearTimeout(hideTimer);
}
}, [state, context.scrollHideDelay]);
(0, react.useEffect)(() => {
const { viewport } = context;
const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
if (viewport) {
let prevScrollPos = viewport[scrollDirection];
const handleScroll = () => {
const scrollPos = viewport[scrollDirection];
if (prevScrollPos !== scrollPos) {
setState("scrolling");
debounceScrollEnd();
}
prevScrollPos = scrollPos;
};
viewport.addEventListener("scroll", handleScroll);
return () => viewport.removeEventListener("scroll", handleScroll);
}
}, [
context.viewport,
isHorizontal,
debounceScrollEnd
]);
if (forceMount || state !== "hidden") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbarVisible.ScrollAreaScrollbarVisible, {
"data-state": state === "hidden" ? "hidden" : "visible",
...scrollbarProps,
onPointerEnter: require_compose_event_handlers.composeEventHandlers(props.onPointerEnter, () => setState("interacting")),
onPointerLeave: require_compose_event_handlers.composeEventHandlers(props.onPointerLeave, () => setState("idle"))
});
return null;
}
//#endregion
exports.ScrollAreaScrollbarScroll = ScrollAreaScrollbarScroll;
//# sourceMappingURL=ScrollAreaScrollbarScroll.cjs.map