@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
89 lines (88 loc) • 3.95 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
const require_use_resize_observer = require("../use-resize-observer.cjs");
const require_compose_event_handlers = require("../utils/compose-event-handlers.cjs");
const require_Scrollbar_context = require("./Scrollbar.context.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/Scrollbar.tsx
function Scrollbar(props) {
const { sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ref, ...scrollbarProps } = props;
const context = require_ScrollArea_context.useScrollAreaContext();
const [scrollbar, setScrollbar] = (0, react.useState)(null);
const composeRefs = (0, _mantine_hooks.useMergedRef)(ref, (node) => setScrollbar(node));
const rectRef = (0, react.useRef)(null);
const prevWebkitUserSelectRef = (0, react.useRef)("");
const { viewport } = context;
const maxScrollPos = sizes.content - sizes.viewport;
const handleWheelScroll = (0, react.useEffectEvent)(onWheelScroll);
const handleThumbPositionChange = (0, _mantine_hooks.useCallbackRef)(onThumbPositionChange);
const handleResize = (0, _mantine_hooks.useDebouncedCallback)(onResize, 10);
const handleDragScroll = (event) => {
if (rectRef.current) onDragScroll({
x: event.clientX - rectRef.current.left,
y: event.clientY - rectRef.current.top
});
};
(0, react.useEffect)(() => {
const handleWheel = (event) => {
const element = event.target;
if (scrollbar?.contains(element)) handleWheelScroll(event, maxScrollPos);
};
document.addEventListener("wheel", handleWheel, { passive: false });
return () => document.removeEventListener("wheel", handleWheel, { passive: false });
}, [
viewport,
scrollbar,
maxScrollPos
]);
(0, react.useEffect)(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
require_use_resize_observer.useResizeObserver(scrollbar, handleResize);
require_use_resize_observer.useResizeObserver(context.content, handleResize);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Scrollbar_context.ScrollbarProvider, {
value: {
scrollbar,
hasThumb,
onThumbChange: (0, _mantine_hooks.useCallbackRef)(onThumbChange),
onThumbPointerUp: (0, _mantine_hooks.useCallbackRef)(onThumbPointerUp),
onThumbPositionChange: handleThumbPositionChange,
onThumbPointerDown: (0, _mantine_hooks.useCallbackRef)(onThumbPointerDown)
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...scrollbarProps,
ref: composeRefs,
"data-mantine-scrollbar": true,
style: {
position: "absolute",
...scrollbarProps.style
},
onPointerDown: require_compose_event_handlers.composeEventHandlers(props.onPointerDown, (event) => {
event.preventDefault();
if (event.button === 0) {
event.target.setPointerCapture(event.pointerId);
rectRef.current = scrollbar.getBoundingClientRect();
prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
document.body.style.webkitUserSelect = "none";
handleDragScroll(event);
}
}),
onPointerMove: require_compose_event_handlers.composeEventHandlers(props.onPointerMove, handleDragScroll),
onPointerUp: require_compose_event_handlers.composeEventHandlers(props.onPointerUp, (event) => {
const element = event.target;
if (element.hasPointerCapture(event.pointerId)) {
event.preventDefault();
element.releasePointerCapture(event.pointerId);
}
}),
onLostPointerCapture: () => {
document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
rectRef.current = null;
}
})
});
}
//#endregion
exports.Scrollbar = Scrollbar;
//# sourceMappingURL=Scrollbar.cjs.map