fix(uform/core): recover field visible/display state after parent cha…

…nged (#567)
alibaba · Dec 31, 2019 · d270ef7 · d270ef7
1 parent e9c4c9d
commit d270ef7
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/packages/core/src/__tests__/index.spec.ts b/packages/core/src/__tests__/index.spec.ts
@@ -411,9 +411,9 @@ describe('clearErrors', () => {
     expect(form.getFormState(state => state.errors)).toEqual([])
   })
 
-  test('wildcard path', async () => {})
+  test('wildcard path', async () => { })
 
-  test('effect', async () => {})
+  test('effect', async () => { })
 })
 
 describe('validate', () => {
@@ -443,7 +443,7 @@ describe('validate', () => {
 
     try {
       await form.submit()
-    } catch (e) {}
+    } catch (e) { }
     expect(onValidateFailedTrigger).toBeCalledTimes(1)
   })
 
@@ -467,7 +467,7 @@ describe('validate', () => {
     }) // CustomValidator error
     try {
       await form.submit()
-    } catch (e) {}
+    } catch (e) { }
     expect(onValidateFailedTrigger).toBeCalledTimes(1)
   })
 
@@ -951,6 +951,40 @@ describe('setFieldState', () => {
     )
     expect(form.getFieldState('a', state => state.editable)).toEqual(false)
   })
+
+  test('set visible', async () => {
+    const form = createForm()
+    form.registerVirtualField({ path: 'a' })
+    form.registerField({ path: 'a.a1', visible: false })
+    form.registerField({ path: 'a.a2' })
+
+    form.setFieldState('a', state => (state.visible = false))
+    expect(form.getFieldState('a', state => state.visible)).toEqual(false)
+    expect(form.getFieldState('a.a1', state => state.visible)).toEqual(false)
+    expect(form.getFieldState('a.a2', state => state.visible)).toEqual(false)
+
+    form.setFieldState('a', state => (state.visible = true))
+    expect(form.getFieldState('a', state => state.visible)).toEqual(true)
+    expect(form.getFieldState('a.a1', state => state.visible)).toEqual(false)
+    expect(form.getFieldState('a.a2', state => state.visible)).toEqual(true)
+  })
+
+  test('set display', async () => {
+    const form = createForm()
+    form.registerField({ path: 'a' })
+    form.registerField({ path: 'a.a1', display: false })
+    form.registerField({ path: 'a.a2' })
+
+    form.setFieldState('a', state => (state.display = false))
+    expect(form.getFieldState('a', state => state.display)).toEqual(false)
+    expect(form.getFieldState('a.a1', state => state.display)).toEqual(false)
+    expect(form.getFieldState('a.a2', state => state.display)).toEqual(false)
+
+    form.setFieldState('a', state => (state.display = true))
+    expect(form.getFieldState('a', state => state.display)).toEqual(true)
+    expect(form.getFieldState('a.a1', state => state.display)).toEqual(false)
+    expect(form.getFieldState('a.a2', state => state.display)).toEqual(true)
+  })
 })
 
 describe('getFieldState', () => {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -168,6 +168,35 @@ export function createForm<FieldProps, VirtualFieldProps>(
     }
   }
 
+  function updateRecoverableShownState(
+    parentState:
+      | IVirtualFieldState<VirtualFieldProps>
+      | IFieldState<FieldProps>,
+    childState: IVirtualFieldState<VirtualFieldProps> | IFieldState<FieldProps>,
+    name: 'visible' | 'display'
+  ) {
+    const lastShownState = env.lastShownStates[childState.path]
+    const lastStateValue = childState[name]
+    if (parentState[name] && lastShownState && lastShownState[name] === false) {
+      childState[name] = false
+      delete lastShownState[name]
+      if (
+        !lastShownState.hasOwnProperty('visible') &&
+        !lastShownState.hasOwnProperty('display')
+      ) {
+        delete env.lastShownStates[childState.path]
+      }
+    } else {
+      childState[name] = parentState[name]
+    }
+    if (!parentState[name] && !lastStateValue) {
+      if (!lastShownState) {
+        env.lastShownStates[childState.path] = {}
+      }
+      env.lastShownStates[childState.path][name] = false
+    }
+  }
+
   function onFieldChange({ field, path }) {
     return (published: IFieldState<FieldProps>) => {
       const valueChanged = field.isDirty('value')
@@ -214,10 +243,10 @@ export function createForm<FieldProps, VirtualFieldProps>(
         graph.eachChildren(path, childState => {
           childState.setState((state: IFieldState<FieldProps>) => {
             if (visibleChanged) {
-              state.visible = published.visible
+              updateRecoverableShownState(published, state, 'visible')
             }
             if (displayChanged) {
-              state.display = published.display
+              updateRecoverableShownState(published, state, 'display')
             }
           }, true)
         })
@@ -263,9 +292,9 @@ export function createForm<FieldProps, VirtualFieldProps>(
       const visibleChanged = field.isDirty('visible')
       const displayChanged = field.isDirty('display')
       const mountedChanged = field.isDirty('mounted')
-      const initializedChnaged = field.isDirty('initialized')
+      const initializedChanged = field.isDirty('initialized')
 
-      if (initializedChnaged) {
+      if (initializedChanged) {
         heart.publish(LifeCycleTypes.ON_FIELD_INIT, field)
       }
 
@@ -274,10 +303,10 @@ export function createForm<FieldProps, VirtualFieldProps>(
           childState.setState(
             (state: IVirtualFieldState<VirtualFieldProps>) => {
               if (visibleChanged) {
-                state.visible = published.visible
+                updateRecoverableShownState(published, state, 'visible')
               }
               if (displayChanged) {
-                state.display = published.display
+                updateRecoverableShownState(published, state, 'display')
               }
             },
             true
@@ -1165,6 +1194,7 @@ export function createForm<FieldProps, VirtualFieldProps>(
     userUpdateFields: [],
     taskIndexes: {},
     removeNodes: {},
+    lastShownStates: {},
     submittingTask: undefined
   }
   heart.publish(LifeCycleTypes.ON_FORM_WILL_INIT, state)

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "camel-case": "^3.0.0",
-    "cool-path": "^0.1.18",
+    "cool-path": "^0.1.19",
     "deepmerge": "^4.0.0"
   }
 }