fix(core/json-schema): fix props unexpect patch and field reactions u…

…nexpect react (#2232)

docs/guide/advanced/validate.md

@@ -1955,7 +1955,7 @@ export default () => (
         title="AA"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value
               ? 'AA must be greater than BB'
               : ''
@@ -1968,7 +1968,7 @@ export default () => (
         title="BB"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('aa').value() <= field.value
               ? 'AA must be greater than BB'
               : ''
@@ -2005,7 +2005,7 @@ const schema = {
       title: 'AA',
       required: true,
       'x-reactions': `{{(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA must be greater than BB' : ''
       }}}`,
       'x-component': 'NumberPicker',
@@ -2018,7 +2018,7 @@ const schema = {
         dependencies: ['aa'],
         fulfill: {
           state: {
-            errors:
+            selfErrors:
               "{{$deps[0] <= $self.value ? 'AA must be greater than BB' : ''}}",
           },
         },
@@ -2053,7 +2053,7 @@ export default () => (
       title="AA"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('bb').value() >= field.value
             ? 'AA must be greater than BB'
             : ''
@@ -2066,7 +2066,7 @@ export default () => (
       title="BB"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('aa').value() <= field.value
             ? 'AA must be greater than BB'
             : ''

docs/guide/advanced/validate.zh-CN.md

@@ -1955,7 +1955,7 @@ export default () => (
         title="AA"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
         }}
         x-component="NumberPicker"
@@ -1966,7 +1966,7 @@ export default () => (
         title="BB"
         required
         x-reactions={(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('aa').value() <= field.value ? 'AA必须大于BB' : ''
         }}
         x-component="NumberPicker"
@@ -2001,7 +2001,7 @@ const schema = {
       title: 'AA',
       required: true,
       'x-reactions': `{{(field) => {
-          field.errors =
+          field.selfErrors =
             field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
       }}}`,
       'x-component': 'NumberPicker',
@@ -2014,7 +2014,7 @@ const schema = {
         dependencies: ['aa'],
         fulfill: {
           state: {
-            errors: "{{$deps[0] <= $self.value ? 'AA必须大于BB' : ''}}",
+            selfErrors: "{{$deps[0] <= $self.value ? 'AA必须大于BB' : ''}}",
           },
         },
       },
@@ -2048,7 +2048,7 @@ export default () => (
       title="AA"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('bb').value() >= field.value ? 'AA必须大于BB' : ''
       }}
       component={[NumberPicker]}
@@ -2059,7 +2059,7 @@ export default () => (
       title="BB"
       required
       reactions={(field) => {
-        field.errors =
+        field.selfErrors =
           field.query('aa').value() <= field.value ? 'AA必须大于BB' : ''
       }}
       component={[NumberPicker]}

packages/core/src/__tests__/field.spec.ts

@@ -1554,3 +1554,52 @@ test('initial display with value', () => {
   expect(cc.value).toEqual(123)
   expect(cc.hidden).toBeTruthy()
 })
+
+test('state depend field visible value', async () => {
+  const form = attach(createForm())
+  const aa = attach(
+    form.createField({
+      name: 'aa',
+    })
+  )
+  const bb = attach(
+    form.createField({
+      name: 'bb',
+      reactions(field) {
+        field.visible = aa.value === '123'
+      },
+    })
+  )
+  const cc = attach(
+    form.createField({
+      name: 'cc',
+      reactions(field) {
+        field.visible = aa.value === '123'
+        field.disabled = !bb.value
+      },
+    })
+  )
+  expect(bb.visible).toBeFalsy()
+  expect(cc.visible).toBeFalsy()
+  expect(cc.disabled).toBeTruthy()
+  aa.value = '123'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeTruthy()
+  bb.value = '321'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeFalsy()
+  aa.value = ''
+  await sleep(10)
+  expect(bb.visible).toBeFalsy()
+  expect(cc.visible).toBeFalsy()
+  expect(cc.disabled).toBeTruthy()
+  aa.value = '123'
+  await sleep(10)
+  expect(bb.visible).toBeTruthy()
+  expect(cc.visible).toBeTruthy()
+  expect(cc.disabled).toBeFalsy()
+})

packages/core/src/__tests__/internals.spec.ts

@@ -1,7 +1,7 @@
 import {
   getValuesFromEvent,
   matchFeedback,
-  applyFieldPatches,
+  patchFieldStates,
   setModelState,
   isHTMLInputEvent,
 } from '../shared/internals'
@@ -19,10 +19,10 @@ test('empty', () => {
   expect(matchFeedback()).toBeFalsy()
 })
 
-test('applyFieldPatches', () => {
+test('patchFieldStates', () => {
   const fields = {}
-  applyFieldPatches(fields, [{ type: 'update', address: 'aaa', payload: null }])
-  applyFieldPatches(fields, [
+  patchFieldStates(fields, [{ type: 'update', address: 'aaa', payload: null }])
+  patchFieldStates(fields, [
     { type: 'update3' as any, address: 'aaa', payload: null },
   ])
   expect(fields).toEqual({})

packages/core/src/models/Field.ts

@@ -2,7 +2,6 @@ import {
   FormPath,
   isValid,
   FormPathPattern,
-  isFn,
   isEmpty,
   toArr,
 } from '@formily/shared'
@@ -16,7 +15,6 @@ import {
   reaction,
   batch,
   toJS,
-  autorun,
   action,
 } from '@formily/reactive'
 import { Form } from './Form'
@@ -48,8 +46,9 @@ import {
   allowAssignDefaultValue,
   queryFeedbackMessages,
   getValuesFromEvent,
-  modelStateSetter,
-  modelStateGetter,
+  createReactions,
+  createStateSetter,
+  createStateGetter,
   isHTMLInputEvent,
   setValidatorRule,
   batchValidate,
@@ -58,7 +57,7 @@ import {
   setValidating,
   setSubmitting,
   setLoading,
-  selfValidate,
+  validateSelf,
   getValidFieldDefaultValue,
 } from '../shared/internals'
 import { Query } from './Query'
@@ -251,7 +250,7 @@ export class Field<
         (value) => {
           this.notify(LifeCycleTypes.ON_FIELD_VALUE_CHANGE)
           if (isValid(value) && this.modified && !this.caches.inputting) {
-            selfValidate(this)
+            validateSelf(this)
           }
         }
       ),
@@ -295,14 +294,7 @@ export class Field<
         }
       )
     )
-    const reactions = toArr(this.props.reactions)
-    this.form.addEffects(this, () => {
-      reactions.forEach((reaction) => {
-        if (isFn(reaction)) {
-          this.disposers.push(autorun(() => reaction(this)))
-        }
-      })
-    })
+    createReactions(this)
   }
 
   get parent() {
@@ -682,9 +674,9 @@ export class Field<
     }
   }
 
-  setState: IModelSetter<IFieldState> = modelStateSetter(this)
+  setState: IModelSetter<IFieldState> = createStateSetter(this)
 
-  getState: IModelGetter<IFieldState> = modelStateGetter(this)
+  getState: IModelGetter<IFieldState> = createStateGetter(this)
 
   onInit = () => {
     this.initialized = true
@@ -718,7 +710,7 @@ export class Field<
     this.form.modified = true
     this.notify(LifeCycleTypes.ON_FIELD_INPUT_VALUE_CHANGE)
     this.notify(LifeCycleTypes.ON_FORM_INPUT_CHANGE, this.form)
-    await selfValidate(this, 'onInput')
+    await validateSelf(this, 'onInput')
     this.caches.inputting = false
   }
 
@@ -728,15 +720,15 @@ export class Field<
     }
     this.active = true
     this.visited = true
-    await selfValidate(this, 'onFocus')
+    await validateSelf(this, 'onFocus')
   }
 
   onBlur = async (...args: any[]) => {
     if (args[0]?.target) {
       if (!isHTMLInputEvent(args[0], false)) return
     }
     this.active = false
-    await selfValidate(this, 'onBlur')
+    await validateSelf(this, 'onBlur')
   }
 
   validate = (triggerType?: ValidatorTriggerType) => {

packages/core/src/models/Form.ts

@@ -35,10 +35,10 @@ import {
   IFormMergeStrategy,
 } from '../types'
 import {
-  modelStateGetter,
-  modelStateSetter,
-  createFieldStateSetter,
-  createFieldStateGetter,
+  createStateGetter,
+  createStateSetter,
+  createBatchStateSetter,
+  createBatchStateGetter,
   triggerFormInitialValuesChange,
   triggerFormValuesChange,
   batchValidate,
@@ -573,17 +573,17 @@ export class Form<ValueType extends object = any> {
     }
   }
 
-  setState: IModelSetter<IFormState<ValueType>> = modelStateSetter(this)
+  setState: IModelSetter<IFormState<ValueType>> = createStateSetter(this)
 
-  getState: IModelGetter<IFormState<ValueType>> = modelStateGetter(this)
+  getState: IModelGetter<IFormState<ValueType>> = createStateGetter(this)
 
-  setFormState: IModelSetter<IFormState<ValueType>> = modelStateSetter(this)
+  setFormState: IModelSetter<IFormState<ValueType>> = createStateSetter(this)
 
-  getFormState: IModelGetter<IFormState<ValueType>> = modelStateGetter(this)
+  getFormState: IModelGetter<IFormState<ValueType>> = createStateGetter(this)
 
-  setFieldState: IFieldStateSetter = createFieldStateSetter(this)
+  setFieldState: IFieldStateSetter = createBatchStateSetter(this)
 
-  getFieldState: IFieldStateGetter = createFieldStateGetter(this)
+  getFieldState: IFieldStateGetter = createBatchStateGetter(this)
 
   getFormGraph = () => {
     return this.graph.getGraph()

packages/core/src/models/VoidField.ts

@@ -1,11 +1,5 @@
-import {
-  FormPath,
-  FormPathPattern,
-  isFn,
-  isValid,
-  toArr,
-} from '@formily/shared'
-import { define, observable, autorun, batch, action } from '@formily/reactive'
+import { FormPath, FormPathPattern, isValid, toArr } from '@formily/shared'
+import { define, observable, batch, action } from '@formily/reactive'
 import {
   JSXComponent,
   LifeCycleTypes,
@@ -21,8 +15,9 @@ import {
 } from '../types'
 import {
   buildNodeIndexes,
-  modelStateGetter,
-  modelStateSetter,
+  createReactions,
+  createStateGetter,
+  createStateSetter,
   initFieldUpdate,
 } from '../shared/internals'
 import { Form } from './Form'
@@ -140,13 +135,7 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
 
   protected makeReactive() {
     if (this.designable) return
-    this.form.addEffects(this, () => {
-      toArr(this.props.reactions).forEach((reaction) => {
-        if (isFn(reaction)) {
-          this.disposers.push(autorun(() => reaction(this)))
-        }
-      })
-    })
+    createReactions(this)
   }
 
   get parent() {
@@ -343,9 +332,9 @@ export class VoidField<Decorator = any, Component = any, TextType = any> {
     }
   }
 
-  setState: IModelSetter<IVoidFieldState> = modelStateSetter(this)
+  setState: IModelSetter<IVoidFieldState> = createStateSetter(this)
 
-  getState: IModelGetter<IVoidFieldState> = modelStateGetter(this)
+  getState: IModelGetter<IVoidFieldState> = createStateGetter(this)
 
   onInit = () => {
     this.initialized = true