@tendaui/components 1.2.4 → 1.3.1

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/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;

package/drawer/_example/size.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import Drawer from "../index";
+import { Button } from "../../button";
+
+const SizeDrawer = () => {
+  const [visible, setVisible] = useState(false);
+  const [size, setSize] = useState("small");
+
+  const openDrawer = (s: string) => {
+    setSize(s);
+    setVisible(true);
+  };
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+        <Button theme="primary" onClick={() => openDrawer("small")}>
+          小尺寸
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("medium")}>
+          中尺寸
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("large")}>
+          大尺寸
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("60%")}>
+          60% 宽度
+        </Button>
+        <Button theme="primary" onClick={() => openDrawer("500px")}>
+          500px 宽度
+        </Button>
+      </div>
+      <Drawer header={`尺寸: ${size}`} size={size} visible={visible} onClose={() => setVisible(false)}>
+        <p>当前抽屉尺寸: {size}</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default SizeDrawer;

package/drawer/defaultProps.ts

@@ -13,7 +13,7 @@ export const drawerDefaultProps: TdDrawerProps = {
   preventScrollThrough: true,
   showInAttachedElement: false,
   showOverlay: true,
-  size: undefined,
+  size: "medium",
   sizeDraggable: false,
   visible: false
 };

package/fireworks/Fireworks.tsx

@@ -1,12 +1,4 @@
-import React, {
-  CSSProperties,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import React, { CSSProperties, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 
 import useConfig from "../hooks/useConfig";
@@ -135,4 +127,3 @@ const Fireworks = forwardRef<HTMLDivElement, FireworksProps>((props, ref) => {
 Fireworks.displayName = "Fireworks";
 
 export default Fireworks;
-

package/fireworks/index.ts

@@ -7,4 +7,3 @@ export * from "./type";
 
 export const Fireworks = _Fireworks;
 export default Fireworks;
-

package/fireworks/type.ts

@@ -69,4 +69,3 @@ export interface TdFireworksProps {
    */
   onLaunch?: (context: FireworksLaunchContext) => void;
 }
-

package/form/_example/complex.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Form, Input, Switch, Checkbox, Button, Select, Radio, FormItem } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const { useForm } = Form;
+const {} = Form;
+const ComplexFormExample = () => {
+  const [form] = useForm();
+  const { success } = useNotification();
+
+  const onSubmit = (e: any) => {
+    if (e.validateResult === true) {
+      success({ title: "成功", message: "表单提交成功" });
+      console.log("表单数据:", e.fields);
+    }
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} onSubmit={onSubmit} labelWidth={100}>
+        <FormItem label="姓名" name="name" requiredMark rules={[{ required: true, message: "请输入姓名" }]}>
+          <Input placeholder="请输入姓名" />
+        </FormItem>
+
+        <FormItem label="性别" name="gender">
+          <Radio.Group>
+            <Radio value="male">男</Radio>
+            <Radio value="female">女</Radio>
+          </Radio.Group>
+        </FormItem>
+
+        <FormItem label="城市" name="city">
+          <Select
+            placeholder="请选择城市"
+            options={[
+              { label: "北京", value: "beijing" },
+              { label: "上海", value: "shanghai" },
+              { label: "广州", value: "guangzhou" },
+              { label: "深圳", value: "shenzhen" }
+            ]}
+          />
+        </FormItem>
+
+        <FormItem label="爱好" name="hobbies">
+          <Checkbox.Group>
+            <Checkbox value="reading">阅读</Checkbox>
+            <Checkbox value="music">音乐</Checkbox>
+            <Checkbox value="sports">运动</Checkbox>
+            <Checkbox value="travel">旅游</Checkbox>
+          </Checkbox.Group>
+        </FormItem>
+
+        <FormItem label="订阅通知" name="subscribe">
+          <Switch />
+        </FormItem>
+
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <div style={{ display: "flex", gap: "8px" }}>
+            <Button type="submit" theme="primary">
+              提交
+            </Button>
+            <Button type="reset">重置</Button>
+          </div>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <ComplexFormExample />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/_example/default.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Form, Input, Switch, InputNumber, Button, FormItem } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const BaseForm = () => {
+  const [form] = Form.useForm();
+  const { success } = useNotification();
+
+  const onSubmit = (e: any) => {
+    if (e.validateResult === true) {
+      success({ title: "成功提示", message: "提交成功" });
+      console.log("表单数据:", e.fields);
+    }
+  };
+
+  const onReset = () => {
+    success({ title: "成功提示", message: "重置成功" });
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} onSubmit={onSubmit} onReset={onReset} colon labelWidth={100}>
+        <FormItem label="姓名" name="name" requiredMark rules={[{ required: true, message: "请输入姓名" }]}>
+          <Input placeholder="请输入姓名" />
+        </FormItem>
+
+        <FormItem label="邮箱" name="email" rules={[{ email: true, message: "请输入正确的邮箱" }]}>
+          <Input placeholder="请输入邮箱" />
+        </FormItem>
+
+        <FormItem label="年龄" name="age">
+          <InputNumber placeholder="请输入年龄" min={1} max={120} />
+        </FormItem>
+
+        <FormItem label="是否启用" name="enabled">
+          <Switch />
+        </FormItem>
+
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <div style={{ display: "flex", gap: "8px" }}>
+            <Button type="submit" theme="primary">
+              提交
+            </Button>
+            <Button type="reset">重置</Button>
+          </div>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <BaseForm />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/_example/disabled.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Form, Input, Switch, Select, FormItem } from "@tendaui/react";
+
+const DisabledForm = () => (
+  <div style={{ width: 500 }}>
+    <Form disabled labelWidth={100} colon>
+      <FormItem label="用户名" name="username">
+        <Input placeholder="请输入用户名" defaultValue="admin" />
+      </FormItem>
+      <FormItem label="角色" name="role">
+        <Select
+          defaultValue="admin"
+          options={[
+            { label: "管理员", value: "admin" },
+            { label: "用户", value: "user" }
+          ]}
+        />
+      </FormItem>
+      <FormItem label="启用" name="enabled">
+        <Switch defaultValue={true} />
+      </FormItem>
+    </Form>
+  </div>
+);
+
+export default DisabledForm;

package/form/_example/form-list.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Form, Input, Button, Select, FormItem, FormList } from "@tendaui/react";
+
+const FormListExample = () => {
+  const [form] = Form.useForm();
+
+  const onSubmit = () => {
+    const allFields = form.getFieldsValue(true);
+    console.log("表单数据:", allFields);
+  };
+
+  const cityOptions = [
+    { label: "北京", value: "bj" },
+    { label: "上海", value: "sh" },
+    { label: "广州", value: "gz" },
+    { label: "深圳", value: "sz" }
+  ];
+
+  return (
+    <Form
+      form={form}
+      colon
+      onSubmit={onSubmit}
+      labelWidth={100}
+      initialData={{
+        address: [
+          { city: "bj", area: "海淀" },
+          { city: "sh", area: "浦东" }
+        ]
+      }}
+    >
+      <FormList name="address">
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map(({ key, name, ...restField }, index) => (
+              <FormItem key={key} label={`地址 ${index + 1}`}>
+                <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+                  <FormItem
+                    name={[name, "city"]}
+                    rules={[{ required: true, message: "请选择城市" }]}
+                    {...restField}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Select options={cityOptions} placeholder="选择城市" style={{ width: "120px" }} />
+                  </FormItem>
+                  <FormItem name={[name, "area"]} {...restField} style={{ marginBottom: 0 }}>
+                    <Input placeholder="详细地址" style={{ width: "200px" }} />
+                  </FormItem>
+                  {fields.length > 1 && (
+                    <Button variant="text" theme="danger" onClick={() => remove(index)}>
+                      删除
+                    </Button>
+                  )}
+                </div>
+              </FormItem>
+            ))}
+            <FormItem style={{ marginLeft: 100 }}>
+              <Button variant="dashed" onClick={() => add({ city: "", area: "" })}>
+                + 添加地址
+              </Button>
+            </FormItem>
+          </>
+        )}
+      </FormList>
+      <FormItem style={{ marginLeft: 100 }}>
+        <Button type="submit" theme="primary">
+          提交
+        </Button>
+      </FormItem>
+    </Form>
+  );
+};
+
+export default FormListExample;

package/form/_example/inline-layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Form, Input, Button, FormItem } from "@tendaui/react";
+
+const InlineLayoutForm = () => (
+  <Form layout="inline" labelWidth={60}>
+    <FormItem label="用户名" name="username">
+      <Input placeholder="用户名" style={{ width: "150px" }} />
+    </FormItem>
+    <FormItem label="密码" name="password">
+      <Input type="password" placeholder="密码" style={{ width: "150px" }} />
+    </FormItem>
+    <FormItem>
+      <Button theme="primary" type="submit">
+        登录
+      </Button>
+    </FormItem>
+  </Form>
+);
+
+export default InlineLayoutForm;