@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/components/ui/drawer.tsx

@@ -1,279 +1,279 @@
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "../../lib/utils"
-import { IconBtn } from "../icon-btn"
-import { CloseIcon } from "../bs-icons"
-
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
-}
-
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({
-  container,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal> & {
-  container?: HTMLElement | null;
-}) {
-  return (
-    <DrawerPrimitive.Portal
-      data-slot="drawer-portal"
-      container={container ?? undefined}
-      {...props}
-    />
-  )
-}
-
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerContent({
-  className,
-  children,
-  container: containerProp,
-  hideOverlay = false,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
-  container?: HTMLElement | null;
-  /** 全屏等场景下头部需保持可交互时，可隐藏遮罩 */
-  hideOverlay?: boolean;
-}) {
-  const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
-
-  const setDetectorRef = React.useCallback((node: HTMLElement | null) => {
-    if (!node) return;
-    const rootNode = node.getRootNode();
-    if (rootNode instanceof ShadowRoot) {
-      const existing = rootNode.querySelector<HTMLElement>('[data-bs-drawer-portal]');
-      if (existing) {
-        setAutoContainer(existing);
-        return;
-      }
-
-      // vaul injects its CSS (keyframes, transitions) into document.head at module load.
-      // Clone it into the ShadowRoot so animations work when portaled inside Shadow DOM.
-      if (!rootNode.querySelector('style[data-bs-vaul-style]')) {
-        const vaulStyle = Array.from(document.head.querySelectorAll('style')).find(
-          (el) => el.textContent?.includes('[data-vaul-drawer]')
-        );
-        if (vaulStyle) {
-          const cloned = vaulStyle.cloneNode(true) as HTMLStyleElement;
-          cloned.setAttribute('data-bs-vaul-style', '');
-          rootNode.appendChild(cloned);
-        }
-      }
-
-      const container = document.createElement('div');
-      container.setAttribute('data-bs-drawer-portal', 'true');
-      rootNode.appendChild(container);
-      setAutoContainer(container);
-    }
-  }, []);
-
-  const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
-
-  return (
-    <>
-      {containerProp === undefined && (
-        <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
-      )}
-      <DrawerPortal container={effectiveContainer ?? undefined}>
-        {!hideOverlay && <DrawerOverlay />}
-        <DrawerPrimitive.Content
-          data-slot="drawer-content"
-          className={cn(
-            "group/drawer-content fixed z-50 flex h-auto flex-col bg-white shadow-xl",
-            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
-            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100vh-52px)] data-[vaul-drawer-direction=bottom]:rounded-t-[10px]",
-            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
-            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
-            "rounded-0!",
-            className
-          )}
-          {...props}
-          style={{
-            ...(props.style || {}),
-            borderRadius: 0,
-          }}
-        >
-          {children}
-        </DrawerPrimitive.Content>
-      </DrawerPortal>
-    </>
-  )
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex items-center justify-center relative h-[50px] shrink-0 border-b border-[#E0E0E0]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerBody({ className, children, style, ...props }: React.ComponentProps<"div"> & {
-  full?: boolean;
-}) {
-  const bodyRef = React.useRef<HTMLDivElement>(null);
-  const contentRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const el = bodyRef.current;
-    if (!el) return;
-
-    const handleWheel = (e: WheelEvent) => {
-      const { scrollTop, scrollHeight, clientHeight } = el;
-      const atTop = scrollTop <= 0;
-      const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
-
-      if ((e.deltaY > 0 && !atBottom) || (e.deltaY < 0 && !atTop)) {
-        e.stopPropagation();
-      }
-    };
-
-    el.addEventListener("wheel", handleWheel);
-    return () => el.removeEventListener("wheel", handleWheel);
-  }, []);
-
-  React.useEffect(() => {
-    const content = contentRef.current;
-    const body = bodyRef.current;
-    if (!content || !body) return;
-
-    const observer = new ResizeObserver(() => {
-      body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
-    });
-
-    observer.observe(content);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={bodyRef}
-      data-slot="drawer-body"
-      className={cn("flex-1 overflow-y-auto bg-[#F5F7FA]", className)}
-      style={{ scrollbarGutter: "stable", ...style }}
-      {...props}
-    >
-      <div
-        ref={contentRef}
-        className={cn("content-wrapper w-[1120px] bg-white mx-auto p-5 rounded-lg my-5", {
-          "w-[calc(100%-40px)]": props.full,
-          "h-[calc(100%-40px)]": props.full,
-          'mx-5': props.full,
-          "w-[1120px]": !props.full,
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn(
-        "flex items-center justify-center gap-4 h-[52px] shrink-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn("text-[18px] font-semibold text-black", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-const DrawerCloseButton = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Close>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Close
-    ref={ref}
-    className={cn(
-      "absolute right-3 top-1/2 -translate-y-1/2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      className
-    )}
-    {...props}
-  >
-    {/* <X className="h-4 w-4" /> */}
-    <IconBtn
-      icon={ <CloseIcon />}
-    />
-    <span className="sr-only">Close</span>
-  </DrawerPrimitive.Close>
-))
-DrawerCloseButton.displayName = "DrawerCloseButton"
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerCloseButton,
-}
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "../../lib/utils"
+import { IconBtn } from "../icon-btn"
+import { CloseIcon } from "../bs-icons"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  container,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal> & {
+  container?: HTMLElement | null;
+}) {
+  return (
+    <DrawerPrimitive.Portal
+      data-slot="drawer-portal"
+      container={container ?? undefined}
+      {...props}
+    />
+  )
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  container: containerProp,
+  hideOverlay = false,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  container?: HTMLElement | null;
+  /** 全屏等场景下头部需保持可交互时，可隐藏遮罩 */
+  hideOverlay?: boolean;
+}) {
+  const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
+
+  const setDetectorRef = React.useCallback((node: HTMLElement | null) => {
+    if (!node) return;
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>('[data-bs-drawer-portal]');
+      if (existing) {
+        setAutoContainer(existing);
+        return;
+      }
+
+      // vaul injects its CSS (keyframes, transitions) into document.head at module load.
+      // Clone it into the ShadowRoot so animations work when portaled inside Shadow DOM.
+      if (!rootNode.querySelector('style[data-bs-vaul-style]')) {
+        const vaulStyle = Array.from(document.head.querySelectorAll('style')).find(
+          (el) => el.textContent?.includes('[data-vaul-drawer]')
+        );
+        if (vaulStyle) {
+          const cloned = vaulStyle.cloneNode(true) as HTMLStyleElement;
+          cloned.setAttribute('data-bs-vaul-style', '');
+          rootNode.appendChild(cloned);
+        }
+      }
+
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-drawer-portal', 'true');
+      rootNode.appendChild(container);
+      setAutoContainer(container);
+    }
+  }, []);
+
+  const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
+
+  return (
+    <>
+      {containerProp === undefined && (
+        <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
+      )}
+      <DrawerPortal container={effectiveContainer ?? undefined}>
+        {!hideOverlay && <DrawerOverlay />}
+        <DrawerPrimitive.Content
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content fixed z-50 flex h-auto flex-col bg-white shadow-xl",
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100vh-52px)] data-[vaul-drawer-direction=bottom]:rounded-t-[10px]",
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "rounded-0!",
+            className
+          )}
+          {...props}
+          style={{
+            ...(props.style || {}),
+            borderRadius: 0,
+          }}
+        >
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
+    </>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex items-center justify-center relative h-[50px] shrink-0 border-b border-[#E0E0E0]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerBody({ className, children, style, ...props }: React.ComponentProps<"div"> & {
+  full?: boolean;
+}) {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const atTop = scrollTop <= 0;
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+      if ((e.deltaY > 0 && !atBottom) || (e.deltaY < 0 && !atTop)) {
+        e.stopPropagation();
+      }
+    };
+
+    el.addEventListener("wheel", handleWheel);
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, []);
+
+  React.useEffect(() => {
+    const content = contentRef.current;
+    const body = bodyRef.current;
+    if (!content || !body) return;
+
+    const observer = new ResizeObserver(() => {
+      body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
+    });
+
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={bodyRef}
+      data-slot="drawer-body"
+      className={cn("flex-1 overflow-y-auto bg-[#F5F7FA]", className)}
+      style={{ scrollbarGutter: "stable", ...style }}
+      {...props}
+    >
+      <div
+        ref={contentRef}
+        className={cn("content-wrapper w-[1120px] bg-white mx-auto p-5 rounded-lg my-5", {
+          "w-[calc(100%-40px)]": props.full,
+          "h-[calc(100%-40px)]": props.full,
+          'mx-5': props.full,
+          "w-[1120px]": !props.full,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn(
+        "flex items-center justify-center gap-4 h-[52px] shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-[18px] font-semibold text-black", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const DrawerCloseButton = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Close
+    ref={ref}
+    className={cn(
+      "absolute right-3 top-1/2 -translate-y-1/2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      className
+    )}
+    {...props}
+  >
+    {/* <X className="h-4 w-4" /> */}
+    <IconBtn
+      icon={ <CloseIcon />}
+    />
+    <span className="sr-only">Close</span>
+  </DrawerPrimitive.Close>
+))
+DrawerCloseButton.displayName = "DrawerCloseButton"
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerCloseButton,
+}