@tendaui/components 1.0.0

package/form/hooks/useFormItemStyle.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from "react";
+import classNames from "classnames";
+import useConfig from "../../hooks/useConfig";
+import parseTNode from "../../utils/parseTNode";
+import { ValidateStatus } from "../const";
+
+export default function useFormItemStyle(props) {
+  const { classPrefix } = useConfig();
+
+  const {
+    className,
+    help,
+    tips,
+    snakeName,
+    status,
+    successBorder,
+    errorList,
+    successList,
+    layout,
+    verifyStatus,
+    label,
+    labelWidth,
+    labelAlign,
+    requiredMark,
+    requiredMarkPosition,
+    showErrorMessage,
+    innerRules
+  } = props;
+
+  // 传入 status 时受控
+  const renderStatus = status || verifyStatus;
+
+  // help 文本
+  const helpNode = help && <div className={`${classPrefix}-input__help`}>{parseTNode(help)}</div>;
+
+  // 判断是否有星号
+  const needRequiredMark =
+    requiredMark || (requiredMark ?? innerRules.filter((rule: { required?: boolean }) => rule.required).length > 0);
+
+  // 提示文本
+  const extraNode = useMemo(() => {
+    let extra = tips ? (
+      <div className={`${classPrefix}-input__extra`} title={tips}>
+        {tips}
+      </div>
+    ) : null;
+
+    if (showErrorMessage && errorList?.[0]?.message) {
+      extra = (
+        <div className={`${classPrefix}-input__extra`} title={errorList[0].message}>
+          {errorList[0].message}
+        </div>
+      );
+    } else if (successList.length) {
+      extra = (
+        <div className={`${classPrefix}-input__extra`} title={successList[0].message}>
+          {successList[0].message}
+        </div>
+      );
+    }
+
+    return extra;
+  }, [showErrorMessage, errorList, successList, tips, classPrefix]);
+
+  // snake 在dom上显示的名字改成下划线拼接
+  const formSnakeName = snakeName.split(",").join("_");
+
+  const formItemClass = classNames(`${classPrefix}-form__item`, className, {
+    [`${classPrefix}-form-item__${formSnakeName}`]: formSnakeName,
+    [`${classPrefix}-form__item-with-help`]: helpNode,
+    [`${classPrefix}-form__item-with-extra`]: extraNode
+  });
+
+  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
+  });
+
+  const contentClass = () => {
+    const controlCls = `${classPrefix}-form__controls`;
+    if (!showErrorMessage) return controlCls;
+
+    const isSuccess = renderStatus === ValidateStatus.SUCCESS;
+    if (isSuccess) {
+      return classNames(controlCls, `${classPrefix}-is-success`, {
+        [`${classPrefix}-form--success-border`]: successBorder
+      });
+    }
+
+    return classNames(controlCls, {
+      [`${classPrefix}-is-warning`]: renderStatus === "warning",
+      [`${classPrefix}-is-error`]: ["fail", "error"].includes(renderStatus),
+      [`${classPrefix}-form--has-error`]:
+        renderStatus === ValidateStatus.ERROR || renderStatus === ValidateStatus.WARNING
+    });
+  };
+
+  let labelStyle = {};
+  let contentStyle = {};
+  if (label && labelWidth && labelAlign !== "top") {
+    if (typeof labelWidth === "number") {
+      labelStyle = { width: `${labelWidth}px` };
+      contentStyle = { marginLeft: layout !== "inline" ? `${labelWidth}px` : "" };
+    } else {
+      labelStyle = { width: labelWidth };
+      contentStyle = { marginLeft: layout !== "inline" ? labelWidth : "" };
+    }
+  }
+
+  return {
+    formItemClass,
+    formItemLabelClass,
+    contentClass,
+    labelStyle,
+    contentStyle,
+    helpNode,
+    extraNode
+  };
+}

package/form/hooks/useInstance.tsx

@@ -0,0 +1,275 @@
+import { isEmpty, isFunction, isEqual, merge, get, set } from "lodash-es";
+// import log from '@tdesign/common-js/log/index';
+import type {
+  TdFormProps,
+  FormValidateResult,
+  FormResetParams,
+  FormValidateMessage,
+  AllValidateResult,
+  NamePath
+} from "../type";
+import type { FormItemInstance } from "../FormItem";
+import useConfig from "../../hooks/useConfig";
+import { getMapValue, objectToArray, travelMapFromObject, calcFieldValue } from "../utils";
+
+// 检测是否需要校验 默认全量校验
+function needValidate(name: NamePath, fields: string[]) {
+  if (!fields || !Array.isArray(fields)) return true;
+  return fields.some((item) => String(item) === String(name));
+}
+
+// 整理校验结果
+function formatValidateResult(validateResultList) {
+  const result = validateResultList.reduce((r, err) => Object.assign(r || {}, err), {});
+  Object.keys(result).forEach((key) => {
+    if (result[key] === true) {
+      delete result[key];
+    } else {
+      result[key] = result[key].filter((fr: AllValidateResult) => fr.result === false);
+    }
+
+    // 整理嵌套数据
+    if (result[key] && key.includes(",")) {
+      const keyList = key.split(",");
+      const fieldValue = calcFieldValue(keyList, result[key]);
+      merge(result, fieldValue);
+      delete result[key];
+    }
+  });
+  return isEmpty(result) ? true : result;
+}
+
+export default function useInstance(
+  props: TdFormProps,
+  formRef,
+  formMapRef: React.MutableRefObject<Map<NamePath, React.RefObject<FormItemInstance>>>,
+  floatingFormDataRef: React.RefObject<Record<string, unknown>>
+) {
+  const { classPrefix } = useConfig();
+
+  const { scrollToFirstError, preventSubmitDefault = true, onSubmit, onReset } = props;
+
+  // 获取第一个错误表单
+  function getFirstError(r: FormValidateResult<FormData>) {
+    if (r === true) return;
+    const [firstKey] = Object.keys(r);
+    if (scrollToFirstError) {
+      scrollTo(`.${classPrefix}-form--has-error`);
+    }
+    return r[firstKey][0]?.message;
+  }
+
+  // 校验不通过时，滚动到第一个错误表单
+  function scrollTo(selector: string) {
+    const dom = formRef.current.querySelector?.(selector);
+    const behavior = scrollToFirstError as ScrollBehavior;
+    if (dom) {
+      dom.scrollIntoView({ behavior });
+    }
+  }
+
+  // 对外方法 手动提交表单
+  function submit(e?: React.FormEvent<HTMLFormElement>) {
+    if (preventSubmitDefault) {
+      e?.preventDefault?.();
+      e?.stopPropagation?.();
+    }
+    validate().then((r) => {
+      const firstError = getFirstError(r);
+      const fields = getFieldsValue(true);
+      onSubmit?.({ validateResult: r, firstError, e, fields });
+    });
+  }
+
+  // 对外方法，该方法会触发全部表单组件错误信息显示
+  async function validate(param?: Record<string, unknown>): Promise<FormValidateResult<FormData>> {
+    const { fields, trigger = "all", showErrorMessage } = param || {};
+    const list = [...formMapRef.current.values()]
+      .filter(
+        (formItemRef) =>
+          isFunction(formItemRef?.current?.validate) && needValidate(formItemRef?.current?.name, fields as string[])
+      )
+      .map((formItemRef) => formItemRef?.current?.validate?.(trigger as string, showErrorMessage as boolean));
+
+    const validateList = await Promise.all(list);
+    return formatValidateResult(validateList);
+  }
+
+  // 对外方法，该方法只会校验不会触发信息提示
+  async function validateOnly(param?: Record<string, unknown>): Promise<FormValidateResult<FormData>> {
+    const { fields, trigger = "all" } = param || {};
+    const list = [...formMapRef.current.values()]
+      .filter(
+        (formItemRef) =>
+          isFunction(formItemRef?.current?.validateOnly) && needValidate(formItemRef?.current?.name, fields as string[])
+      )
+      .map((formItemRef) => formItemRef?.current?.validateOnly?.(trigger as string));
+
+    const validateList = await Promise.all(list);
+    return formatValidateResult(validateList);
+  }
+
+  // 对外方法，获取对应 formItem 的值
+  function getFieldValue(name: NamePath) {
+    if (!name) return null;
+
+    const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+    return formItemRef?.current?.getValue?.();
+  }
+
+  // 对外方法，获取一组字段名对应的值，当调用 getFieldsValue(true) 时返回所有值
+  function getFieldsValue(nameList: string[] | boolean) {
+    const fieldsValue = {};
+
+    if (nameList === true) {
+      // 嵌套数组子节点先添加导致外层数据覆盖因而需要倒序遍历
+      for (const [name, formItemRef] of [...formMapRef.current.entries()].reverse()) {
+        let fieldValue = null;
+        const currentRef = formItemRef as React.RefObject<FormItemInstance>;
+        if (currentRef?.current?.isFormList) {
+          fieldValue = calcFieldValue(name, currentRef?.current?.getValue?.());
+        } else {
+          fieldValue = calcFieldValue(name, currentRef?.current?.getValue?.(), !props.supportNumberKey);
+        }
+        merge(fieldsValue, fieldValue);
+      }
+    } else {
+      if (!Array.isArray(nameList)) {
+        console.error("Form", "`getFieldsValue` 参数需要 Array 类型");
+        return {};
+      }
+
+      nameList.forEach((name) => {
+        const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+        if (!formItemRef) return;
+
+        const fieldValue = calcFieldValue(name, formItemRef?.current.getValue?.());
+        merge(fieldsValue, fieldValue);
+      });
+    }
+    return fieldsValue;
+  }
+
+  // 对外方法，设置对应 formItem 的值
+  function setFieldsValue(fields = {}) {
+    const nameLists = objectToArray(fields);
+
+    nameLists.forEach((nameList) => {
+      const fieldValue = get(fields, nameList);
+
+      let formItemRef;
+      if (nameList.length > 1) {
+        // 如果是数组，由于内存地址不一致，不能直接使用 Map.get 获取到 formItemRef
+        for (const [mapNameList, _formItemRef] of formMapRef.current.entries()) {
+          if (isEqual(nameList, mapNameList)) {
+            formItemRef = _formItemRef;
+            break;
+          }
+        }
+      } else {
+        formItemRef = formMapRef.current.get(nameList[0]);
+      }
+
+      if (formItemRef?.current) {
+        formItemRef?.current?.setValue?.(fieldValue, fields);
+      } else {
+        set(floatingFormDataRef.current, nameList, fieldValue);
+      }
+    });
+  }
+
+  // 对外方法，设置对应 formItem 的数据
+  function setFields(fields = []) {
+    if (!Array.isArray(fields)) throw new Error("setFields 参数需要 Array 类型");
+
+    fields.forEach((field) => {
+      const { name, ...restFields } = field;
+      const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+
+      formItemRef?.current?.setField(restFields, field);
+    });
+  }
+
+  // 对外方法，重置对应 formItem 的数据
+  function reset(params: FormResetParams<FormData>) {
+    // reset all
+    if (typeof params === "undefined") {
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        formItemRef?.current?.resetField?.();
+      });
+    } else {
+      const { type = "initial", fields = [] } = params;
+
+      fields.forEach((name) => {
+        const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+        formItemRef?.current?.resetField(type);
+      });
+    }
+    onReset?.({});
+  }
+
+  // 对外方法，重置对应 formItem 的状态
+  function clearValidate(fields?: Array<keyof FormData>) {
+    // reset all
+    if (typeof fields === "undefined") {
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        formItemRef?.current?.resetValidate();
+      });
+    } else {
+      if (!Array.isArray(fields)) throw new Error("clearValidate 参数需要 Array 类型");
+
+      fields.forEach((name) => {
+        const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+        formItemRef?.current?.resetValidate();
+      });
+    }
+  }
+
+  // 对外方法，设置 formItem 的错误信息
+  function setValidateMessage(message: FormValidateMessage<FormData>) {
+    travelMapFromObject(message, formMapRef, (formItemRef, fieldValue) => {
+      (formItemRef as React.RefObject<FormItemInstance>)?.current?.setValidateMessage?.(fieldValue);
+    });
+  }
+
+  // 对外方法，获取 formItem 的错误信息
+  function getValidateMessage(fields?: Array<keyof FormData>) {
+    const message = {};
+
+    if (typeof fields === "undefined") {
+      [...formMapRef.current.values()].forEach((formItemRef) => {
+        const item = formItemRef?.current?.getValidateMessage?.();
+        if (isEmpty(item)) return;
+        message[String(formItemRef?.current?.name)] = item;
+      });
+    } else {
+      if (!Array.isArray(fields)) throw new Error("getValidateMessage 参数需要 Array 类型");
+
+      fields.forEach((name) => {
+        const formItemRef = getMapValue(name, formMapRef) as React.RefObject<FormItemInstance> | undefined;
+        const item = formItemRef?.current?.getValidateMessage?.();
+        if (isEmpty(item)) return;
+        message[String(formItemRef?.current?.name)] = item;
+      });
+    }
+
+    if (isEmpty(message)) return;
+
+    return message;
+  }
+
+  return {
+    submit,
+    reset,
+    validate,
+    validateOnly,
+    clearValidate,
+    setFields,
+    setFieldsValue,
+    setValidateMessage,
+    getValidateMessage,
+    getFieldValue,
+    getFieldsValue,
+    getCurrentElement: () => formRef.current
+  };
+}

package/form/hooks/useWatch.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { get, isUndefined } from "lodash-es";
+import type { NamePath } from "../type";
+import type { InternalFormInstance } from "./interface";
+import { HOOK_MARK } from "./useForm";
+import noop from "../../utils/noop";
+
+export default function useWatch(name: NamePath, form: InternalFormInstance) {
+  const [value, setValue] = useState<string>();
+  const valueStr = useMemo(() => JSON.stringify(value), [value]);
+  const valueStrRef = useRef(valueStr);
+
+  const isValidForm = form && form._init;
+
+  useEffect(() => {
+    if (!isValidForm) return;
+
+    const internalHooks = form.getInternalHooks?.(HOOK_MARK);
+    const { registerWatch = noop } = internalHooks || {};
+
+    const cancelRegister = registerWatch(() => {
+      const allFieldsValue = form.getFieldsValue?.(true);
+      const newValue = get(allFieldsValue, name);
+      const nextValueStr = JSON.stringify(newValue);
+
+      // Compare stringify in case it's nest object
+      if (valueStrRef.current !== nextValueStr) {
+        valueStrRef.current = nextValueStr;
+        setValue(nextValueStr);
+      }
+    });
+
+    const allFieldsValue = form.getFieldsValue?.(true);
+    const initialValue = get(allFieldsValue, name);
+    setValue(JSON.stringify(initialValue));
+
+    return cancelRegister;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return isUndefined(value) ? value : JSON.parse(value);
+}

package/form/index.ts

@@ -0,0 +1,11 @@
+import _Form from "./Form";
+
+import "./style/index.js";
+
+export type { FormProps } from "./Form";
+export type { FormItemProps } from "./FormItem";
+export * from "./type";
+export * from "./hooks/interface";
+
+export const Form = _Form;
+export default Form;

package/form/style/css.js

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

package/form/style/index.js

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