@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
56 lines (55 loc) • 2.46 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_ScrollArea_context = require("../ScrollArea.context.cjs");
const require_is_scrolling_within_scrollbar_bounds = require("../utils/is-scrolling-within-scrollbar-bounds.cjs");
const require_get_thumb_size = require("../utils/get-thumb-size.cjs");
const require_to_int = require("../utils/to-int.cjs");
const require_Scrollbar = require("./Scrollbar.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/ScrollbarY.tsx
function ScrollAreaScrollbarY(props) {
const { sizes, onSizesChange, style, ref: forwardedRef, ...others } = props;
const context = require_ScrollArea_context.useScrollAreaContext();
const [computedStyle, setComputedStyle] = (0, react.useState)();
const ref = (0, react.useRef)(null);
const composeRefs = (0, _mantine_hooks.useMergedRef)(forwardedRef, ref, context.onScrollbarYChange);
(0, react.useEffect)(() => {
if (ref.current) setComputedStyle(window.getComputedStyle(ref.current));
}, []);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Scrollbar.Scrollbar, {
...others,
"data-orientation": "vertical",
ref: composeRefs,
sizes,
style: {
["--sa-thumb-height"]: `${require_get_thumb_size.getThumbSize(sizes)}px`,
...style
},
onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
onWheelScroll: (event, maxScrollPos) => {
if (context.viewport) {
const scrollPos = context.viewport.scrollTop + event.deltaY;
props.onWheelScroll(scrollPos);
if (require_is_scrolling_within_scrollbar_bounds.isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
}
},
onResize: () => {
if (ref.current && context.viewport && computedStyle) onSizesChange({
content: context.viewport.scrollHeight,
viewport: context.viewport.offsetHeight,
scrollbar: {
size: ref.current.clientHeight,
paddingStart: require_to_int.toInt(computedStyle.paddingTop),
paddingEnd: require_to_int.toInt(computedStyle.paddingBottom)
}
});
}
});
}
ScrollAreaScrollbarY.displayName = "@mantine/core/ScrollAreaScrollbarY";
//#endregion
exports.ScrollAreaScrollbarY = ScrollAreaScrollbarY;
//# sourceMappingURL=ScrollbarY.cjs.map