fix(@uform/react): fix schema properties can not update when rerender (…

…#220)
alibaba · Aug 2, 2019 · 4a6f4dc · 4a6f4dc
1 parent b9efa4c
commit 4a6f4dc
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/packages/react/src/__tests__/virtualbox.spec.js b/packages/react/src/__tests__/virtualbox.spec.js
@@ -33,6 +33,7 @@ registerFormField(
   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>
 })
@@ -88,3 +89,69 @@ test('dynamic node', async () => {
   await sleep(33)
   expect(queryByText('This is Text Component')).toBeVisible()
 })
+
+test('dynamic schema', async () => {
+  const TestComponent = () => {
+    const [schema, setSchema] = useState({
+      type: 'object',
+      properties: {
+        card: {
+          type: 'object',
+          'x-component': 'card',
+          properties: {
+            aa: {
+              type: 'string',
+              'x-props': {
+                'data-testid': 'aa'
+              }
+            },
+            bb: {
+              type: 'string',
+              'x-props': {
+                'data-testid': 'bb'
+              }
+            }
+          }
+        }
+      }
+    })
+
+    const deleteProperty = () =>
+      setSchema({
+        type: 'object',
+        properties: {
+          card: {
+            type: 'object',
+            'x-component': 'card',
+            properties: {
+              aa: {
+                type: 'string',
+                'x-props': {
+                  'data-testid': 'aa',
+                  disabled: true
+                }
+              }
+              // bb deleted
+            }
+          }
+        }
+      })
+    return (
+      <div>
+        <SchemaForm schema={schema} />
+        <button onClick={deleteProperty}>Delete</button>
+      </div>
+    )
+  }
+
+  const { queryByText, queryByTestId, baseElement } = render(<TestComponent />)
+
+  await sleep(33)
+  act(() => {
+    fireEvent.click(queryByText('Delete'))
+  })
+  await sleep(33)
+  expect(queryByTestId('aa').hasAttribute('disabled')).toBe(true)
+  expect(queryByTestId('aa')).toBeVisible()
+  expect(queryByTestId('bb')).toBeNull()
+})
diff --git a/packages/react/src/state/field.tsx b/packages/react/src/state/field.tsx
@@ -116,6 +116,7 @@ const StateField = createHOC((options, Field) => {
         path,
         schemaPath,
         broadcast,
+        schema,
         form,
         locale,
         getSchema
@@ -135,6 +136,12 @@ const StateField = createHOC((options, Field) => {
         : schemaIs(props, 'array')
         ? value || []
         : value
+      //todo: 重置schema children，这里有点恶心，后面重构的时候需要想下怎么重置更合适
+      if (schema.properties) {
+        props.properties = schema.properties
+      } else if (schema.items) {
+        props.items = schema.items
+      }
       return visible === false || display === false ? (
         <React.Fragment />
       ) : (