@tendaui/components 1.2.4 → 1.3.0

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;

package/form/_example/label-align.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Form, Input } from "@tendaui/react";
+
+const { FormItem } = Form;
+
+const LabelAlignForm = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "32px", width: 500 }}>
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>左对齐</h4>
+      <Form labelAlign="left" labelWidth={100}>
+        <FormItem label="用户名" name="username1">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password1">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>右对齐</h4>
+      <Form labelAlign="right" labelWidth={100}>
+        <FormItem label="用户名" name="username2">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password2">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>顶部对齐</h4>
+      <Form labelAlign="top">
+        <FormItem label="用户名" name="username3">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password3">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+  </div>
+);
+
+export default LabelAlignForm;

package/form/_example/methods.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Form, Input, Button, FormItem } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const FormMethodsExample = () => {
+  const [form] = Form.useForm();
+  const { success } = useNotification();
+
+  const handleValidate = async () => {
+    const result = await form.validate();
+    console.log("验证结果:", result);
+    if (result === true) {
+      success({ title: "验证通过", message: "表单验证成功" });
+    }
+  };
+
+  const handleSetFields = () => {
+    form.setFieldsValue({
+      username: "testuser",
+      email: "test@example.com"
+    });
+    success({ title: "设置成功", message: "已填充表单数据" });
+  };
+
+  const handleGetFields = () => {
+    const values = form.getFieldsValue(true);
+    console.log("当前表单值:", values);
+    success({ title: "获取成功", message: JSON.stringify(values) });
+  };
+
+  const handleReset = () => {
+    form.reset();
+    success({ title: "重置成功", message: "表单已重置" });
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} labelWidth={100} colon>
+        <FormItem label="用户名" name="username" rules={[{ required: true, message: "请输入用户名" }]}>
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="邮箱" name="email" rules={[{ email: true, message: "请输入正确的邮箱" }]}>
+          <Input placeholder="请输入邮箱" />
+        </FormItem>
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+            <Button theme="primary" onClick={handleValidate}>
+              验证表单
+            </Button>
+            <Button onClick={handleSetFields}>填充数据</Button>
+            <Button onClick={handleGetFields}>获取数据</Button>
+            <Button onClick={handleReset}>重置表单</Button>
+          </div>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <FormMethodsExample />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/_example/validation.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Form, Input, Button } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const { FormItem } = Form;
+
+const ValidationForm = () => {
+  const [form] = Form.useForm();
+  const { success, error } = useNotification();
+
+  const onSubmit = (e: any) => {
+    if (e.validateResult === true) {
+      success({ title: "验证通过", message: "表单提交成功" });
+    } else {
+      error({ title: "验证失败", message: "请检查表单输入" });
+    }
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} onSubmit={onSubmit} colon labelWidth={100}>
+        <FormItem
+          label="用户名"
+          name="username"
+          requiredMark
+          rules={[
+            { required: true, message: "请输入用户名" },
+            { min: 3, message: "用户名至少3个字符" },
+            { max: 20, message: "用户名最多20个字符" }
+          ]}
+        >
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+
+        <FormItem
+          label="邮箱"
+          name="email"
+          requiredMark
+          rules={[
+            { required: true, message: "请输入邮箱" },
+            { email: true, message: "请输入正确的邮箱格式" }
+          ]}
+        >
+          <Input placeholder="请输入邮箱" />
+        </FormItem>
+
+        <FormItem label="手机号" name="phone" rules={[{ telnumber: true, message: "请输入正确的手机号" }]}>
+          <Input placeholder="请输入手机号" />
+        </FormItem>
+
+        <FormItem label="网址" name="url" rules={[{ url: true, message: "请输入正确的网址" }]}>
+          <Input placeholder="请输入网址" />
+        </FormItem>
+
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <Button type="submit" theme="primary">
+            提交
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <ValidationForm />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/hooks/useFormItemStyle.tsx

@@ -5,7 +5,7 @@ import parseTNode from "../../utils/parseTNode";
 import { ValidateStatus } from "../const";
 
 export default function useFormItemStyle(props) {
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
 
   const {
     className,
@@ -70,13 +70,22 @@ export default function useFormItemStyle(props) {
     [`${classPrefix}-form__item-with-help`]: helpNode,
     [`${classPrefix}-form__item-with-extra`]: extraNode
   });
+  // todo form item label 也需要 RTL 处理
+  const isRtl = direction === "rtl";
+  const resolvedLabelAlign = isRtl
+    ? labelAlign === "left"
+      ? "right"
+      : labelAlign === "right"
+        ? "left"
+        : labelAlign
+    : labelAlign;
 
   const formItemLabelClass = classNames(`${classPrefix}-form__label`, {
     [`${classPrefix}-form__label--required`]: needRequiredMark,
     [`${classPrefix}-form__label--required-right`]: needRequiredMark && requiredMarkPosition === "right",
-    [`${classPrefix}-form__label--top`]: labelAlign === "top" || !labelWidth,
-    [`${classPrefix}-form__label--left`]: labelAlign === "left" && labelWidth,
-    [`${classPrefix}-form__label--right`]: labelAlign === "right" && labelWidth
+    [`${classPrefix}-form__label--top`]: resolvedLabelAlign === "top" || !labelWidth,
+    [`${classPrefix}-form__label--left`]: resolvedLabelAlign === "left" && labelWidth,
+    [`${classPrefix}-form__label--right`]: resolvedLabelAlign === "right" && labelWidth
   });
 
   const contentClass = () => {
@@ -100,15 +109,18 @@ export default function useFormItemStyle(props) {
 
   let labelStyle = {};
   let contentStyle = {};
-  if (label && labelWidth && labelAlign !== "top") {
+  if (label && labelWidth && resolvedLabelAlign !== "top") {
     if (typeof labelWidth === "number") {
       labelStyle = { width: `${labelWidth}px` };
-      contentStyle = { marginLeft: layout !== "inline" ? `${labelWidth}px` : "" };
+      contentStyle = { marginInlineStart: layout !== "inline" ? `${labelWidth}px` : "" };
     } else {
       labelStyle = { width: labelWidth };
-      contentStyle = { marginLeft: layout !== "inline" ? labelWidth : "" };
+      contentStyle = { marginInlineStart: layout !== "inline" ? labelWidth : "" };
     }
   }
+  if (isRtl && label && labelWidth && resolvedLabelAlign !== "top") {
+    labelStyle = { ...labelStyle, float: "right" };
+  }
 
   return {
     formItemClass,

package/form/index.ts

@@ -1,11 +1,29 @@
 import _Form from "./Form";
-
+import FormList from "./FormList";
+import useForm from "./hooks/useForm";
+import useWatch from "./hooks/useWatch";
+import FormItem from "./FormItem";
 import "./style/index.js";
 
 export type { FormProps } from "./Form";
 export type { FormItemProps } from "./FormItem";
 export * from "./type";
 export * from "./hooks/interface";
+export { FormItem, FormList, useForm, useWatch };
+
+// 扩展 Form 组件类型，添加静态方法
+interface FormStatic {
+  useForm: typeof useForm;
+  useWatch: typeof useWatch;
+  FormItem: typeof FormItem;
+  FormList: typeof FormList;
+}
+
+// 确保 Form 组件包含所有必要的静态属性
+export const Form = _Form as typeof _Form & FormStatic;
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+Form.FormItem = FormItem;
+Form.FormList = FormList;
 
-export const Form = _Form;
 export default Form;