feat: add the disabled attribute, setFieldsValue should not trigger validation

Author: oasis-cloud

src/packages/form/form.taro.tsx

@@ -12,6 +12,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  disabled: boolean
   divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
@@ -23,6 +24,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  disabled: false,
   divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
@@ -44,6 +46,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       children,
       initialValues,
       divider,
+      disabled,
       onFinish,
       onFinishFailed,
       labelPosition,
@@ -97,7 +100,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition }}>
+          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
             {children}
           </Context.Provider>
           {footer ? (

src/packages/form/form.tsx

@@ -11,6 +11,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  disabled: boolean
   divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
@@ -22,6 +23,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  disabled: false,
   divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
@@ -43,6 +45,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
       children,
       initialValues,
       divider,
+      disabled,
       onFinish,
       onFinishFailed,
       labelPosition,
@@ -96,7 +99,7 @@ export const Form = React.forwardRef<FormInstance, Partial<FormProps>>(
         }}
       >
         <Cell.Group divider={divider}>
-          <Context.Provider value={{ formInstance, labelPosition }}>
+          <Context.Provider value={{ formInstance, labelPosition, disabled }}>
             {children}
           </Context.Provider>
           {footer ? (

src/packages/form/useform.taro.ts

@@ -1,11 +1,12 @@
 import { useRef } from 'react'
 import Schema from 'async-validator'
+import { merge } from '@/utils/merge'
 import {
-  Store,
   Callbacks,
-  FormInstance,
   FormFieldEntity,
+  FormInstance,
   NamePath,
+  Store,
 } from './types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
@@ -74,28 +75,32 @@ class FormStore {
     return fieldsValue
   }
 
+  updateStore(nextStore: Store) {
+    this.store = nextStore
+  }
+
   /**
    * 设置 form 的初始值，之后在 reset 的时候使用
    * @param values
    * @param init
    */
 
-  setInitialValues = (values: Store, init: boolean) => {
+  setInitialValues = (initialValues: Store, init: boolean) => {
+    this.initialValues = initialValues || {}
     if (init) {
-      this.initialValues = values
-      this.store = values
+      const nextStore = merge(initialValues, this.store)
+      this.updateStore(nextStore)
+      console.log(this.store === this.initialValues)
     }
   }
 
   /**
    * 存储组件数据
    * @param newStore { [name]: newValue }
    */
-  setFieldsValue = (newStore: any, needValidate = true) => {
-    this.store = {
-      ...this.store,
-      ...newStore,
-    }
+  setFieldsValue = (newStore: any) => {
+    const nextStore = merge(this.store, newStore)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       const { name } = entity.props
       Object.keys(newStore).forEach((key) => {
@@ -113,7 +118,6 @@ class FormStore {
         item.entity.onStoreChange('update')
       }
     })
-    needValidate && this.validateFields()
   }
 
   setCallback = (callback: Callbacks) => {
@@ -142,7 +146,7 @@ class FormStore {
     // validator.messages()
     try {
       await validator.validate({ [name]: this.store?.[name] })
-    } catch ({ errors }: any) {
+    } catch ({ errors }) {
       if (errors) {
         errs.push(...(errors as any[]))
         this.errors[name] = errors
@@ -186,7 +190,9 @@ class FormStore {
 
   resetFields = () => {
     this.errors.length = 0
-    this.store = this.initialValues
+    const nextStore = merge({}, this.initialValues)
+    console.log('xxx', nextStore, this.initialValues)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       entity.onStoreChange('reset')
     })
@@ -244,6 +250,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
+    return [formRef.current as FormInstance]
   }
-  return [formRef.current]
 }

src/packages/form/useform.ts

@@ -1,11 +1,12 @@
 import { useRef } from 'react'
 import Schema from 'async-validator'
+import { merge } from '@/utils/merge'
 import {
-  Store,
   Callbacks,
-  FormInstance,
   FormFieldEntity,
+  FormInstance,
   NamePath,
+  Store,
 } from './types'
 
 export const SECRET = 'NUT_FORM_INTERNAL'
@@ -74,28 +75,31 @@ class FormStore {
     return fieldsValue
   }
 
+  updateStore(nextStore: Store) {
+    this.store = nextStore
+  }
+
   /**
    * 设置 form 的初始值，之后在 reset 的时候使用
    * @param values
    * @param init
    */
 
-  setInitialValues = (values: Store, init: boolean) => {
+  setInitialValues = (initialValues: Store, init: boolean) => {
+    this.initialValues = initialValues || {}
     if (init) {
-      this.initialValues = values
-      this.store = values
+      const nextStore = merge(initialValues, this.store)
+      this.updateStore(nextStore)
     }
   }
 
   /**
    * 存储组件数据
    * @param newStore { [name]: newValue }
    */
-  setFieldsValue = (newStore: any, needValidate = true) => {
-    this.store = {
-      ...this.store,
-      ...newStore,
-    }
+  setFieldsValue = (newStore: any) => {
+    const nextStore = merge(this.store, newStore)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       const { name } = entity.props
       Object.keys(newStore).forEach((key) => {
@@ -113,7 +117,6 @@ class FormStore {
         item.entity.onStoreChange('update')
       }
     })
-    needValidate && this.validateFields()
   }
 
   setCallback = (callback: Callbacks) => {
@@ -123,48 +126,55 @@ class FormStore {
     }
   }
 
+  validateEntities = async (entity: FormFieldEntity, errs: any[]) => {
+    const { name, rules = [] } = entity.props
+    const descriptor: any = {}
+    if (rules.length) {
+      // 多条校验规则
+      if (rules.length > 1) {
+        descriptor[name] = []
+        rules.forEach((v: any) => {
+          descriptor[name].push(v)
+        })
+      } else {
+        descriptor[name] = rules[0]
+      }
+    }
+    const validator = new Schema(descriptor)
+    // 此处合并无值message 没有意义？
+    // validator.messages()
+    try {
+      await validator.validate({ [name]: this.store?.[name] })
+    } catch ({ errors }) {
+      if (errors) {
+        errs.push(...(errors as any[]))
+        this.errors[name] = errors
+      }
+    } finally {
+      if (!errs || errs.length === 0) {
+        this.errors[name] = []
+      }
+    }
+
+    entity.onStoreChange('validate')
+  }
+
   validateFields = async (nameList?: NamePath[]) => {
-    let filterEntitys = []
-    const errs = []
+    let filterEntities = []
     this.errors.length = 0
     if (!nameList || nameList.length === 0) {
-      filterEntitys = this.fieldEntities
+      filterEntities = this.fieldEntities
     } else {
-      filterEntitys = this.fieldEntities.filter(({ props: { name } }) =>
+      filterEntities = this.fieldEntities.filter(({ props: { name } }) =>
         nameList.includes(name)
       )
     }
-    for (const entity of filterEntitys) {
-      const { name, rules = [] } = entity.props
-      const descriptor: any = {}
-      if (rules.length) {
-        // 多条校验规则
-        if (rules.length > 1) {
-          descriptor[name] = []
-          rules.forEach((v: any) => {
-            descriptor[name].push(v)
-          })
-        } else {
-          descriptor[name] = rules[0]
-        }
-      }
-      const validator = new Schema(descriptor)
-      // 此处合并无值message 没有意义？
-      // validator.messages()
-      try {
-        await validator.validate({ [name]: this.store?.[name] })
-      } catch ({ errors }: any) {
-        if (errors) {
-          errs.push(...(errors as any[]))
-          this.errors[name] = errors
-        }
-      } finally {
-        if (!errs || errs.length === 0) {
-          this.errors[name] = []
-        }
-      }
-      entity.onStoreChange('validate')
-    }
+    const errs: any[] = []
+    await Promise.all(
+      filterEntities.map(async (entity) => {
+        await this.validateEntities(entity, errs)
+      })
+    )
     return errs
   }
 
@@ -179,7 +189,8 @@ class FormStore {
 
   resetFields = () => {
     this.errors.length = 0
-    this.store = this.initialValues
+    const nextStore = merge({}, this.initialValues)
+    this.updateStore(nextStore)
     this.fieldEntities.forEach((entity: FormFieldEntity) => {
       entity.onStoreChange('reset')
     })
@@ -237,6 +248,6 @@ export const useForm = (form?: FormInstance): [FormInstance] => {
       const formStore = new FormStore()
       formRef.current = formStore.getForm() as FormInstance
     }
+    return [formRef.current as FormInstance]
   }
-  return [formRef.current]
 }

src/packages/formitem/formitem.scss

@@ -1,6 +1,11 @@
 .nut-form-item {
   display: flex;
 
+  &-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
   &-label {
     display: flex;
     flex-direction: row;