@tendaui/components 1.2.4 → 1.3.0

package/dialog/_example/confirm-loading.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function ConfirmLoading() {
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleConfirm = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setVisible(false);
+    }, 2000);
+  };
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        异步确认
+      </Button>
+      <Dialog
+        header="异步确认"
+        visible={visible}
+        confirmLoading={loading}
+        onClose={() => setVisible(false)}
+        onConfirm={handleConfirm}
+      >
+        <p>点击确认按钮后会显示加载状态，2秒后自动关闭。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/custom-buttons.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function CustomButtons() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        自定义按钮
+      </Button>
+      <Dialog
+        header="自定义按钮"
+        visible={visible}
+        confirmBtn={{ content: "我知道了", theme: "primary" }}
+        cancelBtn={{ content: "稍后再说", variant: "outline" }}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <p>这是一个带自定义按钮文字的对话框。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/full-screen.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function FullScreen() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        全屏对话框
+      </Button>
+      <Dialog
+        header="全屏对话框"
+        mode="full-screen"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <div style={{ padding: "20px" }}>
+          <p>这是一个全屏对话框，适合展示大量内容。</p>
+          <p>可以在这里放置复杂的表单、数据展示等。</p>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/hide-buttons.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function HideButtons() {
+  const [noCancelVisible, setNoCancelVisible] = useState(false);
+  const [noFooterVisible, setNoFooterVisible] = useState(false);
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button theme="primary" onClick={() => setNoCancelVisible(true)}>
+          无取消按钮
+        </Button>
+        <Button theme="primary" onClick={() => setNoFooterVisible(true)}>
+          无底部操作栏
+        </Button>
+      </div>
+
+      <Dialog
+        header="无取消按钮"
+        visible={noCancelVisible}
+        cancelBtn={null}
+        onClose={() => setNoCancelVisible(false)}
+        onConfirm={() => setNoCancelVisible(false)}
+      >
+        <p>这是一个只有确认按钮的对话框。</p>
+      </Dialog>
+
+      <Dialog
+        header="无底部操作栏"
+        visible={noFooterVisible}
+        footer={false}
+        onClose={() => setNoFooterVisible(false)}
+      >
+        <p>这是一个没有底部操作栏的对话框，点击右上角关闭按钮关闭。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/modeless.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Modeless() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        非模态对话框
+      </Button>
+      <Dialog
+        header="非模态对话框"
+        mode="modeless"
+        draggable
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <p>这是一个非模态对话框，可以拖拽移动。</p>
+        <p>可以同时操作页面上的其他内容。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/placement.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Placement() {
+  const [topVisible, setTopVisible] = useState(false);
+  const [centerVisible, setCenterVisible] = useState(false);
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px" }}>
+        <Button theme="primary" onClick={() => setTopVisible(true)}>
+          顶部对话框
+        </Button>
+        <Button theme="primary" onClick={() => setCenterVisible(true)}>
+          居中对话框
+        </Button>
+      </div>
+
+      <Dialog
+        header="顶部对话框"
+        placement="top"
+        visible={topVisible}
+        onClose={() => setTopVisible(false)}
+        onConfirm={() => setTopVisible(false)}
+      >
+        <p>这是一个显示在顶部的对话框。</p>
+      </Dialog>
+
+      <Dialog
+        header="居中对话框"
+        placement="center"
+        visible={centerVisible}
+        onClose={() => setCenterVisible(false)}
+        onConfirm={() => setCenterVisible(false)}
+      >
+        <p>这是一个垂直居中的对话框。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/_example/plugin-example.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button, DialogPlugin } from "@tendaui/react";
+
+export default function PluginExample() {
+  const buttonStyle = { marginRight: 16 };
+
+  const showDialog = () => {
+    const myDialog = DialogPlugin({
+      header: "DialogPlugin 调用",
+      body: "这是通过 DialogPlugin 函数调用的对话框",
+      onConfirm: ({ e }) => {
+        console.log("confirm clicked", e);
+        myDialog.hide();
+      },
+      onClose: ({ trigger }) => {
+        console.log("trigger:", trigger);
+        myDialog.hide();
+      }
+    });
+  };
+
+  const showConfirm = () => {
+    const confirmDialog = DialogPlugin.confirm({
+      header: "确认操作",
+      body: "确定要执行此操作吗？",
+      confirmBtn: "确定",
+      cancelBtn: "取消",
+      onConfirm: () => {
+        confirmDialog.hide();
+      },
+      onClose: () => {
+        confirmDialog.hide();
+      }
+    });
+  };
+
+  const showAlert = () => {
+    const alertDialog = DialogPlugin.alert({
+      header: "提示",
+      body: "这是一条重要提示信息。",
+      confirmBtn: { content: "我知道了", theme: "primary" },
+      onConfirm: () => {
+        alertDialog.hide();
+      },
+      onClose: () => {
+        alertDialog.hide();
+      }
+    });
+  };
+
+  return (
+    <div>
+      <p style={{ marginBottom: "16px", color: "#666" }}>
+        函数调用方式：DialogPlugin(options) / DialogPlugin.confirm(options) / DialogPlugin.alert(options)
+      </p>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
+        <Button theme="primary" onClick={showDialog} style={buttonStyle}>
+          DialogPlugin
+        </Button>
+        <Button theme="primary" onClick={showConfirm} style={buttonStyle}>
+          DialogPlugin.confirm
+        </Button>
+        <Button theme="primary" onClick={showAlert} style={buttonStyle}>
+          DialogPlugin.alert
+        </Button>
+      </div>
+    </div>
+  );
+}

package/dialog/_example/themes.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Button, Dialog } from "@tendaui/react";
+
+export default function Themes() {
+  const [visible, setVisible] = useState(false);
+  const [theme, setTheme] = useState("default");
+
+  const openDialog = (t) => {
+    setTheme(t);
+    setVisible(true);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+        <Button onClick={() => openDialog("default")}>默认</Button>
+        <Button theme="primary" onClick={() => openDialog("info")}>
+          信息
+        </Button>
+        <Button theme="success" onClick={() => openDialog("success")}>
+          成功
+        </Button>
+        <Button theme="warning" onClick={() => openDialog("warning")}>
+          警告
+        </Button>
+        <Button theme="danger" onClick={() => openDialog("danger")}>
+          危险
+        </Button>
+      </div>
+      <Dialog
+        header={`${theme} 主题对话框`}
+        theme={theme}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={() => setVisible(false)}
+      >
+        <p>这是 {theme} 主题的对话框。</p>
+      </Dialog>
+    </>
+  );
+}

package/dialog/hooks/useDialogPosition.ts

@@ -1,35 +1,35 @@
-import { RefObject, useEffect, useRef } from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useLayoutEffect";
-type Position = { x: number; y: number };
-export default function useDialogPosition(visible: boolean | undefined, dialogCardRef: RefObject<HTMLElement | null>) {
-  const mousePosRef = useRef<Position>(null);
-
-  const getClickPosition = (e: MouseEvent) => {
-    if (mousePosRef) {
-      mousePosRef.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      setTimeout(() => {
-        mousePosRef.current = null;
-      }, 100);
-    }
-  };
-
-  useIsomorphicLayoutEffect(() => {
-    document.addEventListener("click", getClickPosition, true);
-    return () => {
-      document.removeEventListener("click", getClickPosition, true);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!visible) return;
-    // 动画渲染初始位置
-    if (mousePosRef.current && dialogCardRef.current) {
-      dialogCardRef.current.style.transformOrigin = `${mousePosRef.current.x - dialogCardRef.current.offsetLeft}px ${
-        mousePosRef.current.y - dialogCardRef.current.offsetTop
-      }px`;
-    }
-  }, [visible, dialogCardRef]);
-}
+import { RefObject, useEffect, useRef } from "react";
+import useIsomorphicLayoutEffect from "../../hooks/useLayoutEffect";
+type Position = { x: number; y: number };
+export default function useDialogPosition(visible: boolean | undefined, dialogCardRef: RefObject<HTMLElement | null>) {
+  const mousePosRef = useRef<Position>(null);
+
+  const getClickPosition = (e: MouseEvent) => {
+    if (mousePosRef) {
+      mousePosRef.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      setTimeout(() => {
+        mousePosRef.current = null;
+      }, 100);
+    }
+  };
+
+  useIsomorphicLayoutEffect(() => {
+    document.addEventListener("click", getClickPosition, true);
+    return () => {
+      document.removeEventListener("click", getClickPosition, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    // 动画渲染初始位置
+    if (mousePosRef.current && dialogCardRef.current) {
+      dialogCardRef.current.style.transformOrigin = `${mousePosRef.current.x - dialogCardRef.current.offsetLeft}px ${
+        mousePosRef.current.y - dialogCardRef.current.offsetTop
+      }px`;
+    }
+  }, [visible, dialogCardRef]);
+}

package/drawer/Drawer.tsx

@@ -73,7 +73,7 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
   } = state;
 
   const size = propsSize;
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
   const drawerAttach = useAttach("drawer", attach);
   const maskRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -81,8 +81,16 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
   const prefixCls = `${classPrefix}-drawer`;
 
   const closeIcon = isValidElement(closeBtn) ? closeBtn : <CloseIcon />;
+  const isRtl = direction === "rtl";
+  const actualPlacement = useMemo(() => {
+    if (!isRtl) return placement;
+    if (placement === "left") return "right";
+    if (placement === "right") return "left";
+    return placement;
+  }, [isRtl, placement]);
+
   const { dragSizeValue, enableDrag, draggableLineStyles, draggingStyles } = useDrag(
-    placement,
+    actualPlacement,
     sizeDraggable,
     onSizeDragEnd
   );
@@ -147,10 +155,10 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
   const contentWrapperStyle = useMemo(
     () => ({
       transform: visible && animationStart ? "translateX(0)" : undefined,
-      width: ["left", "right"].includes(placement) ? sizeValue : "",
-      height: ["top", "bottom"].includes(placement) ? sizeValue : ""
+      width: ["left", "right"].includes(actualPlacement) ? sizeValue : "",
+      height: ["top", "bottom"].includes(actualPlacement) ? sizeValue : ""
     }),
-    [visible, placement, sizeValue, animationStart]
+    [visible, actualPlacement, sizeValue, animationStart]
   );
 
   const renderDrawerButton = (btn: DrawerProps["cancelBtn"], defaultProps: ButtonProps) => {
@@ -184,12 +192,12 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
 
       const footerStyle = {
         display: "flex",
-        justifyContent: placement === "right" ? "flex-start" : "flex-end"
+        justifyContent: actualPlacement === "right" ? "flex-start" : "flex-end"
       };
 
       return (
         <div style={footerStyle}>
-          {placement === "right" ? (
+          {actualPlacement === "right" ? (
             <>
               {renderConfirmBtn} {renderCancelBtn}
             </>
@@ -233,7 +241,7 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
       <Portal attach={drawerAttach} ref={drawerWrapperRef}>
         <div
           ref={containerRef}
-          className={classnames(prefixCls, className, `${prefixCls}--${placement}`, {
+          className={classnames(prefixCls, className, `${prefixCls}--${actualPlacement}`, {
             [`${prefixCls}--open`]: visible,
             [`${prefixCls}--attach`]: showInAttachedElement,
             [`${prefixCls}--without-mask`]: !showOverlay
@@ -244,7 +252,7 @@ const Drawer = forwardRef<DrawerInstance, DrawerProps>((originalProps, ref) => {
         >
           {renderOverlay}
           <div
-            className={classnames(`${prefixCls}__content-wrapper`, `${prefixCls}__content-wrapper--${placement}`)}
+            className={classnames(`${prefixCls}__content-wrapper`, `${prefixCls}__content-wrapper--${actualPlacement}`)}
             style={{ ...contentWrapperStyle, ...draggingStyles }}
           >
             {renderCloseBtn}

package/drawer/_example/custom-header-footer.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const CustomDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        自定义头部和底部
+      </Button>
+      <Drawer
+        header={<h3 style={{ color: "var(--td-brand-color)", margin: 0 }}>自定义标题</h3>}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        confirmBtn={{ content: "保存", theme: "primary" }}
+        cancelBtn={{ content: "取消", variant: "outline" }}
+        onConfirm={() => {
+          console.log("保存");
+          setVisible(false);
+        }}
+      >
+        <p>抽屉内容区域</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default CustomDrawer;

package/drawer/_example/default.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const BaseDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        打开抽屉
+      </Button>
+      <Drawer header="基础抽屉" visible={visible} onClose={() => setVisible(false)}>
+        <p>这是抽屉内容。</p>
+        <p>点击遮罩层或右上角关闭按钮可关闭抽屉。</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default BaseDrawer;

package/drawer/_example/events.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+import type { TdDrawerProps } from "../type";
+
+const EventsDrawer = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleBeforeOpen = () => {
+    console.log("抽屉打开前");
+  };
+
+  const handleBeforeClose = () => {
+    console.log("抽屉关闭前");
+  };
+
+  const handleClose: TdDrawerProps["onClose"] = (context) => {
+    console.log("抽屉关闭，触发来源:", context.trigger);
+    setVisible(false);
+  };
+
+  const handleConfirm = () => {
+    console.log("点击确认按钮");
+    setVisible(false);
+  };
+
+  const handleCancel = () => {
+    console.log("点击取消按钮");
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        打开抽屉（查看控制台）
+      </Button>
+      <Drawer
+        header="事件回调"
+        visible={visible}
+        onBeforeOpen={handleBeforeOpen}
+        onBeforeClose={handleBeforeClose}
+        onClose={handleClose}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      >
+        <p>打开控制台查看各种事件的回调日志。</p>
+        <p>支持的事件：onBeforeOpen、onBeforeClose、onClose、onConfirm、onCancel 等</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default EventsDrawer;

package/drawer/_example/no-footer.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const NoFooterDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        无底部操作栏
+      </Button>
+      <Drawer header="无底部操作栏" footer={false} visible={visible} onClose={() => setVisible(false)}>
+        <p>这是一个没有底部操作栏的抽屉。</p>
+        <p>适合只展示内容的场景。</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default NoFooterDrawer;

package/drawer/_example/no-overlay.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const NoOverlayDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        无遮罩层抽屉
+      </Button>
+      <Drawer header="无遮罩层" showOverlay={false} visible={visible} onClose={() => setVisible(false)}>
+        <p>这是一个没有遮罩层的抽屉。</p>
+        <p>可以与页面其他内容进行交互。</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default NoOverlayDrawer;

package/drawer/_example/placement.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+import type { TdDrawerProps } from "../type";
+
+const PlacementDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  const [placement, setPlacement] = useState<TdDrawerProps["placement"]>("right");
+
+  const openDrawer = (p: TdDrawerProps["placement"]) => {
+    setPlacement(p);
+    setVisible(true);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+        <Button theme="primary" onClick={() => openDrawer("left")}>
+          从左侧打开
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("right")}>
+          从右侧打开
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("top")}>
+          从顶部打开
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("bottom")}>
+          从底部打开
+        </Button>
+      </div>
+      <Drawer
+        header={`${placement} 方向抽屉`}
+        placement={placement}
+        visible={visible}
+        onClose={() => setVisible(false)}
+      >
+        <p>这是从 {placement} 方向滑出的抽屉。</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default PlacementDrawer;

package/drawer/_example/size-draggable.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const DraggableDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button theme="primary" onClick={() => setVisible(true)}>
+        可拖拽大小的抽屉
+      </Button>
+      <Drawer
+        header="可拖拽调整大小"
+        visible={visible}
+        sizeDraggable={{ min: 200, max: 800 }}
+        onClose={() => setVisible(false)}
+      >
+        <p>拖动抽屉边缘可以调整宽度。</p>
+        <p>最小宽度: 200px</p>
+        <p>最大宽度: 800px</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default DraggableDrawer;