@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
42 lines (41 loc) • 1.8 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
const require_ScrollAreaScrollbarAuto = require("./ScrollAreaScrollbarAuto.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.tsx
function ScrollAreaScrollbarHover(props) {
const { forceMount, ...scrollbarProps } = props;
const context = require_ScrollArea_context.useScrollAreaContext();
const [visible, setVisible] = (0, react.useState)(false);
(0, react.useEffect)(() => {
const { scrollArea } = context;
let hideTimer = 0;
if (scrollArea) {
const handlePointerEnter = () => {
window.clearTimeout(hideTimer);
setVisible(true);
};
const handlePointerLeave = () => {
hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
};
scrollArea.addEventListener("pointerenter", handlePointerEnter);
scrollArea.addEventListener("pointerleave", handlePointerLeave);
return () => {
window.clearTimeout(hideTimer);
scrollArea.removeEventListener("pointerenter", handlePointerEnter);
scrollArea.removeEventListener("pointerleave", handlePointerLeave);
};
}
}, [context.scrollArea, context.scrollHideDelay]);
if (forceMount || visible) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollAreaScrollbarAuto.ScrollAreaScrollbarAuto, {
"data-state": visible ? "visible" : "hidden",
...scrollbarProps
});
return null;
}
ScrollAreaScrollbarHover.displayName = "@mantine/core/ScrollAreaScrollbarHover";
//#endregion
exports.ScrollAreaScrollbarHover = ScrollAreaScrollbarHover;
//# sourceMappingURL=ScrollAreaScrollbarHover.cjs.map