fix(react): fix SchemaField missing props scope (#1543)

* fix(react): fix SchemaField missing props scope * test(react): add expression scope unit test
alibaba · Jun 4, 2021 · 2293d4b · 2293d4b
1 parent 4e6d14e
commit 2293d4b
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 5 deletions.
diff --git a/packages/react/src/__tests__/schema.markup.spec.tsx b/packages/react/src/__tests__/schema.markup.spec.tsx
@@ -486,3 +486,70 @@ test('schema reactions', async () => {
     expect(queryByTestId('ccc')).toBeVisible()
   })
 })
+
+test('expression scope', async () => {
+  let aa = false
+  let bb = false
+  let cc = false
+  const form = createForm()
+  const SchemaField = createSchemaField({
+    components: {
+      Input,
+    },
+    scope: {
+      aa() {
+        aa = true
+      },
+    },
+  })
+
+  const scope = {
+    bb() {
+      bb = true
+    },
+    cc() {
+      cc = true
+    },
+  }
+
+  const schema = {
+    type: 'object',
+    properties: {
+      aa: {
+        type: 'string',
+        'x-component': 'Input',
+        'x-reactions': '{{ aa }}',
+      },
+      bb: {
+        type: 'string',
+        'x-component': 'Input',
+        'x-reactions': '{{ bb }}',
+      },
+      cc: {
+        type: 'string',
+        'x-component': 'Input',
+        'x-reactions': {
+          dependencies: ['aa'],
+          fulfill: {
+            run: '{{ cc() }}',
+          },
+        },
+      },
+    },
+  }
+
+  const { queryByTestId } = render(
+    <FormProvider form={form}>
+      <SchemaField schema={schema} scope={scope} />
+    </FormProvider>
+  )
+
+  await waitFor(() => queryByTestId('aa'))
+  expect(aa).toBeTruthy()
+
+  await waitFor(() => queryByTestId('bb'))
+  expect(bb).toBeTruthy()
+
+  await waitFor(() => queryByTestId('cc'))
+  expect(cc).toBeTruthy()
+})
diff --git a/packages/react/src/components/RecursionField.tsx b/packages/react/src/components/RecursionField.tsx
@@ -19,13 +19,10 @@ export const RecursionField: React.FC<IRecursionFieldProps> = (props) => {
   const options = useContext(SchemaOptionsContext)
   const scope = useContext(SchemaExpressionScopeContext)
   const fieldSchema = useMemo(() => {
-    return schema?.compile({
-      ...options.scope,
-      ...scope,
-    })
+    return schema?.compile(scope)
   }, [schema])
   const fieldProps = useMemo(
-    () => fieldSchema?.toFieldProps(options) as any,
+    () => fieldSchema?.toFieldProps({ ...options, scope }) as any,
     [fieldSchema]
   )
   const getBasePath = () => {