mtxuilib 0.1.397 → 0.1.399
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
2
|
+
import React from "react";
|
|
3
|
+
interface MtScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
|
|
4
|
+
showScrollButton?: boolean;
|
|
5
|
+
autoScrollToBottom?: boolean;
|
|
6
|
+
scrollToBottom?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const MtScrollArea: React.ForwardRefExoticComponent<MtScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
4
|
+
import { ChevronsDown } from "lucide-react";
|
|
5
|
+
import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
|
|
6
|
+
import { cn } from "../../lib/utils";
|
|
7
|
+
import { MtButton } from "./Button";
|
|
8
|
+
export const MtScrollArea = forwardRef(({ className, children, autoScrollToBottom = false, ...props }, ref) => {
|
|
9
|
+
const [showScrollButton, setShowScrollButton] = useState(false);
|
|
10
|
+
const viewportRef = useRef(null);
|
|
11
|
+
const handleScroll = useCallback(() => {
|
|
12
|
+
if (viewportRef.current) {
|
|
13
|
+
const { scrollTop, scrollHeight, clientHeight } = viewportRef.current;
|
|
14
|
+
const bottomThreshold = 100;
|
|
15
|
+
setShowScrollButton(scrollHeight - scrollTop - clientHeight > bottomThreshold);
|
|
16
|
+
}
|
|
17
|
+
}, []);
|
|
18
|
+
const scrollToBottom = React.useCallback(() => {
|
|
19
|
+
if (viewportRef.current) {
|
|
20
|
+
viewportRef.current.scrollTo({
|
|
21
|
+
top: viewportRef.current.scrollHeight,
|
|
22
|
+
behavior: "smooth",
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}, []);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
const viewport = viewportRef.current;
|
|
28
|
+
if (viewport) {
|
|
29
|
+
viewport.addEventListener("scroll", handleScroll);
|
|
30
|
+
return () => viewport.removeEventListener("scroll", handleScroll);
|
|
31
|
+
}
|
|
32
|
+
}, [handleScroll]);
|
|
33
|
+
const contentRef = useRef(null);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (autoScrollToBottom && contentRef.current) {
|
|
36
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
37
|
+
scrollToBottom();
|
|
38
|
+
});
|
|
39
|
+
resizeObserver.observe(contentRef.current);
|
|
40
|
+
return () => {
|
|
41
|
+
resizeObserver.disconnect();
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
}, [autoScrollToBottom, scrollToBottom]);
|
|
45
|
+
return (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsxs(ScrollAreaPrimitive.Viewport, { ref: viewportRef, className: "size-full rounded-[inherit]", children: [_jsx("div", { ref: contentRef, children: children }), showScrollButton && (_jsx(MtButton, { variant: "ghost", className: "absolute px-1 py-1 bottom-4 right-4 rounded-full shadow-sm w-12 h-12 flex items-center justify-center", onClick: scrollToBottom, children: _jsx(ChevronsDown, { className: "w-6 h-6" }) }))] }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
|
|
46
|
+
});
|
|
47
|
+
MtScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
48
|
+
export const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn("flex touch-none select-none transition-colors", orientation === "vertical" &&
|
|
49
|
+
"h-full w-2.5 border-l border-l-transparent p-px", orientation === "horizontal" &&
|
|
50
|
+
"h-2.5 flex-col border-t border-t-transparent p-px", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1") }) })));
|
|
51
|
+
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|