@tendaui/components 1.0.0

package/dialog/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/dialog/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/dialog/_index.scss";

package/dialog/type.ts

@@ -0,0 +1,241 @@
+import { KeyboardEvent, MouseEvent } from "react";
+import { ButtonProps } from "../button";
+import { AttachNode, Styles, TNode } from "../common";
+
+export interface TdDialogProps {
+  /**
+   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   */
+  attach?: AttachNode;
+  /**
+   * 对话框内容
+   */
+  body?: TNode;
+  /**
+   * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件
+   */
+  cancelBtn?: ButtonProps | TNode | null;
+  /**
+   * 对话框内容，同 body
+   */
+  children?: TNode;
+  /**
+   * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例
+   * @default true
+   */
+  closeBtn?: TNode;
+  /**
+   * 按下 ESC 时是否触发对话框关闭事件
+   */
+  closeOnEscKeydown?: boolean;
+  /**
+   * 点击蒙层时是否触发关闭事件
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件
+   */
+  confirmBtn?: ButtonProps | TNode | null;
+  /**
+   * 确认按钮加载状态
+   */
+  confirmLoading?: boolean;
+  /**
+   * 是否在按下回车键时，触发确认事件
+   */
+  confirmOnEnter?: boolean;
+  /**
+   * 是否在关闭弹框的时候销毁子元素
+   * @default false
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 弹框元素类名，示例：'t-class-dialog-first t-class-dialog-second'
+   * @default ''
+   */
+  dialogClassName?: string;
+  /**
+   * 对话框是否可以拖拽（仅在非模态对话框时有效）
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容
+   * @default true
+   */
+  footer?: TNode;
+  /**
+   * 是否强制渲染 Dialog，请使用 lazy 代替
+   * @default false
+   * @deprecated
+   */
+  forceRender?: boolean;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容
+   * @default true
+   */
+  header?: TNode;
+  /**
+   * 是否启用对话框懒加载，启用时对话框内的内容不渲染
+   * @default true
+   */
+  lazy?: boolean;
+  /**
+   * 对话框类型，有 3 种：模态对话框、非模态对话框、全屏对话框。弹出「模态对话框」时，只能操作对话框里面的内容，不能操作其他内容。弹出「非模态对话框」时，则可以操作页面内所有内容。「普通对话框」是指没有脱离文档流的对话框，可以在这个基础上开发更多的插件
+   * @default modal
+   */
+  mode?: "modal" | "modeless" | "full-screen";
+  /**
+   * 对话框位置，内置两种：垂直水平居中显示 和 靠近顶部（top:20%）显示。默认情况，为避免贴顶或贴底，顶部和底部距离最小为 `48px`，可通过调整 `top` 覆盖默认大小
+   * @default top
+   */
+  placement?: "top" | "center";
+  /**
+   * 防止滚动穿透
+   * @default true
+   */
+  preventScrollThrough?: boolean;
+  /**
+   * 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+   * @default false
+   */
+  showInAttachedElement?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 对话框风格
+   * @default default
+   */
+  theme?: "default" | "info" | "warning" | "danger" | "success";
+  /**
+   * 用于弹框具体窗口顶部的距离，优先级大于 placement
+   */
+  top?: string | number;
+  /**
+   * 控制对话框是否显示
+   */
+  visible?: boolean;
+  /**
+   * 对话框宽度，示例：320, '500px', '80%'
+   */
+  width?: string | number;
+  /**
+   * 对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500
+   */
+  zIndex?: number;
+  /**
+   * 对话框执行消失动画效果前触发
+   */
+  onBeforeClose?: () => void;
+  /**
+   * 对话框执行弹出动画效果前触发
+   */
+  onBeforeOpen?: () => void;
+  /**
+   * 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
+   */
+  onCancel?: (context: { e: MouseEvent<HTMLButtonElement> }) => void;
+  /**
+   * 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发
+   */
+  onClose?: (context: DialogCloseContext) => void;
+  /**
+   * 点击右上角关闭按钮时触发
+   */
+  onCloseBtnClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 对话框消失动画效果结束后触发
+   */
+  onClosed?: () => void;
+  /**
+   * 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发
+   */
+  onConfirm?: (context: { e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 按下 ESC 时触发事件
+   */
+  onEscKeydown?: (context: { e: KeyboardEvent<HTMLDivElement> }) => void;
+  /**
+   * 对话框弹出动画效果结束后触发
+   */
+  onOpened?: () => void;
+  /**
+   * 如果蒙层存在，点击蒙层时触发
+   */
+  onOverlayClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+}
+
+export interface TdDialogCardProps
+  extends Pick<
+    TdDialogProps,
+    | "body"
+    | "cancelBtn"
+    | "closeBtn"
+    | "confirmBtn"
+    | "footer"
+    | "header"
+    | "theme"
+    | "onCancel"
+    | "onCloseBtnClick"
+    | "onConfirm"
+    | "confirmLoading"
+  > {
+  // Additional properties specific to DialogCard can be added here
+  [key: string]: unknown;
+}
+
+export interface DialogOptions extends Omit<TdDialogProps, "attach"> {
+  /**
+   * 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body
+   * @default 'body'
+   */
+  attach?: AttachNode;
+  /**
+   * 弹框类名，示例：'t-class-dialog-first t-class-dialog-second'
+   * @default ''
+   */
+  className?: string;
+  /**
+   * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
+   */
+  style?: Styles;
+}
+
+export interface DialogInstance {
+  /**
+   * 销毁弹框
+   */
+  destroy: () => void;
+  /**
+   * 隐藏弹框
+   */
+  hide: () => void;
+  /**
+   * 设置确认按钮加载状态
+   */
+  setConfirmLoading: (loading: boolean) => void;
+  /**
+   * 显示弹框
+   */
+  show: () => void;
+  /**
+   * 更新弹框内容
+   */
+  update: (props: DialogOptions) => void;
+}
+
+export type DialogEventSource = "esc" | "close-btn" | "cancel" | "overlay";
+
+export interface DialogCloseContext {
+  trigger: DialogEventSource;
+  e: MouseEvent<HTMLElement> | KeyboardEvent;
+}
+
+export type DialogMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogConfirmMethod = (options?: DialogOptions) => DialogInstance;
+
+export type DialogAlertMethod = (options?: Omit<DialogOptions, "cancelBtn">) => DialogInstance;

package/dialog/utils.ts

@@ -0,0 +1,4 @@
+export function parseValueToPx(value: number | string) {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}

package/form/Form.tsx

@@ -0,0 +1,136 @@
+import React, { useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import noop from "../utils/noop";
+import forwardRefWithStatics from "../utils/forwardRefWithStatics";
+import type { FormInstanceFunctions, TdFormProps } from "./type";
+import useInstance from "./hooks/useInstance";
+import useForm, { HOOK_MARK } from "./hooks/useForm";
+import useWatch from "./hooks/useWatch";
+import { StyledProps } from "../common";
+// 表单上下文对象 FormList上下文对象
+import FormContext from "./FormContext";
+import FormItem from "./FormItem";
+import FormList from "./FormList";
+import { formDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface FormProps extends TdFormProps, StyledProps {
+  children?: React.ReactNode;
+}
+
+const Form = forwardRefWithStatics<FormProps, FormInstanceFunctions>(
+  (originalProps: FormProps, ref) => {
+    const { classPrefix, form: globalFormConfig } = useConfig();
+    const props = useDefaultProps<FormProps>(originalProps, formDefaultProps);
+    const {
+      style,
+      className,
+      labelWidth,
+      statusIcon,
+      labelAlign,
+      layout,
+      colon,
+      initialData,
+      requiredMark = globalFormConfig.requiredMark,
+      requiredMarkPosition = globalFormConfig.requiredMarkPosition,
+      scrollToFirstError,
+      showErrorMessage,
+      resetType,
+      rules,
+      errorMessage = globalFormConfig.errorMessage,
+      preventSubmitDefault,
+      disabled,
+      children,
+      id,
+      onReset,
+      onValuesChange = noop
+    } = props;
+
+    const formClass = classNames(`${classPrefix}-form`, className, {
+      [`${classPrefix}-form-inline`]: layout === "inline"
+    });
+
+    const [form] = useForm(props.form); // 内部与外部共享 form 实例，外部不传则内部创建
+    const formRef = useRef<HTMLFormElement>(null);
+    const formMapRef = useRef(new Map()); // 收集所有包含 name 属性 formItem 实例
+    const floatingFormDataRef = useRef({}); // 储存游离值的 formData
+    const formInstance = useInstance(props, formRef, formMapRef, floatingFormDataRef);
+
+    const exposedFormInstance = formInstance as unknown as FormInstanceFunctions;
+
+    useImperativeHandle(ref, () => exposedFormInstance);
+    Object.assign(form, { ...exposedFormInstance });
+    form?.getInternalHooks?.(HOOK_MARK)?.setForm?.(exposedFormInstance);
+
+    // form 初始化后清空队列
+    React.useEffect(() => {
+      form?.getInternalHooks?.(HOOK_MARK)?.flashQueue?.();
+    }, [form]);
+
+    function onResetHandler(e: React.FormEvent<HTMLFormElement>) {
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        formItemRef?.current.resetField();
+      });
+      form?.getInternalHooks?.(HOOK_MARK)?.notifyWatch?.([]);
+      form.store = {};
+      onReset?.({ e });
+    }
+
+    function onFormItemValueChange(changedValue: Record<string, unknown>) {
+      const allFields = formInstance.getFieldsValue(true);
+      onValuesChange(changedValue, allFields);
+    }
+
+    function onKeyDownHandler(e: React.KeyboardEvent<HTMLFormElement>) {
+      // 禁用 input 输入框回车自动提交 form
+      if ((e.target as Element).tagName.toLowerCase() !== "input") return;
+      if (preventSubmitDefault && e.key === "Enter") {
+        e.preventDefault?.();
+        e.stopPropagation?.();
+      }
+    }
+
+    return (
+      <FormContext.Provider
+        value={{
+          form,
+          labelWidth,
+          statusIcon,
+          labelAlign,
+          layout,
+          colon,
+          initialData,
+          requiredMark,
+          requiredMarkPosition,
+          errorMessage,
+          showErrorMessage,
+          scrollToFirstError,
+          resetType,
+          rules,
+          disabled,
+          formMapRef,
+          floatingFormDataRef,
+          onFormItemValueChange
+        }}
+      >
+        <form
+          ref={formRef}
+          id={id}
+          style={style}
+          className={formClass}
+          onSubmit={formInstance.submit}
+          onReset={onResetHandler}
+          onKeyDown={onKeyDownHandler}
+        >
+          {children}
+        </form>
+      </FormContext.Provider>
+    );
+  },
+  { useForm, useWatch, FormItem, FormList }
+);
+
+Form.displayName = "Form";
+
+export default Form;

package/form/FormContext.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { TdFormProps, TdFormListProps, NamePath } from "./type";
+import { FormItemInstance } from "./FormItem";
+import { InternalFormInstance } from "./hooks/interface";
+
+const FormContext = React.createContext<{
+  form?: InternalFormInstance;
+  labelWidth?: TdFormProps["labelWidth"];
+  statusIcon?: TdFormProps["statusIcon"];
+  labelAlign: TdFormProps["labelAlign"];
+  layout: TdFormProps["layout"];
+  colon: TdFormProps["colon"];
+  initialData: TdFormProps["initialData"];
+  requiredMark: TdFormProps["requiredMark"];
+  requiredMarkPosition: TdFormProps["requiredMarkPosition"];
+  scrollToFirstError: TdFormProps["scrollToFirstError"];
+  showErrorMessage: TdFormProps["showErrorMessage"];
+  resetType: TdFormProps["resetType"];
+  disabled: TdFormProps["disabled"];
+  rules: TdFormProps["rules"];
+  errorMessage: TdFormProps["errorMessage"];
+  formMapRef: React.RefObject<Map<NamePath, React.RefObject<FormItemInstance>>>;
+  floatingFormDataRef: React.RefObject<Record<string, unknown>>;
+  onFormItemValueChange: (changedValue: Record<string, unknown>) => void;
+}>({
+  form: undefined,
+  labelWidth: "100px",
+  labelAlign: "right",
+  layout: "vertical",
+  colon: false,
+  initialData: {},
+  requiredMark: undefined,
+  requiredMarkPosition: undefined,
+  scrollToFirstError: undefined,
+  showErrorMessage: undefined,
+  resetType: "empty",
+  disabled: undefined,
+  rules: undefined,
+  errorMessage: undefined,
+  statusIcon: undefined,
+  onFormItemValueChange: undefined,
+  formMapRef: undefined,
+  floatingFormDataRef: undefined
+});
+
+export const useFormContext = () => React.useContext(FormContext);
+
+export default FormContext;
+
+export const FormListContext = React.createContext<{
+  name: NamePath;
+  rules: TdFormListProps["rules"];
+  formListMapRef: React.RefObject<Map<NamePath, React.RefObject<FormItemInstance>>>;
+  initialData: TdFormListProps["initialData"];
+  form?: InternalFormInstance;
+}>({
+  name: undefined,
+  rules: undefined,
+  formListMapRef: undefined,
+  initialData: [],
+  form: undefined
+});
+
+export const useFormListContext = () => React.useContext(FormListContext);