@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
75 lines (74 loc) • 3.21 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_add_unlinked_scroll_listener = require("../utils/add-unlinked-scroll-listener.cjs");
const require_Scrollbar_context = require("../ScrollAreaScrollbar/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/ScrollAreaThumb/ScrollAreaThumb.tsx
function Thumb(props) {
const { style, ref: forwardedRef, ...others } = props;
const scrollAreaContext = require_ScrollArea_context.useScrollAreaContext();
const scrollbarContext = require_Scrollbar_context.useScrollbarContext();
const { onThumbPositionChange } = scrollbarContext;
const composedRef = (0, _mantine_hooks.useMergedRef)(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
const removeUnlinkedScrollListenerRef = (0, react.useRef)(void 0);
const debounceScrollEnd = (0, _mantine_hooks.useDebouncedCallback)(() => {
if (removeUnlinkedScrollListenerRef.current) {
removeUnlinkedScrollListenerRef.current();
removeUnlinkedScrollListenerRef.current = void 0;
}
}, 100);
(0, react.useEffect)(() => {
const { viewport } = scrollAreaContext;
if (viewport) {
const handleScroll = () => {
debounceScrollEnd();
if (!removeUnlinkedScrollListenerRef.current) {
removeUnlinkedScrollListenerRef.current = require_add_unlinked_scroll_listener.addUnlinkedScrollListener(viewport, onThumbPositionChange);
onThumbPositionChange();
}
};
onThumbPositionChange();
viewport.addEventListener("scroll", handleScroll);
return () => viewport.removeEventListener("scroll", handleScroll);
}
}, [
scrollAreaContext.viewport,
debounceScrollEnd,
onThumbPositionChange
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
"data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
...others,
ref: composedRef,
style: {
width: "var(--sa-thumb-width)",
height: "var(--sa-thumb-height)",
...style
},
onPointerDownCapture: require_compose_event_handlers.composeEventHandlers(props.onPointerDownCapture, (event) => {
const thumbRect = event.target.getBoundingClientRect();
const x = event.clientX - thumbRect.left;
const y = event.clientY - thumbRect.top;
scrollbarContext.onThumbPointerDown({
x,
y
});
}),
onPointerUp: require_compose_event_handlers.composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
});
}
Thumb.displayName = "@mantine/core/ScrollAreaThumb";
function ScrollAreaThumb(props) {
const { forceMount, ...thumbProps } = props;
const scrollbarContext = require_Scrollbar_context.useScrollbarContext();
if (forceMount || scrollbarContext.hasThumb) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Thumb, { ...thumbProps });
return null;
}
ScrollAreaThumb.displayName = "@mantine/core/ScrollAreaThumb";
//#endregion
exports.ScrollAreaThumb = ScrollAreaThumb;
//# sourceMappingURL=ScrollAreaThumb.cjs.map