feat(react): fix schema x-component-props children invalid (#2160)

alibaba · Sep 17, 2021 · 7dc9d9f · 7dc9d9f
1 parent 12dacdc
commit 7dc9d9f
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 1 deletion.
diff --git a/packages/react/src/__tests__/schema.json.spec.tsx b/packages/react/src/__tests__/schema.json.spec.tsx
@@ -58,4 +58,66 @@ describe('json schema field', () => {
     )
     expect(queryByTestId('input')).toBeVisible()
   })
+  test('x-component-props children', () => {
+    const form = createForm()
+    const Text: React.FC = ({ children }) => {
+      return <div data-testid="children-test">{children}</div>
+    }
+    const SchemaField = createSchemaField({
+      components: {
+        Text,
+      },
+    })
+    const { queryByTestId } = render(
+      <FormProvider form={form}>
+        <SchemaField
+          name="object"
+          schema={{
+            type: 'object',
+            properties: {
+              string: {
+                type: 'string',
+                'x-component': 'Text',
+                'x-component-props': {
+                  children: 'children',
+                },
+              },
+            },
+          }}
+        />
+      </FormProvider>
+    )
+    expect(queryByTestId('children-test')).toBeVisible()
+    expect(queryByTestId('children-test').innerHTML).toEqual('children')
+  })
+  test('x-content', async () => {
+    const form = createForm()
+    const Text: React.FC = ({ children }) => {
+      return <div data-testid="content-test">{children}</div>
+    }
+    const SchemaField = createSchemaField({
+      components: {
+        Text,
+      },
+    })
+    const { queryByTestId } = render(
+      <FormProvider form={form}>
+        <SchemaField
+          name="object"
+          schema={{
+            type: 'object',
+            properties: {
+              string: {
+                type: 'string',
+                'x-component': 'Text',
+                'x-content': 'content',
+              },
+            },
+          }}
+        />
+      </FormProvider>
+    )
+    expect(queryByTestId('content-test')).toBeVisible()
+    expect(queryByTestId('content-test').innerHTML).toEqual('content')
+  })
 })
diff --git a/packages/react/src/__tests__/schema.markup.spec.tsx b/packages/react/src/__tests__/schema.markup.spec.tsx
@@ -176,6 +176,49 @@ describe('markup schema field', () => {
       </FormProvider>
     )
   })
+  test('props children', () => {
+    const form = createForm()
+    const Text: React.FC = (props) => {
+      return <div data-testid="children-test">{props.children}</div>
+    }
+    const SchemaField = createSchemaField({
+      components: {
+        Text,
+      },
+    })
+    const { queryByTestId } = render(
+      <FormProvider form={form}>
+        <SchemaField>
+          <SchemaField.Void
+            x-component="Text"
+            x-component-props={{ children: 'props' }}
+          />
+        </SchemaField>
+      </FormProvider>
+    )
+    expect(queryByTestId('children-test')).toBeVisible()
+    expect(queryByTestId('children-test').innerHTML).toEqual('props')
+  })
+  test('x-content', () => {
+    const form = createForm()
+    const Text: React.FC = (props) => {
+      return <div data-testid="content-test">{props.children}</div>
+    }
+    const SchemaField = createSchemaField({
+      components: {
+        Text,
+      },
+    })
+    const { queryByTestId } = render(
+      <FormProvider form={form}>
+        <SchemaField>
+          <SchemaField.Void x-component="Text" x-content="content" />
+        </SchemaField>
+      </FormProvider>
+    )
+    expect(queryByTestId('content-test')).toBeVisible()
+    expect(queryByTestId('content-test').innerHTML).toEqual('content')
+  })
 })
 
 describe('recursion field', () => {

diff --git a/packages/react/src/components/ReactiveField.tsx b/packages/react/src/components/ReactiveField.tsx
@@ -32,7 +32,7 @@ const ReactiveInternal: React.FC<IReactiveFieldProps> = (props) => {
   const field = props.field
   const content = mergeChildren(
     renderChildren(props.children, field, field.form),
-    field.content
+    field.content ?? field.component[1].children
   )
   if (field.display !== 'visible') return null