fix(next/antd): fix Pure JSX bug in SelectTable (#2930)

alibaba · Mar 14, 2022 · 2883c33 · 2883c33
1 parent bef5c71
commit 2883c33
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 9 deletions.
diff --git a/packages/antd/docs/components/SelectTable.md b/packages/antd/docs/components/SelectTable.md
@@ -281,9 +281,6 @@ export default () => {
           name="selectTable3"
           x-decorator="FormItem"
           x-component="SelectTable"
-          x-component-props={{
-            hasBorder: false,
-          }}
           default={['1', '3']}
           enum={[
             { key: '1', name: 'title-1', description: 'description-1' },
@@ -597,6 +594,42 @@ export default () => (
 )
 ```
 
+## Pure JSX case
+
+```tsx
+import React from 'react'
+import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
+import { createForm } from '@formily/core'
+import { FormProvider, Field } from '@formily/react'
+
+const form = createForm()
+
+export default () => (
+  <FormProvider form={form}>
+    <Field
+      name="SelectTable"
+      dataSource={[
+        { key: '1', name: 'title-1', description: 'description-1' },
+        { key: '2', name: 'title-2', description: 'description-2' },
+      ]}
+      decorator={[FormItem]}
+      component={[
+        SelectTable,
+        {
+          columns: [
+            { dataIndex: 'name', title: 'Title' },
+            { dataIndex: 'description', title: 'Description' },
+          ],
+        },
+      ]}
+    />
+    <FormButtonGroup>
+      <Submit onSubmit={console.log}>Submit</Submit>
+    </FormButtonGroup>
+  </FormProvider>
+)
+```
+
 ## API
 
 ### SelectTable

diff --git a/packages/antd/docs/components/SelectTable.zh-CN.md b/packages/antd/docs/components/SelectTable.zh-CN.md
@@ -281,9 +281,6 @@ export default () => {
           name="selectTable3"
           x-decorator="FormItem"
           x-component="SelectTable"
-          x-component-props={{
-            hasBorder: false,
-          }}
           default={['1', '3']}
           enum={[
             { key: '1', name: '标题1', description: '描述1' },
@@ -593,6 +590,42 @@ export default () => (
 )
 ```
 
+## 纯 JSX 案例
+
+```tsx
+import React from 'react'
+import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
+import { createForm } from '@formily/core'
+import { FormProvider, Field } from '@formily/react'
+
+const form = createForm()
+
+export default () => (
+  <FormProvider form={form}>
+    <Field
+      name="SelectTable"
+      dataSource={[
+        { key: '1', name: '标题1', description: '描述1' },
+        { key: '2', name: '标题2', description: '描述2' },
+      ]}
+      decorator={[FormItem]}
+      component={[
+        SelectTable,
+        {
+          columns: [
+            { dataIndex: 'name', title: '标题' },
+            { dataIndex: 'description', title: '描述' },
+          ],
+        },
+      ]}
+    />
+    <FormButtonGroup>
+      <Submit onSubmit={console.log}>提交</Submit>
+    </FormButtonGroup>
+  </FormProvider>
+)
+```
+
 ## API
 
 ### SelectTable

diff --git a/packages/antd/src/select-table/index.tsx b/packages/antd/src/select-table/index.tsx
@@ -50,7 +50,7 @@ const useColumns = () => {
   const schema = useFieldSchema()
   const columns: ISelectTableColumnProps[] = []
   const validSchema = (
-    schema.type === 'array' && schema?.items ? schema.items : schema
+    schema?.type === 'array' && schema?.items ? schema.items : schema
   ) as Schema
 
   validSchema?.mapProperties((schema, name) => {
@@ -284,7 +284,6 @@ export const SelectTable: ComposedSelectTable = observer((props) => {
                       },
                     }),
                 selectedRowKeys: selected,
-                // onChange: onInnerChange,
                 onChange:
                   rowSelection?.checkStrictly !== false
                     ? onInnerChange

diff --git a/packages/next/docs/components/SelectTable.md b/packages/next/docs/components/SelectTable.md
@@ -602,6 +602,43 @@ export default () => (
 )
 ```
 
+## Pure JSX case
+
+```tsx
+import React from 'react'
+import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
+import { createForm } from '@formily/core'
+import { FormProvider, Field } from '@formily/react'
+
+const form = createForm()
+
+export default () => (
+  <FormProvider form={form}>
+    <Field
+      name="SelectTable"
+      dataSource={[
+        { key: '1', name: 'title-1', description: 'description-1' },
+        { key: '2', name: 'title-2', description: 'description-2' },
+      ]}
+      decorator={[FormItem]}
+      component={[
+        SelectTable,
+        {
+          hasBorder: false,
+          columns: [
+            { dataIndex: 'name', title: 'Title' },
+            { dataIndex: 'description', title: 'Description' },
+          ],
+        },
+      ]}
+    />
+    <FormButtonGroup>
+      <Submit onSubmit={console.log}>Submit</Submit>
+    </FormButtonGroup>
+  </FormProvider>
+)
+```
+
 ## API
 
 ### SelectTable

diff --git a/packages/next/docs/components/SelectTable.zh-CN.md b/packages/next/docs/components/SelectTable.zh-CN.md
@@ -598,6 +598,43 @@ export default () => (
 )
 ```
 
+## 纯 JSX 案例
+
+```tsx
+import React from 'react'
+import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
+import { createForm } from '@formily/core'
+import { FormProvider, Field } from '@formily/react'
+
+const form = createForm()
+
+export default () => (
+  <FormProvider form={form}>
+    <Field
+      name="SelectTable"
+      dataSource={[
+        { key: '1', name: '标题1', description: '描述1' },
+        { key: '2', name: '标题2', description: '描述2' },
+      ]}
+      decorator={[FormItem]}
+      component={[
+        SelectTable,
+        {
+          hasBorder: false,
+          columns: [
+            { dataIndex: 'name', title: '标题' },
+            { dataIndex: 'description', title: '描述' },
+          ],
+        },
+      ]}
+    />
+    <FormButtonGroup>
+      <Submit onSubmit={console.log}>提交</Submit>
+    </FormButtonGroup>
+  </FormProvider>
+)
+```
+
 ## API
 
 ### SelectTable

diff --git a/packages/next/src/select-table/index.tsx b/packages/next/src/select-table/index.tsx
@@ -52,7 +52,7 @@ const useColumns = () => {
   const schema = useFieldSchema()
   const columns: ISelectTableColumnProps[] = []
   const validSchema = (
-    schema.type === 'array' && schema?.items ? schema.items : schema
+    schema?.type === 'array' && schema?.items ? schema.items : schema
   ) as Schema
 
   validSchema?.mapProperties((schema, name) => {