taro-uno-ui 0.9.0 → 1.0.0

package/src/components/form/Form/Form.tsx

@@ -1,16 +1,9 @@
-import React, { forwardRef, useState, useCallback, createContext } from 'react';
+import React, { forwardRef, createContext } from 'react';
 import { Form as TaroForm } from '@tarojs/components';
 import type { ITouchEvent } from '@tarojs/components';
 import { formStyles } from './Form.styles';
-import type {
-  FormProps,
-  FormRef,
-  FormInstance,
-  FormContext,
-  FormValues,
-  FormErrors,
-  FormFieldInfo,
-} from './Form.types';
+import type { FormProps, FormRef, FormContext, FormErrors } from './Form.types';
+import { useFormLogic } from './useFormLogic';
 
 // 创建表单上下文
 export const FormContextProvider = createContext<FormContext | null>(null);
@@ -20,480 +13,30 @@ export type { FormContext } from './Form.types';
 
 /** 表单组件 */
 export const FormComponent = forwardRef<FormRef, FormProps>((props, ref) => {
-  const {
-    initialValues = {},
-    layout = 'horizontal',
-    labelAlign = 'right',
-    size = 'md',
-    labelWidth = 120,
-    labelSuffix,
-    colon = true,
-    requiredMark = true,
-    rules = {},
-    validateTrigger = 'onBlur',
-    immediate = false,
-    onSubmit,
-    onReset,
-    onValuesChange,
-    onFieldsChange,
-    onFinishFailed,
-    className,
-    style,
-    accessible = true,
-    accessibilityLabel,
-    accessibilityRole = 'form',
-    disabled = false,
-    readonly = false,
-    showValidateMessage = true,
-    scrollToFirstError = true,
-    preserve = true,
-    children,
-    ...restProps
-  } = props;
+  const { layout = 'horizontal', size = 'md', className, style, children, ...restProps } = props;
 
   // Filter out React DOM event handlers that are incompatible with TaroForm
   const filteredProps = Object.fromEntries(
-    Object.entries(restProps).filter(([key]) => !key.startsWith('on') || key.includes('Click') || key.includes('Touch'))
-  );
-
-  
-  const [formInstance, setFormInstance] = useState<FormInstance>({
-    values: { ...initialValues },
-    errors: {},
-    touched: {},
-    validating: {},
-    fields: {},
-    rules: { ...rules },
-    status: 'normal',
-    disabled,
-    readonly,
-  });
-
-  // 更新表单实例
-  const updateFormInstance = useCallback((updates: Partial<FormInstance>) => {
-    setFormInstance((prev): FormInstance => ({ ...prev, ...updates }));
-  }, []);
-
-  // 注册字段
-  const registerField = useCallback((name: string, info: Partial<FormFieldInfo>) => {
-    setFormInstance((prev): FormInstance => ({
-      ...prev,
-      fields: {
-        ...prev.fields,
-        [name]: {
-          name,
-          value: prev.values[name] ?? info.value ?? '',
-          errors: [],
-          touched: false,
-          validating: false,
-          rules: info.rules || [],
-          ...info,
-        },
-      },
-    }));
-  }, []);
-
-  // 注销字段
-  const unregisterField = useCallback(
-    (name: string) => {
-      setFormInstance((prev): FormInstance => {
-        const newFields: Record<string, FormFieldInfo> = { ...prev.fields };
-        delete newFields[name];
-
-        if (!preserve) {
-          const newValues: FormValues = { ...prev.values };
-          delete newValues[name];
-
-          return {
-            ...prev,
-            fields: newFields,
-            values: newValues,
-          };
-        }
-
-        return { ...prev, fields: newFields };
-      });
-    },
-    [preserve],
-  );
-
-  // 更新字段
-  const updateField = useCallback((name: string, info: Partial<FormFieldInfo>) => {
-    setFormInstance((prev): FormInstance => ({
-      ...prev,
-      fields: {
-        ...prev.fields,
-        [name]: {
-          ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-          ...info,
-        },
-      },
-    }));
-  }, []);
-
-  // 获取字段
-  const getField = useCallback(
-    (name: string): FormFieldInfo | null => {
-      return formInstance.fields[name] || null;
-    },
-    [formInstance.fields],
-  );
-
-  // 设置字段值
-  const setFieldValue = useCallback(
-    (name: string, value: any) => {
-      setFormInstance((prev): FormInstance => {
-        const newValues: FormValues = { ...prev.values, [name]: value };
-        const newFields: Record<string, FormFieldInfo> = {
-          ...prev.fields,
-          [name]: {
-            ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-            value,
-          },
-        };
-
-        // 触发值变化事件
-        if (onValuesChange) {
-          onValuesChange({ [name]: value }, newValues);
-        }
-
-        // 触发字段变化事件
-        if (onFieldsChange) {
-          const changedField = newFields[name] as FormFieldInfo;
-          onFieldsChange([changedField], Object.values(newFields));
-        }
-
-        return {
-          ...prev,
-          values: newValues,
-          fields: newFields,
-        };
-      });
-    },
-    [onValuesChange, onFieldsChange],
-  );
-
-  // 获取字段值
-  const getFieldValue = useCallback(
-    (name: string): any => {
-      return formInstance.values[name];
-    },
-    [formInstance.values],
-  );
-
-  // 设置字段错误
-  const setFieldError = useCallback((name: string, error: string | string[]) => {
-    setFormInstance((prev): FormInstance => ({
-      ...prev,
-      errors: {
-        ...prev.errors,
-        [name]: Array.isArray(error) ? error : [error],
-      },
-      fields: {
-        ...prev.fields,
-        [name]: {
-          ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-          errors: Array.isArray(error) ? error : [error],
-        },
-      },
-    }));
-  }, []);
-
-  // 获取字段错误
-  const getFieldError = useCallback(
-    (name: string): string[] => {
-      const errors = formInstance.errors[name];
-      return Array.isArray(errors) ? errors : (errors ? [errors] : []);
-    },
-    [formInstance.errors],
-  );
-
-  // 设置字段 touched 状态
-  const setFieldTouched = useCallback((name: string, touched: boolean) => {
-    setFormInstance((prev): FormInstance => ({
-      ...prev,
-      touched: {
-        ...prev.touched,
-        [name]: touched,
-      },
-      fields: {
-        ...prev.fields,
-        [name]: {
-          ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-          touched,
-        },
-      },
-    }));
-  }, []);
-
-  // 设置字段 validating 状态
-  const setFieldValidating = useCallback((name: string, validating: boolean) => {
-    setFormInstance((prev): FormInstance => ({
-      ...prev,
-      validating: {
-        ...prev.validating,
-        [name]: validating,
-      },
-      fields: {
-        ...prev.fields,
-        [name]: {
-          ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-          validating,
-        },
-      },
-    }));
-  }, []);
-
-  // 验证单个字段
-  const validateField = useCallback(
-    async (name: string): Promise<{ valid: boolean; errors: string[]; value: any }> => {
-      const field = formInstance.fields[name];
-      if (!field) {
-        return { valid: true, errors: [], value: undefined };
-      }
-
-      setFieldValidating(name, true);
-      const errors: string[] = [];
-
-      try {
-        // 验证必填
-        if (field.rules.some((rule) => rule.required)) {
-          if (field.value === undefined || field.value === null || field.value === '') {
-            const requiredRule = field.rules.find((rule) => rule.required);
-            errors.push(requiredRule?.message || '此字段为必填项');
-          }
-        }
-
-        // 验证长度
-        if (typeof field.value === 'string') {
-          field.rules.forEach((rule) => {
-            if (rule.min !== undefined && field.value.length < rule.min) {
-              errors.push(rule.message || `最少需要${rule.min}个字符`);
-            }
-            if (rule.max !== undefined && field.value.length > rule.max) {
-              errors.push(rule.message || `最多允许${rule.max}个字符`);
-            }
-          });
-        }
-
-        // 验证数值范围
-        if (typeof field.value === 'number') {
-          field.rules.forEach((rule) => {
-            if (rule.minValue !== undefined && field.value < rule.minValue) {
-              errors.push(rule.message || `最小值为${rule.minValue}`);
-            }
-            if (rule.maxValue !== undefined && field.value > rule.maxValue) {
-              errors.push(rule.message || `最大值为${rule.maxValue}`);
-            }
-          });
-        }
-
-        // 验证正则表达式
-        field.rules.forEach((rule) => {
-          if (rule.pattern && typeof field.value === 'string' && !rule.pattern.test(field.value)) {
-            errors.push(rule.message || '输入格式不正确');
-          }
-        });
-
-        // 验证枚举值
-        field.rules.forEach((rule) => {
-          if (rule.enum && !rule.enum.includes(field.value)) {
-            errors.push(rule.message || '输入值不在允许范围内');
-          }
-        });
-
-        // 自定义验证函数
-        for (const rule of field.rules) {
-          if (rule.validator) {
-            try {
-              const result = rule.validator(field.value, formInstance.values);
-              if (typeof result === 'string') {
-                errors.push(result);
-              } else if (!result) {
-                errors.push(rule.message || '验证失败');
-              }
-            } catch (error) {
-              errors.push(rule.message || '验证失败');
-            }
-          }
-        }
-
-        // 异步验证函数
-        for (const rule of field.rules) {
-          if (rule.asyncValidator) {
-            try {
-              const result = await rule.asyncValidator(field.value, formInstance.values);
-              if (typeof result === 'string') {
-                errors.push(result);
-              } else if (!result) {
-                errors.push(rule.message || '验证失败');
-              }
-            } catch (error) {
-              errors.push(rule.message || '验证失败');
-            }
-          }
-        }
-
-        setFieldError(name, errors);
-        return { valid: errors.length === 0, errors, value: field.value };
-      } finally {
-        setFieldValidating(name, false);
-      }
-    },
-    [formInstance, setFieldError, setFieldValidating],
+    Object.entries(restProps).filter(
+      ([key]) => !key.startsWith('on') || key.includes('Click') || key.includes('Touch'),
+    ),
   );
 
-  // 重置字段
-  const resetField = useCallback((name: string) => {
-    setFormInstance((prev): FormInstance => {
-      const field = prev.fields[name];
-      if (!field) return prev;
-
-      const defaultValue = field.rules.find((rule) => rule.defaultValue !== undefined)?.defaultValue;
-      const newValues: FormValues = { ...prev.values, [name]: defaultValue };
-      const newFields: Record<string, FormFieldInfo> = {
-        ...prev.fields,
-        [name]: {
-          ...field,
-          value: defaultValue,
-          errors: [],
-          touched: false,
-          validating: false,
-        },
-      };
-
-      return {
-        ...prev,
-        values: newValues,
-        fields: newFields,
-        errors: { ...prev.errors, [name]: [] },
-        touched: { ...prev.touched, [name]: false },
-        validating: { ...prev.validating, [name]: false },
-      };
-    });
-  }, []);
-
-  // 创建表单上下文
-  const formContext: FormContext = {
-    form: formInstance,
-    config: {
-      layout,
-      labelAlign,
-      size,
-      labelWidth,
-      labelSuffix,
-      colon,
-      requiredMark,
-      validateTrigger,
-      showValidateMessage,
-      disabled,
-      readonly,
-    },
-    styleConfig: formStyles['getStyleConfig'](),
-    registerField,
-    unregisterField,
-    updateField,
-    getField,
+  const {
+    formInstance,
+    formContext,
+    handleSubmit,
+    handleReset,
+    updateFormInstance,
     setFieldValue,
-    getFieldValue,
     setFieldError,
-    getFieldError,
     setFieldTouched,
     setFieldValidating,
     validateField,
     resetField,
-  };
-
-  // 处理表单提交
-  const handleSubmit = useCallback(
-    async (event: any) => {
-      event.preventDefault?.();
-
-      // 验证所有字段
-      const validationResults = await Promise.all(Object.keys(formInstance.fields).map((name) => validateField(name)));
-
-      const hasErrors = validationResults.some((result) => !result.valid);
-
-      if (hasErrors) {
-        const errors: FormErrors = {};
-        validationResults.forEach((result, index) => {
-          const fieldName = Object.keys(formInstance.fields)[index];
-          if (fieldName && !result.valid) {
-            errors[fieldName] = result.errors;
-          }
-        });
-
-        onFinishFailed?.(errors, formInstance.values);
-        return;
-      }
-
-      // 提交表单
-      try {
-        // Create a synthetic event for compatibility
-        const syntheticEvent = {
-          preventDefault: () => {},
-          stopPropagation: () => {},
-          ...event
-        } as ITouchEvent;
-        
-        await onSubmit?.(formInstance.values, syntheticEvent);
-      } catch (error) {
-        console.error('Form submission error:', error);
-      }
-    },
-    [formInstance, validateField, onSubmit, onFinishFailed],
-  );
-
-  // 处理表单重置
-  const handleReset = useCallback(
-    (event: any) => {
-      setFormInstance((prev): FormInstance => {
-        const newValues: FormValues = {};
-        const newFields: Record<string, FormFieldInfo> = {};
-        const newErrors: FormErrors = {};
-        const newTouched: Record<string, boolean> = {};
-        const newValidating: Record<string, boolean> = {};
-
-        Object.keys(prev.fields).forEach((name) => {
-          const field = prev.fields[name];
-          if (field) {
-            const defaultValue = field.rules.find((rule) => rule.defaultValue !== undefined)?.defaultValue;
-            newValues[name] = defaultValue;
-            newFields[name] = {
-              name: field.name,
-              value: defaultValue,
-              errors: [],
-              touched: false,
-              validating: false,
-              rules: field.rules,
-            };
-            newErrors[name] = [];
-            newTouched[name] = false;
-            newValidating[name] = false;
-          }
-        });
-
-        return {
-          ...prev,
-          values: newValues,
-          fields: newFields,
-          errors: newErrors,
-          touched: newTouched,
-          validating: newValidating,
-        };
-      });
-
-      // Create a synthetic event for compatibility
-      const syntheticEvent = {
-        preventDefault: () => {},
-        stopPropagation: () => {},
-        ...event
-      } as ITouchEvent;
-
-      onReset?.(formInstance.values, syntheticEvent);
-    },
-    [formInstance.values, onReset],
-  );
+    updateField,
+    getFieldError,
+  } = useFormLogic(props);
 
   // 暴露给外部的引用方法
   React.useImperativeHandle(
@@ -501,10 +44,9 @@ export const FormComponent = forwardRef<FormRef, FormProps>((props, ref) => {
     () => ({
       getValues: () => formInstance.values,
       setValues: (values) => {
-        setFormInstance((prev): FormInstance => ({
-          ...prev,
-          values: { ...prev.values, ...values },
-        }));
+        updateFormInstance({
+          values: { ...formInstance.values, ...values },
+        });
       },
       getFieldValue: (name) => formInstance.values[name],
       setFieldValue: (name, value) => setFieldValue(name, value),
@@ -531,11 +73,11 @@ export const FormComponent = forwardRef<FormRef, FormProps>((props, ref) => {
             }
           });
 
-          onFinishFailed?.(errors, formInstance.values);
+          props.onFinishFailed?.(errors, formInstance.values);
           throw errors;
         }
 
-        await onSubmit?.(formInstance.values, {} as ITouchEvent);
+        await props.onSubmit?.(formInstance.values, {} as ITouchEvent);
       },
       validate: async (fields) => {
         const fieldNames = fields || Object.keys(formInstance.fields);
@@ -583,17 +125,13 @@ export const FormComponent = forwardRef<FormRef, FormProps>((props, ref) => {
         if (fields) {
           fields.forEach((name) => setFieldError(name, []));
         } else {
-          setFormInstance((prev): FormInstance => ({
-            ...prev,
-            errors: {},
-          }));
+          updateFormInstance({ errors: {} });
         }
       },
       setErrors: (errors) => {
-        setFormInstance((prev): FormInstance => ({
-          ...prev,
-          errors: { ...prev.errors, ...errors },
-        }));
+        updateFormInstance({
+          errors: { ...formInstance.errors, ...errors },
+        });
       },
       getFieldError: (name) => getFieldError(name),
       getErrors: () => formInstance.errors,
@@ -617,46 +155,70 @@ export const FormComponent = forwardRef<FormRef, FormProps>((props, ref) => {
         });
       },
       addFieldRules: (name, newRules) => {
-        setFormInstance((prev): FormInstance => ({
-          ...prev,
+        updateFormInstance({
           rules: {
-            ...prev.rules,
-            [name]: [...(prev.rules[name] || []), ...newRules],
+            ...formInstance.rules,
+            [name]: [...(formInstance.rules[name] || []), ...newRules],
           },
           fields: {
-            ...prev.fields,
+            ...formInstance.fields,
             [name]: {
-              ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
-              rules: [...(prev.fields[name]?.rules || []), ...newRules],
+              ...(formInstance.fields[name] || {
+                name,
+                value: '',
+                errors: [],
+                touched: false,
+                validating: false,
+                rules: [],
+              }),
+              rules: [...(formInstance.fields[name]?.rules || []), ...newRules],
             },
           },
-        }));
+        });
       },
       removeFieldRules: (name) => {
-        setFormInstance((prev): FormInstance => ({
-          ...prev,
-          rules: { ...prev.rules, [name]: [] },
+        updateFormInstance({
+          rules: { ...formInstance.rules, [name]: [] },
           fields: {
-            ...prev.fields,
+            ...formInstance.fields,
             [name]: {
-              ...(prev.fields[name] || { name, value: '', errors: [], touched: false, validating: false, rules: [] }),
+              ...(formInstance.fields[name] || {
+                name,
+                value: '',
+                errors: [],
+                touched: false,
+                validating: false,
+                rules: [],
+              }),
               rules: [],
             },
           },
-        }));
+        });
       },
       getFieldRules: (name) => formInstance.rules[name] || [],
       setStatus: (status) => updateFormInstance({ status }),
       getStatus: () => formInstance.status,
       setDisabled: (disabled) => updateFormInstance({ disabled }),
       setReadonly: (readonly) => updateFormInstance({ readonly }),
-      scrollToField: (name) => {
+      scrollToField: (_name) => {
         // 在实际实现中，这里会滚动到指定字段
-        console.log('Scroll to field:', name);
       },
       getFormInstance: () => formInstance,
     }),
-    [formInstance, validateField, setFieldValue, updateField, updateFormInstance, onFinishFailed, onSubmit],
+    [
+      formInstance,
+      validateField,
+      setFieldValue,
+      updateField,
+      updateFormInstance,
+      props.onFinishFailed,
+      props.onSubmit,
+      setFieldError,
+      getFieldError,
+      setFieldTouched,
+      setFieldValidating,
+      resetField,
+    ],
   );
 
   // 生成表单样式

package/src/components/form/Form/Form.types.ts

@@ -85,7 +85,22 @@ export interface FormFieldInfo {
 export type FormNativeProps = FormHTMLAttributes<HTMLFormElement>;
 
 /** 表单组件属性接口 */
-export interface FormProps extends Omit<FormNativeProps, 'onSubmit' | 'onReset' | 'dangerouslySetInnerHTML' | 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseOver' | 'onMouseOut'> {
+export interface FormProps
+  extends Omit<
+    FormNativeProps,
+    | 'onSubmit'
+    | 'onReset'
+    | 'dangerouslySetInnerHTML'
+    | 'onTouchStart'
+    | 'onTouchMove'
+    | 'onTouchEnd'
+    | 'onTouchCancel'
+    | 'onClick'
+    | 'onMouseDown'
+    | 'onMouseUp'
+    | 'onMouseOver'
+    | 'onMouseOut'
+  > {
   /** 表单初始值 */
   initialValues?: FormValues;
   /** 表单布局 */