fix(next): fix ArrayCards and ArrayTable props (#3701)

* fix(next): fix ArrayCards and ArrayTable props * feat(next): add docs * feat(next): improve code * feat(antd): arraybase
alibaba · Feb 7, 2023 · 0367c51 · 0367c51
1 parent c616bf1
commit 0367c51
Show file tree

Hide file tree

Showing 18 changed files with 284 additions and 113 deletions.
diff --git a/packages/antd/docs/components/ArrayCards.md b/packages/antd/docs/components/ArrayCards.md
@@ -439,7 +439,17 @@ export default () => {
 
 ### ArrayCards
 
-Reference https://ant.design/components/card-cn/
+Extended attributes
+
+| Property name | Type                      | Description     | Default value |
+| ------------- | ------------------------- | --------------- | ------------- |
+| onAdd         | `(index: number) => void` | add method      |               |
+| onRemove      | `(index: number) => void` | remove method   |               |
+| onCopy        | `(index: number) => void` | copy method     |               |
+| onMoveUp      | `(index: number) => void` | moveUp method   |               |
+| onMoveDown    | `(index: number) => void` | moveDown method |               |
+
+Other Reference https://ant.design/components/card-cn/
 
 ### ArrayCards.Addition
 

diff --git a/packages/antd/docs/components/ArrayCards.zh-CN.md b/packages/antd/docs/components/ArrayCards.zh-CN.md
@@ -439,7 +439,17 @@ export default () => {
 
 ### ArrayCards
 
-参考 https://ant.design/components/card-cn/
+扩展属性
+
+| 属性名     | 类型                      | 描述         | 默认值 |
+| ---------- | ------------------------- | ------------ | ------ |
+| onAdd      | `(index: number) => void` | 增加方法     |        |
+| onRemove   | `(index: number) => void` | 删除方法     |        |
+| onCopy     | `(index: number) => void` | 复制方法     |        |
+| onMoveUp   | `(index: number) => void` | 向上移动方法 |        |
+| onMoveDown | `(index: number) => void` | 向下移动方法 |        |
+
+其余参考 https://ant.design/components/card-cn/
 
 ### ArrayCards.Addition
 

diff --git a/packages/antd/docs/components/ArrayItems.md b/packages/antd/docs/components/ArrayItems.md
@@ -702,7 +702,17 @@ export default () => {
 
 ### ArrayItems
 
-Inherit HTMLDivElement Props
+Extended attributes
+
+| Property name | Type                      | Description     | Default value |
+| ------------- | ------------------------- | --------------- | ------------- |
+| onAdd         | `(index: number) => void` | add method      |               |
+| onRemove      | `(index: number) => void` | remove method   |               |
+| onCopy        | `(index: number) => void` | copy method     |               |
+| onMoveUp      | `(index: number) => void` | moveUp method   |               |
+| onMoveDown    | `(index: number) => void` | moveDown method |               |
+
+Other Inherit HTMLDivElement Props
 
 ### ArrayItems.Item
 

diff --git a/packages/antd/docs/components/ArrayItems.zh-CN.md b/packages/antd/docs/components/ArrayItems.zh-CN.md
@@ -703,7 +703,17 @@ export default () => {
 
 ### ArrayItems
 
-继承 HTMLDivElement Props
+扩展属性
+
+| 属性名     | 类型                      | 描述         | 默认值 |
+| ---------- | ------------------------- | ------------ | ------ |
+| onAdd      | `(index: number) => void` | 增加方法     |        |
+| onRemove   | `(index: number) => void` | 删除方法     |        |
+| onCopy     | `(index: number) => void` | 复制方法     |        |
+| onMoveUp   | `(index: number) => void` | 向上移动方法 |        |
+| onMoveDown | `(index: number) => void` | 向下移动方法 |        |
+
+其余继承 HTMLDivElement Props
 
 ### ArrayItems.Item
 

diff --git a/packages/antd/docs/components/ArrayTable.md b/packages/antd/docs/components/ArrayTable.md
@@ -658,7 +658,17 @@ export default () => {
 
 > Form Components
 
-Reference https://ant.design/components/table-cn/
+Extended attributes
+
+| Property name | Type                      | Description     | Default value |
+| ------------- | ------------------------- | --------------- | ------------- |
+| onAdd         | `(index: number) => void` | add method      |               |
+| onRemove      | `(index: number) => void` | remove method   |               |
+| onCopy        | `(index: number) => void` | copy method     |               |
+| onMoveUp      | `(index: number) => void` | moveUp method   |               |
+| onMoveDown    | `(index: number) => void` | moveDown method |               |
+
+Other Reference https://ant.design/components/table-cn/
 
 ### ArrayTable.Column
 

diff --git a/packages/antd/docs/components/ArrayTable.zh-CN.md b/packages/antd/docs/components/ArrayTable.zh-CN.md
@@ -658,7 +658,17 @@ export default () => {
 
 > 表格组件
 
-参考 https://ant.design/components/table-cn/
+扩展属性
+
+| 属性名     | 类型                      | 描述         | 默认值 |
+| ---------- | ------------------------- | ------------ | ------ |
+| onAdd      | `(index: number) => void` | 增加方法     |        |
+| onRemove   | `(index: number) => void` | 删除方法     |        |
+| onCopy     | `(index: number) => void` | 复制方法     |        |
+| onMoveUp   | `(index: number) => void` | 向上移动方法 |        |
+| onMoveDown | `(index: number) => void` | 向下移动方法 |        |
+
+其余参考 https://ant.design/components/table-cn/
 
 ### ArrayTable.Column
 

diff --git a/packages/antd/src/array-cards/index.tsx b/packages/antd/src/array-cards/index.tsx
@@ -11,9 +11,11 @@ import {
 import cls from 'classnames'
 import { ISchema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
-import { ArrayBase, ArrayBaseMixins } from '../array-base'
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from '../array-base'
 
-type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps>> &
+type ComposedArrayCards = React.FC<
+  React.PropsWithChildren<CardProps & IArrayBaseProps>
+> &
   ArrayBaseMixins
 
 const isAdditionComponent = (schema: ISchema) => {
@@ -55,6 +57,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
   const schema = useFieldSchema()
   const dataSource = Array.isArray(field.value) ? field.value : []
   const prefixCls = usePrefixCls('formily-array-cards', props)
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
 
   if (!schema) throw new Error('can not found schema object')
 
@@ -146,7 +149,13 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
   }
 
   return (
-    <ArrayBase>
+    <ArrayBase
+      onAdd={onAdd}
+      onCopy={onCopy}
+      onRemove={onRemove}
+      onMoveUp={onMoveUp}
+      onMoveDown={onMoveDown}
+    >
       {renderEmpty()}
       {renderItems()}
       {renderAddition()}

diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
@@ -16,10 +16,12 @@ import {
 } from 'react-sortable-hoc'
 import { ISchema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
-import { ArrayBase, ArrayBaseMixins } from '../array-base'
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from '../array-base'
 
 type ComposedArrayItems = React.FC<
-  React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>
+  React.PropsWithChildren<
+    React.HTMLAttributes<HTMLDivElement> & IArrayBaseProps
+  >
 > &
   ArrayBaseMixins & {
     Item?: React.FC<
@@ -75,9 +77,16 @@ export const ArrayItems: ComposedArrayItems = observer((props) => {
   const schema = useFieldSchema()
   const addition = useAddition()
   const dataSource = Array.isArray(field.value) ? field.value : []
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
   if (!schema) throw new Error('can not found schema object')
   return (
-    <ArrayBase>
+    <ArrayBase
+      onAdd={onAdd}
+      onCopy={onCopy}
+      onRemove={onRemove}
+      onMoveUp={onMoveUp}
+      onMoveDown={onMoveDown}
+    >
       <div
         {...props}
         onChange={() => {}}

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -24,7 +24,7 @@ import {
 import { isArr, isBool, isFn } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
-import { ArrayBase, ArrayBaseMixins } from '../array-base'
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from '../array-base'
 
 interface ObservableColumnSource {
   field: GeneralField
@@ -45,7 +45,9 @@ interface IStatusSelectProps extends SelectProps<any> {
   pageSize?: number
 }
 
-type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any>>> &
+type ComposedArrayTable = React.FC<
+  React.PropsWithChildren<TableProps<any> & IArrayBaseProps>
+> &
   ArrayBaseMixins & {
     Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>
   }
@@ -289,92 +291,97 @@ const RowComp = (props: any) => {
   return <SortableRow index={props['data-row-key'] || 0} {...props} />
 }
 
-export const ArrayTable: ComposedArrayTable = observer(
-  (props: TableProps<any>) => {
-    const ref = useRef<HTMLDivElement>()
-    const field = useField<ArrayField>()
-    const prefixCls = usePrefixCls('formily-array-table')
-    const dataSource = Array.isArray(field.value) ? field.value.slice() : []
-    const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(dataSource, field, sources)
-    const pagination = isBool(props.pagination) ? {} : props.pagination
-    const addition = useAddition()
-    const defaultRowKey = (record: any) => {
-      return dataSource.indexOf(record)
-    }
-    const addTdStyles = (node: HTMLElement) => {
-      const helper = document.body.querySelector(`.${prefixCls}-sort-helper`)
-      if (helper) {
-        const tds = node.querySelectorAll('td')
-        requestAnimationFrame(() => {
-          helper.querySelectorAll('td').forEach((td, index) => {
-            if (tds[index]) {
-              td.style.width = getComputedStyle(tds[index]).width
-            }
-          })
+export const ArrayTable: ComposedArrayTable = observer((props) => {
+  const ref = useRef<HTMLDivElement>()
+  const field = useField<ArrayField>()
+  const prefixCls = usePrefixCls('formily-array-table')
+  const dataSource = Array.isArray(field.value) ? field.value.slice() : []
+  const sources = useArrayTableSources()
+  const columns = useArrayTableColumns(dataSource, field, sources)
+  const pagination = isBool(props.pagination) ? {} : props.pagination
+  const addition = useAddition()
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props
+  const defaultRowKey = (record: any) => {
+    return dataSource.indexOf(record)
+  }
+  const addTdStyles = (node: HTMLElement) => {
+    const helper = document.body.querySelector(`.${prefixCls}-sort-helper`)
+    if (helper) {
+      const tds = node.querySelectorAll('td')
+      requestAnimationFrame(() => {
+        helper.querySelectorAll('td').forEach((td, index) => {
+          if (tds[index]) {
+            td.style.width = getComputedStyle(tds[index]).width
+          }
         })
-      }
+      })
     }
-    const WrapperComp = useCallback(
-      (props: any) => (
-        <SortableBody
-          useDragHandle
-          lockAxis="y"
-          helperClass={`${prefixCls}-sort-helper`}
-          helperContainer={() => {
-            return ref.current?.querySelector('tbody')
-          }}
-          onSortStart={({ node }) => {
-            addTdStyles(node as HTMLElement)
-          }}
-          onSortEnd={({ oldIndex, newIndex }) => {
-            field.move(oldIndex, newIndex)
-          }}
-          {...props}
-        />
-      ),
-      [field]
-    )
-    return (
-      <ArrayTablePagination {...pagination} dataSource={dataSource}>
-        {(dataSource, pager) => (
-          <div ref={ref} className={prefixCls}>
-            <ArrayBase>
-              <Table
-                size="small"
-                bordered
-                rowKey={defaultRowKey}
-                {...props}
-                onChange={() => {}}
-                pagination={false}
-                columns={columns}
-                dataSource={dataSource}
-                components={{
-                  body: {
-                    wrapper: WrapperComp,
-                    row: RowComp,
-                  },
-                }}
-              />
-              <div style={{ marginTop: 5, marginBottom: 5 }}>{pager}</div>
-              {sources.map((column, key) => {
-                //专门用来承接对Column的状态管理
-                if (!isColumnComponent(column.schema)) return
-                return React.createElement(RecursionField, {
-                  name: column.name,
-                  schema: column.schema,
-                  onlyRenderSelf: true,
-                  key,
-                })
-              })}
-              {addition}
-            </ArrayBase>
-          </div>
-        )}
-      </ArrayTablePagination>
-    )
   }
-)
+  const WrapperComp = useCallback(
+    (props: any) => (
+      <SortableBody
+        useDragHandle
+        lockAxis="y"
+        helperClass={`${prefixCls}-sort-helper`}
+        helperContainer={() => {
+          return ref.current?.querySelector('tbody')
+        }}
+        onSortStart={({ node }) => {
+          addTdStyles(node as HTMLElement)
+        }}
+        onSortEnd={({ oldIndex, newIndex }) => {
+          field.move(oldIndex, newIndex)
+        }}
+        {...props}
+      />
+    ),
+    [field]
+  )
+  return (
+    <ArrayTablePagination {...pagination} dataSource={dataSource}>
+      {(dataSource, pager) => (
+        <div ref={ref} className={prefixCls}>
+          <ArrayBase
+            onAdd={onAdd}
+            onCopy={onCopy}
+            onRemove={onRemove}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+          >
+            <Table
+              size="small"
+              bordered
+              rowKey={defaultRowKey}
+              {...props}
+              onChange={() => {}}
+              pagination={false}
+              columns={columns}
+              dataSource={dataSource}
+              components={{
+                body: {
+                  wrapper: WrapperComp,
+                  row: RowComp,
+                },
+              }}
+            />
+            <div style={{ marginTop: 5, marginBottom: 5 }}>{pager}</div>
+            {sources.map((column, key) => {
+              //专门用来承接对Column的状态管理
+              if (!isColumnComponent(column.schema)) return
+              return React.createElement(RecursionField, {
+                name: column.name,
+                schema: column.schema,
+                onlyRenderSelf: true,
+                key,
+              })
+            })}
+            {addition}
+          </ArrayBase>
+        </div>
+      )}
+    </ArrayTablePagination>
+  )
+})
 
 ArrayTable.displayName = 'ArrayTable'