@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
84 lines (83 loc) • 3.28 kB
JavaScript
"use client";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { getThumbRatio } from "../utils/get-thumb-ratio.mjs";
import { getThumbOffsetFromScroll } from "../utils/get-thumb-offset-from-scroll.mjs";
import { getScrollPositionFromPointer } from "../utils/get-scroll-position-from-pointer.mjs";
import { ScrollAreaScrollbarX } from "./ScrollbarX.mjs";
import { ScrollAreaScrollbarY } from "./ScrollbarY.mjs";
import { useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx
function ScrollAreaScrollbarVisible(props) {
const { orientation = "vertical", ...scrollbarProps } = props;
const { dir } = useDirection();
const context = useScrollAreaContext();
const thumbRef = useRef(null);
const pointerOffsetRef = useRef(0);
const [sizes, setSizes] = useState({
content: 0,
viewport: 0,
scrollbar: {
size: 0,
paddingStart: 0,
paddingEnd: 0
}
});
const thumbRatio = 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) => getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);
if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
...commonProps,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollLeft;
const offset = 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__ */ jsx(ScrollAreaScrollbarY, {
...commonProps,
onThumbPositionChange: () => {
if (context.viewport && thumbRef.current) {
const scrollPos = context.viewport.scrollTop;
const offset = 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
export { ScrollAreaScrollbarVisible };
//# sourceMappingURL=ScrollAreaScrollbarVisible.mjs.map