@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
85 lines (84 loc) • 3.72 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
const require_get_thumb_ratio = require("../utils/get-thumb-ratio.cjs");
const require_get_thumb_offset_from_scroll = require("../utils/get-thumb-offset-from-scroll.cjs");
const require_get_scroll_position_from_pointer = require("../utils/get-scroll-position-from-pointer.cjs");
const require_ScrollbarX = require("./ScrollbarX.cjs");
const require_ScrollbarY = require("./ScrollbarY.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx
function ScrollAreaScrollbarVisible(props) {
const { orientation = "vertical", ...scrollbarProps } = props;
const { dir } = require_DirectionProvider.useDirection();
const context = require_ScrollArea_context.useScrollAreaContext();
const thumbRef = (0, react.useRef)(null);
const pointerOffsetRef = (0, react.useRef)(0);
const [sizes, setSizes] = (0, react.useState)({
content: 0,
viewport: 0,
scrollbar: {
size: 0,
paddingStart: 0,
paddingEnd: 0
}
});
const thumbRatio = require_get_thumb_ratio.getThumbRatio(sizes.viewport, sizes.content);
const commonProps = {
...scrollbarProps,
sizes,
onSizesChange: setSizes,
hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
onThumbChange: (thumb) => {
thumbRef.current = thumb;
},
onThumbPointerUp: () => {
pointerOffsetRef.current = 0;
},
onThumbPointerDown: (pointerPos) => {
pointerOffsetRef.current = pointerPos;
}
};
const getScrollPosition = (pointerPos, direction) => require_get_scroll_position_from_pointer.getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);
if (orientation === "horizontal") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollbarX.ScrollAreaScrollbarX, {
...commonProps,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollLeft;
const offset = require_get_thumb_offset_from_scroll.getThumbOffsetFromScroll(scrollPos, sizes, dir);
thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
}
},
onWheelScroll: (scrollPos) => {
if (context.viewport) context.viewport.scrollLeft = scrollPos;
},
onDragScroll: (pointerPos) => {
if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, dir);
}
});
if (orientation === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScrollbarY.ScrollAreaScrollbarY, {
...commonProps,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollTop;
const offset = require_get_thumb_offset_from_scroll.getThumbOffsetFromScroll(scrollPos, sizes);
if (sizes.scrollbar.size === 0) thumbRef.current.style.setProperty("--thumb-opacity", "0");
else thumbRef.current.style.setProperty("--thumb-opacity", "1");
thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
}
},
onWheelScroll: (scrollPos) => {
if (context.viewport) context.viewport.scrollTop = scrollPos;
},
onDragScroll: (pointerPos) => {
if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
}
});
return null;
}
ScrollAreaScrollbarVisible.displayName = "@mantine/core/ScrollAreaScrollbarVisible";
//#endregion
exports.ScrollAreaScrollbarVisible = ScrollAreaScrollbarVisible;
//# sourceMappingURL=ScrollAreaScrollbarVisible.cjs.map