fix(@uform/react): fix field dynamic hidden will effect other field.

When the virtual box without name is hidden in the dynamic display, it will affect the dynamic hiding of the adjacent virtual box.
alibaba · Apr 23, 2019 · 97bb44d · 97bb44d
1 parent 7d54dcb
commit 97bb44d
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 18 deletions.
diff --git a/packages/core/src/field.js b/packages/core/src/field.js
@@ -184,6 +184,12 @@ export class Field {
     this.notify()
   }
 
+  restore() {
+    if (this.removed) {
+      this.visible = true
+    }
+  }
+
   remove() {
     this.value = undefined
     this.visible = false

diff --git a/packages/core/src/form.js b/packages/core/src/form.js
@@ -382,13 +382,6 @@ export class Form {
     }
   }
 
-  removeField(name) {
-    const field = this.fields[name]
-    if (field) {
-      field.remove()
-    }
-  }
-
   setErrors(name, errors, ...args) {
     errors = toArr(errors)
     const field = this.fields[name]

diff --git a/packages/react/src/__tests__/validate.spec.js b/packages/react/src/__tests__/validate.spec.js
@@ -58,8 +58,10 @@ test('validate in init', async () => {
   const TestComponent = () => {
     const [state, setState] = useState()
     useEffect(() => {
-      setState({
-        text: ''
+      act(() => {
+        setState({
+          text: ''
+        })
       })
     }, [])
     return (
@@ -96,8 +98,10 @@ test('validate in editable false', async () => {
   const TestComponent = () => {
     const [state, setState] = useState()
     useEffect(() => {
-      setState({
-        editable: ''
+      act(() => {
+        setState({
+          editable: ''
+        })
       })
     }, [])
     return (
@@ -210,9 +214,9 @@ test('modify validate rules by setFieldState', async () => {
   const { queryByText, queryAllByText, queryByTestId } = render(
     <TestComponent />
   )
-  await sleep(33)
+  await sleep(100)
   fireEvent.click(queryAllByText('Submit')[1])
-  await sleep(33)
+  await sleep(100)
   expect(queryByText('required')).toBeVisible()
   actions.setFieldState('bb', state => {
     state.rules = [
@@ -223,11 +227,11 @@ test('modify validate rules by setFieldState', async () => {
       }
     ]
   })
-  await sleep(33)
+  await sleep(100)
   fireEvent.change(queryByTestId('test-input'), {
     target: { value: '123' }
   })
-  await sleep(33)
+  await sleep(100)
   expect(queryByText('must have 6 numbers')).toBeVisible()
 })
 

diff --git a/packages/react/src/__tests__/virtualbox.spec.js b/packages/react/src/__tests__/virtualbox.spec.js
@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SchemaForm, {
   Field,
   registerFormField,
   createVirtualBox,
   connect,
   registerFieldMiddleware
 } from '../index'
-import { render } from 'react-testing-library'
+import { render, fireEvent, act } from 'react-testing-library'
 
 let FormCard
 
@@ -33,6 +33,10 @@ beforeEach(() => {
     'string',
     connect()(props => <input {...props} value={props.value || ''} />)
   )
+  registerFormField(
+    'text',
+    connect()(props => <div>This is Text Component</div>)
+  )
   FormCard = createVirtualBox('card', ({ children }) => {
     return <div>card content{children}</div>
   })
@@ -55,3 +59,37 @@ test('createVirtualBox', async () => {
   await sleep(100)
   expect(queryByText('card content')).toBeVisible()
 })
+
+test('dynamic node', async () => {
+  const TestComponent = () => {
+    const [editable, setEditable] = useState(false)
+    return (
+      <SchemaForm editable={editable}>
+        {editable && (
+          <FormCard>
+            <Field name='aaa' type='string' />
+          </FormCard>
+        )}
+        <FormCard>
+          <Field name='bbb' type='text' />
+        </FormCard>
+        <button
+          onClick={() => {
+            act(() => {
+              setEditable(true)
+            })
+          }}
+        >
+          Change Editable
+        </button>
+      </SchemaForm>
+    )
+  }
+
+  const { queryAllByText, queryByText } = render(<TestComponent />)
+
+  await sleep(33)
+  fireEvent.click(queryAllByText('Change Editable')[1])
+  await sleep(100)
+  expect(queryByText('This is Text Component')).toBeVisible()
+})
diff --git a/packages/react/src/state/field.js b/packages/react/src/state/field.js
@@ -47,8 +47,12 @@ const StateField = createHOC((options, Field) => {
       this.field.remove()
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidMount() {
       this.unmounted = false
+      this.field.restore()
+    }
+
+    componentDidUpdate(prevProps) {
       if (!isEqual(this.props.schema, prevProps.schema, filterSchema)) {
         this.field.changeProps(this.props.schema)
       }