@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
40 lines (39 loc) • 1.29 kB
JavaScript
"use client";
import { useScrollAreaContext } from "../ScrollArea.context.mjs";
import { useResizeObserver } from "../use-resize-observer.mjs";
import { useState } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.tsx
function Corner(props) {
const { style, ...others } = props;
const ctx = useScrollAreaContext();
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const hasSize = Boolean(width && height);
useResizeObserver(ctx.scrollbarX, () => {
const h = ctx.scrollbarX?.offsetHeight || 0;
ctx.onCornerHeightChange(h);
setHeight(h);
});
useResizeObserver(ctx.scrollbarY, () => {
const w = ctx.scrollbarY?.offsetWidth || 0;
ctx.onCornerWidthChange(w);
setWidth(w);
});
return hasSize ? /* @__PURE__ */ jsx("div", {
...others,
style: {
...style,
width,
height
}
}) : null;
}
function ScrollAreaCorner(props) {
const ctx = useScrollAreaContext();
const hasBothScrollbarsVisible = Boolean(ctx.scrollbarX && ctx.scrollbarY);
return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(Corner, { ...props }) : null;
}
//#endregion
export { ScrollAreaCorner };
//# sourceMappingURL=ScrollAreaCorner.mjs.map