@tendaui/components 1.0.0

package/form/FormList.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { flattenDeep, get, merge, set, unset } from "lodash-es";
+// import log from '@tdesign/common-js/log/index';
+import { FormListContext, useFormContext } from "./FormContext";
+import type { FormItemInstance } from "./FormItem";
+import { HOOK_MARK } from "./hooks/useForm";
+import type { FormListField, FormListFieldOperation, TdFormListProps } from "./type";
+import { calcFieldValue } from "./utils";
+
+let key = 0;
+
+const FormList: React.FC<TdFormListProps> = (props) => {
+  const {
+    formMapRef,
+    form,
+    onFormItemValueChange,
+    initialData: initialDataFromForm,
+    resetType: resetTypeFromContext
+  } = useFormContext();
+  const { name, rules, children } = props;
+
+  const initialData = props.initialData || get(initialDataFromForm, name) || [];
+
+  const [formListValue, setFormListValue] = useState(initialData);
+  const [fields, setFields] = useState<Array<FormListField>>(() =>
+    initialData.map((data, index) => ({
+      data: { ...data },
+      key: (key += 1),
+      name: index,
+      isListField: true
+    }))
+  );
+  const formListMapRef = useRef(new Map()); // 收集 formItem 实例
+  const formListRef = useRef<FormItemInstance>(null); // 当前 formList 实例
+  const fieldsTaskQueueRef = useRef([]); // 记录更改 fields 数据后 callback 队列
+  const snakeName = []
+    .concat(name)
+    .filter((item) => item !== undefined)
+    .toString(); // 转化 name
+
+  const isMounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    []
+  );
+
+  const operation: FormListFieldOperation = {
+    add(defaultValue?: unknown, insertIndex?: number) {
+      const cloneFields = [...fields];
+      const index = insertIndex ?? cloneFields.length;
+      cloneFields.splice(index, 0, {
+        key: (key += 1),
+        name: index,
+        isListField: true
+      });
+      cloneFields.forEach((field, index) => Object.assign(field, { name: index }));
+      setFields(cloneFields);
+
+      const nextFormListValue = [...formListValue];
+      if (typeof defaultValue !== "undefined") {
+        nextFormListValue[index] = defaultValue;
+        setFormListValue(nextFormListValue);
+      }
+
+      set(form?.store, flattenDeep([name, index]), nextFormListValue);
+
+      const fieldValue = calcFieldValue(name, nextFormListValue);
+      requestAnimationFrame(() => {
+        onFormItemValueChange?.({ ...fieldValue });
+      });
+    },
+    remove(index: number | number[]) {
+      const nextFields = fields
+        .filter((item) => {
+          if (Array.isArray(index)) return !index.includes(item.name);
+          return item.name !== index;
+        })
+        .map((field, i) => ({ ...field, name: i }));
+      setFields(nextFields);
+
+      const nextFormListValue = formListValue.filter((_, idx) => idx !== index);
+      setFormListValue(nextFormListValue);
+
+      unset(form?.store, flattenDeep([name, index]));
+
+      const fieldValue = calcFieldValue(name, nextFormListValue);
+      requestAnimationFrame(() => {
+        onFormItemValueChange?.({ ...fieldValue });
+      });
+    },
+    move(from: number, to: number) {
+      const cloneFields = [...fields];
+      const fromItem = { ...cloneFields[from] };
+      const toItem = { ...cloneFields[to] };
+      cloneFields[to] = fromItem;
+      cloneFields[from] = toItem;
+      set(form?.store, name, []);
+      setFields(cloneFields);
+    }
+  };
+
+  // 外部设置 fields 优先级最高，可以更改渲染的节点
+  function setListFields(fieldData: unknown[], callback: (...args: unknown[]) => unknown, originData: unknown) {
+    setFields(
+      fieldData.map((_, index) => ({
+        key: (key += 1),
+        name: index,
+        isListField: true
+      }))
+    );
+    // 添加至队列中 等待下次渲染完成执行对应逻辑
+    fieldsTaskQueueRef.current.push({ callback, fieldData, originData });
+  }
+
+  useEffect(() => {
+    if (!name || !formMapRef) return;
+    formMapRef.current.set(name, formListRef);
+
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      formMapRef.current.delete(name);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [snakeName]);
+
+  useEffect(() => {
+    [...formListMapRef.current.values()].forEach((formItemRef) => {
+      if (!formItemRef.current) return;
+      const { name, isUpdated } = formItemRef.current;
+      if (isUpdated) return; // 内部更新过值则跳过
+
+      const data = get(formListValue, name);
+      formItemRef.current.setField({ value: data, status: "not" });
+    });
+  }, [formListValue]);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    // fields 变化通知 watch 事件
+    form?.getInternalHooks?.(HOOK_MARK)?.notifyWatch?.(name);
+
+    // 等待子节点渲染完毕
+    Promise.resolve().then(() => {
+      if (!fieldsTaskQueueRef.current.length) return;
+
+      // fix multiple formlist stuck
+      const currentQueue = fieldsTaskQueueRef.current.pop();
+      const { fieldData, callback, originData } = currentQueue;
+      [...formListMapRef.current.values()].forEach((formItemRef) => {
+        if (!formItemRef.current) return;
+
+        const { name: itemName } = formItemRef.current;
+        const data = get(fieldData, itemName);
+        callback(formItemRef, data);
+      });
+
+      // formList 嵌套 formList
+      if (!formMapRef || !formMapRef.current) return;
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        if (!formItemRef.current) return;
+
+        const { name: itemName, isFormList } = formItemRef.current;
+        if (String(itemName) === String(name) || !isFormList) return;
+        const data = get(originData, itemName);
+        if (data) callback(formItemRef, data);
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form, snakeName, fields, formMapRef]);
+
+  useImperativeHandle(
+    formListRef,
+    (): FormItemInstance => ({
+      name,
+      isFormList: true,
+      getValue() {
+        const formListValue = [];
+        [...formListMapRef.current.values()].forEach((formItemRef) => {
+          if (!formItemRef.current) return;
+
+          const { name, getValue } = formItemRef.current;
+          const fieldValue = calcFieldValue(name, getValue());
+          merge(formListValue, fieldValue);
+        });
+        return formListValue;
+      },
+      validate: (trigger = "all") => {
+        const resultList = [];
+        const validates = [...formListMapRef.current.values()].map((formItemRef) =>
+          formItemRef?.current?.validate?.(trigger)
+        );
+        return new Promise((resolve) => {
+          Promise.all(validates).then((validateResult) => {
+            validateResult.forEach((result) => {
+              const errorValue = Object.values(result)[0];
+              merge(resultList, errorValue);
+            });
+            const errorItems = validateResult.filter((item) => Object.values(item)[0] !== true);
+            if (errorItems.length) {
+              resolve({ [snakeName]: resultList });
+            } else {
+              resolve({ [snakeName]: true });
+            }
+          });
+        });
+      },
+      // TODO 支持局部更新数据
+      setValue: (fieldData: unknown[], originData) => {
+        setListFields(
+          fieldData,
+          (formItemRef, data) => {
+            (formItemRef as React.RefObject<FormItemInstance>)?.current?.setValue?.(data);
+          },
+          originData
+        );
+      },
+      setField: (fieldData: { value?: unknown[]; status?: string }, originData) => {
+        const { value, status } = fieldData;
+        setListFields(
+          value,
+          (formItemRef, data) => {
+            (formItemRef as React.RefObject<FormItemInstance>)?.current?.setField?.({ value: data, status });
+          },
+          originData
+        );
+      },
+      resetField: (type: string) => {
+        const resetType = type || resetTypeFromContext;
+
+        if (resetType === "initial") {
+          setFormListValue(initialData);
+
+          const newFields = initialData.map((data, index) => ({
+            data: { ...data },
+            key: (key += 1),
+            name: index,
+            isListField: true
+          }));
+          setFields(newFields);
+          set(form?.store, flattenDeep([name]), initialData);
+
+          requestAnimationFrame(() => {
+            [...formListMapRef.current.values()].forEach((formItemRef) => {
+              if (!formItemRef.current) return;
+              const { name: itemName } = formItemRef.current;
+              const itemValue = get(initialData, itemName);
+              if (itemValue !== undefined) {
+                formItemRef.current.setField({ value: itemValue, status: "not" });
+              }
+            });
+          });
+        } else {
+          // 重置为空
+          [...formListMapRef.current.values()].forEach((formItemRef) => {
+            formItemRef?.current?.resetField?.();
+          });
+
+          fieldsTaskQueueRef.current = [];
+
+          setFormListValue([]);
+          setFields([]);
+          unset(form?.store, flattenDeep([name]));
+        }
+      },
+      setValidateMessage: (fieldData) => {
+        [...formListMapRef.current.values()].forEach((formItemRef) => {
+          if (!formItemRef.current) return;
+
+          const { name } = formItemRef.current;
+          const data = get(fieldData, name);
+
+          formItemRef?.current?.setValidateMessage?.(data);
+        });
+      },
+      resetValidate: () => {
+        [...formListMapRef.current.values()].forEach((formItemRef) => {
+          formItemRef?.current?.resetValidate?.();
+        });
+      }
+    })
+  );
+
+  if (typeof children !== "function") {
+    console.error("Form", `FormList's children must be a function!`);
+    return null;
+  }
+
+  return (
+    <FormListContext.Provider value={{ name, rules, formListMapRef, initialData, form }}>
+      {children(fields, operation)}
+    </FormListContext.Provider>
+  );
+};
+
+FormList.displayName = "FormList";
+
+export default FormList;

package/form/const.ts

@@ -0,0 +1,6 @@
+export const enum ValidateStatus {
+  SUCCESS = "success",
+  WARNING = "warning",
+  ERROR = "error",
+  VALIDATING = "validating"
+}

package/form/defaultProps.ts

@@ -0,0 +1,26 @@
+import { TdFormProps, TdFormItemProps } from "./type";
+
+export const formDefaultProps: TdFormProps = {
+  colon: false,
+  disabled: undefined,
+  id: undefined,
+  labelAlign: "right",
+  labelWidth: "100px",
+  layout: "vertical",
+  preventSubmitDefault: true,
+  requiredMark: undefined,
+  resetType: "empty",
+  showErrorMessage: true,
+  statusIcon: undefined,
+  submitWithWarningMessage: false,
+  supportNumberKey: true
+};
+
+export const formItemDefaultProps: TdFormItemProps = {
+  label: "",
+  requiredMark: undefined,
+  shouldUpdate: false,
+  showErrorMessage: undefined,
+  statusIcon: undefined,
+  successBorder: false
+};

package/form/formModel.ts

@@ -0,0 +1,117 @@
+// https://github.com/validatorjs/validator.js
+
+import isDate from "validator/lib/isDate";
+import isEmail from "validator/lib/isEmail";
+import { isEmpty, isNumber } from "lodash-es";
+import isURL from "validator/lib/isURL";
+import { getCharacterLength } from "../utils/helper";
+import {
+  CustomValidator,
+  FormRule,
+  ValueType,
+  AllValidateResult,
+  ValidateResultType,
+  CustomValidateResolveType
+} from "./type";
+
+// `{} / [] / '' / undefined / null` 等内容被认为是空； 0 和 false 被认为是正常数据，部分数据的值就是 0 或者 false
+export function isValueEmpty(val: ValueType): boolean {
+  const type: string = Object.prototype.toString.call(val);
+  const typeMap: Record<string, string> = {
+    Date: "[object Date]"
+  };
+  if (type === typeMap.Date) {
+    return false;
+  }
+  return typeof val === "object" ? isEmpty(val) : ["", undefined, null].includes(val);
+}
+
+// 比较值大小
+const compareValue: (val: ValueType, num: number, isMax: boolean) => boolean = (val, num, isMax) => {
+  const compare: (a: number, b: number) => boolean = (a, b) => (isMax ? a <= b : a >= b);
+  if (isNumber(val)) return compare(val, num);
+  if (Array.isArray(val)) return compare(val.length, num);
+  const charLength = getCharacterLength(val);
+  return compare(typeof charLength === "number" ? charLength : charLength.length, num);
+};
+
+const VALIDATE_MAP = {
+  date: isDate,
+  url: isURL,
+  email: isEmail,
+  required: (val: ValueType): boolean => !isValueEmpty(val),
+  whitespace: (val: ValueType): boolean => !(/^\s+$/.test(val) || val === ""),
+  boolean: (val: ValueType): boolean => typeof val === "boolean",
+  max: (val: ValueType, num: number): boolean => compareValue(val, num, true),
+  min: (val: ValueType, num: number): boolean => compareValue(val, num, false),
+  len: (val: ValueType, num: number): boolean => getCharacterLength(val) === num,
+  number: (val: ValueType): boolean => isNumber(val),
+  enum: (val: ValueType, strs: Array<string>): boolean => strs.includes(val),
+  idcard: (val: ValueType): boolean => /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/i.test(val),
+  telnumber: (val: ValueType): boolean => /^1[3-9]\d{9}$/.test(val),
+  pattern: (val: ValueType, regexp: RegExp): boolean => regexp.test(val),
+  // 自定义校验规则，可能是异步校验
+  validator: (val: ValueType, validate: CustomValidator): ReturnType<CustomValidator> => validate(val)
+};
+
+export type ValidateFuncType = (typeof VALIDATE_MAP)[keyof typeof VALIDATE_MAP];
+
+/**
+ * 校验某一条数据的某一条规则，一种校验规则不满足则不再进行校验。
+ * @param value 值
+ * @param rule 校验规则
+ * @returns 两种校验结果，一种是内置校验规则的校验结果，二种是自定义校验规则（validator）的校验结果
+ */
+export async function validateOneRule(value: ValueType, rule: FormRule): Promise<AllValidateResult> {
+  let validateResult: CustomValidateResolveType | ValidateResultType = {
+    result: true
+  };
+  const keys = Object.keys(rule);
+  let vOptions;
+  let vValidateFun: ValidateFuncType;
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    // 非必填选项，值为空，非自定义规则：无需校验，直接返回 true
+    if (!rule.required && isValueEmpty(value) && !rule.validator) {
+      return validateResult;
+    }
+    const validateRule: ValidateFuncType = VALIDATE_MAP[key];
+    // 找到一个校验规则，则无需再找，因为参数只允许对一个规则进行校验
+    if (validateRule && ![undefined, null].includes(rule[key])) {
+      // rule 值为 true 则表示没有校验参数，只是对值进行默认规则校验
+      vOptions = rule[key] === true ? undefined : rule[key];
+      vValidateFun = validateRule;
+      break;
+    }
+  }
+  if (vValidateFun) {
+    validateResult = await vValidateFun(value, vOptions);
+    // 如果校验不通过，则返回校验不通过的规则
+    if (typeof validateResult === "boolean") {
+      return { ...rule, result: validateResult };
+    }
+    // 校验结果为 CustomValidateObj，只有自定义校验规则会存在这种情况
+    if (typeof validateResult === "object") {
+      return validateResult;
+    }
+  }
+  return validateResult;
+}
+
+// 单个数据进行全规则校验，校验成功也可能会有 message
+export async function validate(value: ValueType, rules: Array<FormRule>): Promise<AllValidateResult[]> {
+  const all = rules.map((rule) => validateOneRule(value, rule));
+  const r = await Promise.all(all);
+  return r;
+}
+
+/**
+ * Replace with template.
+ * `${name} is wrong` + { name: 'password' } = password is wrong
+ */
+export function parseMessage(template: string, options: Record<string, string>): string {
+  return template.replace(/\$\{\w+\}/g, (str: string) => {
+    const key = str.slice(2, -1);
+    return options[key];
+  });
+}

package/form/hooks/interface.ts

@@ -0,0 +1,20 @@
+import type { NamePath, FormInstanceFunctions } from "../type";
+
+export type Store = Record<string, unknown>;
+
+export type WatchCallBack = (values: Store, namePathList: NamePath) => void;
+
+export interface InternalHooks {
+  notifyWatch: (name: NamePath) => void;
+  registerWatch: (callback: WatchCallBack) => () => void;
+  getPrevStore: () => Store;
+  setPrevStore: (store: Store) => void;
+  flashQueue: () => void;
+  setForm: (form: FormInstanceFunctions) => void;
+}
+
+export interface InternalFormInstance extends FormInstanceFunctions {
+  _init?: boolean;
+  store?: Store;
+  getInternalHooks?: (secret: string) => InternalHooks | null;
+}

package/form/hooks/useForm.ts

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import type { NamePath } from "../type";
+import type { WatchCallBack, InternalHooks, InternalFormInstance, Store } from "./interface";
+
+export const HOOK_MARK = "TD_FORM_INTERNAL_HOOKS";
+
+class FormStore {
+  private prevStore: Store = {};
+
+  private store: Store = {};
+
+  private forceRootUpdate: () => void;
+
+  constructor(forceReRender) {
+    this.forceRootUpdate = forceReRender;
+  }
+
+  public taskQueue: { name: string; args: unknown[] }[] = [];
+
+  public flashQueue = () => {
+    this.taskQueue.forEach((task) => {
+      this[task.name].apply(this, [...task.args]);
+    });
+    this.taskQueue = [];
+  };
+
+  public getForm = (): InternalFormInstance => ({
+    submit: (...args) => {
+      this.taskQueue.push({ args, name: "submit" });
+    },
+    reset: (...args) => {
+      this.taskQueue.push({ args, name: "reset" });
+    },
+    validate: null,
+    validateOnly: null,
+    clearValidate: (...args) => {
+      this.taskQueue.push({ args, name: "clearValidate" });
+    },
+    setFields: (...args) => {
+      this.taskQueue.push({ args, name: "setFields" });
+    },
+    setFieldsValue: (...args) => {
+      this.taskQueue.push({ args, name: "setFieldsValue" });
+    },
+    setValidateMessage: (...args) => {
+      this.taskQueue.push({ args, name: "setValidateMessage" });
+    },
+    getValidateMessage: (...args) => {
+      this.taskQueue.push({ args, name: "getValidateMessage" });
+    },
+    getFieldValue: null,
+    getFieldsValue: null,
+    _init: true,
+    store: this.store,
+    getInternalHooks: this.getInternalHooks
+  });
+
+  private getInternalHooks = (key: string): InternalHooks | null => {
+    if (key === HOOK_MARK) {
+      return {
+        setForm: (formInstance) => {
+          Object.keys(formInstance).forEach((key) => {
+            this[key] = formInstance[key];
+          });
+        },
+        flashQueue: this.flashQueue,
+        notifyWatch: this.notifyWatch,
+        registerWatch: this.registerWatch,
+        getPrevStore: () => this.prevStore,
+        setPrevStore: (store: Store) => {
+          this.prevStore = store;
+        }
+      };
+    }
+
+    console.warn("Form", "`getInternalHooks` is internal usage. Should not call directly.");
+    return null;
+  };
+
+  private watchList: WatchCallBack[] = [];
+
+  private registerWatch: InternalHooks["registerWatch"] = (callback) => {
+    this.watchList.push(callback);
+
+    return () => {
+      this.watchList = this.watchList.filter((fn) => fn !== callback);
+    };
+  };
+
+  private notifyWatch = (namePath: NamePath = []) => {
+    // No need to cost perf when nothing need to watch
+    if (this.watchList.length) {
+      // @ts-expect-error Internal API access
+      const values = this.getFieldsValue?.([namePath]);
+
+      this.watchList.forEach((callback) => {
+        callback(values, namePath);
+      });
+    }
+  };
+}
+
+export default function useForm(form?: InternalFormInstance) {
+  const [formInstance, setFormInstance] = useState<InternalFormInstance>(() => {
+    if (form) {
+      return form;
+    }
+    // Create a new FormStore if not provided
+    const forceReRender = () => {
+      // This will trigger a re-render
+    };
+    const formStore: FormStore = new FormStore(forceReRender);
+    return formStore.getForm();
+  });
+
+  // Update form instance when form prop changes
+  if (form && formInstance !== form) {
+    setFormInstance(form);
+  }
+
+  return [formInstance];
+}

package/form/hooks/useFormItemInitialData.ts

@@ -0,0 +1,95 @@
+import React from "react";
+import { get, unset, isEmpty } from "lodash-es";
+
+// 兼容特殊数据结构和受控 key
+// import Tree from '../../tree/Tree';
+// import Upload from '../../upload/upload';
+// import CheckTag from '../../tag/CheckTag';
+import Checkbox from "../../checkbox/Checkbox";
+import TagInput from "../../tag-input/TagInput";
+// import RangeInput from '../../range-input/RangeInput';
+// import Transfer from '../../transfer/Transfer';
+import CheckboxGroup from "../../checkbox/CheckboxGroup";
+// import DateRangePicker from '../../date-picker/DateRangePicker';
+// import TimeRangePicker from '../../time-picker/TimeRangePicker';
+
+import { useFormContext, useFormListContext } from "../FormContext";
+import { FormItemProps } from "../FormItem";
+
+// FormItem 子组件受控 key
+export const ctrlKeyMap = new Map();
+ctrlKeyMap.set(Checkbox, "checked");
+// ctrlKeyMap.set(CheckTag, 'checked');
+// ctrlKeyMap.set(Upload, 'files');
+
+// FormItem 默认数据类型
+export const initialDataMap = new Map();
+[
+  // Tree,
+  // Upload,
+  // Transfer,
+  TagInput,
+  // RangeInput,
+  CheckboxGroup
+  // DateRangePicker,
+  // TimeRangePicker,
+].forEach((component) => {
+  initialDataMap.set(component, []);
+});
+[Checkbox].forEach((component) => {
+  initialDataMap.set(component, false);
+});
+
+export default function useFormItemInitialData(name: FormItemProps["name"]) {
+  const { floatingFormDataRef, initialData: formContextInitialData } = useFormContext();
+
+  const { name: formListName, initialData: formListInitialData } = useFormListContext();
+
+  // 整理初始值 优先级：Form.initialData < FormList.initialData < FormItem.initialData < floatFormData
+  function getDefaultInitialData({
+    children,
+    initialData
+  }: {
+    children: FormItemProps["children"];
+    initialData: FormItemProps["initialData"];
+  }) {
+    if (name && floatingFormDataRef?.current && !isEmpty(floatingFormDataRef.current)) {
+      const nameList = formListName ? [formListName, name].flat() : name;
+      const defaultInitialData = get(floatingFormDataRef.current, nameList);
+      if (typeof defaultInitialData !== "undefined") {
+        // 使用 setTimeout 来延迟清理，避免在渲染期间修改 ref
+        setTimeout(() => {
+          unset(floatingFormDataRef.current, nameList);
+        }, 0);
+        return defaultInitialData;
+      }
+    }
+
+    if (typeof initialData !== "undefined") {
+      return initialData;
+    }
+
+    if (name && formListInitialData.length) {
+      const defaultInitialData = get(formListInitialData, name);
+      if (typeof defaultInitialData !== "undefined") return defaultInitialData;
+    }
+
+    if (name && formContextInitialData) {
+      const defaultInitialData = get(formContextInitialData, name);
+      if (typeof defaultInitialData !== "undefined") return defaultInitialData;
+    }
+
+    if (typeof children !== "function") {
+      const childList = React.Children.toArray(children);
+      const lastChild = childList[childList.length - 1];
+      if (lastChild && React.isValidElement(lastChild)) {
+        const isMultiple = lastChild?.props?.multiple;
+        return isMultiple ? [] : initialDataMap.get(lastChild.type);
+      }
+    }
+  }
+
+  return {
+    getDefaultInitialData
+  };
+}