diff --git a/packages/antd/docs/components/ArrayCards.md b/packages/antd/docs/components/ArrayCards.md index 6261de2e3d1..ab102e0e821 100644 --- 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 index adf995eb402..1d3ff412d57 100644 --- 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 index 2b03e2c39a9..fff029c31af 100644 --- 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 index 39a5c778ded..0ae683af81b 100644 --- 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 index 3acf4dd7f3a..d5476fe7c10 100644 --- 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 index 4b231652efa..2c73dbaadce 100644 --- 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 index 60877d84f95..27a7963b401 100644 --- 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> & +type ComposedArrayCards = React.FC< + React.PropsWithChildren +> & 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 ( - + {renderEmpty()} {renderItems()} {renderAddition()} diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx index a6f4afac02d..fe07951e3a1 100644 --- 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.PropsWithChildren< + React.HTMLAttributes & 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 ( - +
{}} diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx index 5a0c4410530..f464d2ab3cc 100644 --- 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 { pageSize?: number } -type ComposedArrayTable = React.FC>> & +type ComposedArrayTable = React.FC< + React.PropsWithChildren & IArrayBaseProps> +> & ArrayBaseMixins & { Column?: React.FC>> } @@ -289,92 +291,97 @@ const RowComp = (props: any) => { return } -export const ArrayTable: ComposedArrayTable = observer( - (props: TableProps) => { - const ref = useRef() - const field = useField() - 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() + const field = useField() + 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) => ( - { - return ref.current?.querySelector('tbody') - }} - onSortStart={({ node }) => { - addTdStyles(node as HTMLElement) - }} - onSortEnd={({ oldIndex, newIndex }) => { - field.move(oldIndex, newIndex) - }} - {...props} - /> - ), - [field] - ) - return ( - - {(dataSource, pager) => ( -
- - {}} - pagination={false} - columns={columns} - dataSource={dataSource} - components={{ - body: { - wrapper: WrapperComp, - row: RowComp, - }, - }} - /> -
{pager}
- {sources.map((column, key) => { - //专门用来承接对Column的状态管理 - if (!isColumnComponent(column.schema)) return - return React.createElement(RecursionField, { - name: column.name, - schema: column.schema, - onlyRenderSelf: true, - key, - }) - })} - {addition} - - - )} - - ) } -) + const WrapperComp = useCallback( + (props: any) => ( + { + return ref.current?.querySelector('tbody') + }} + onSortStart={({ node }) => { + addTdStyles(node as HTMLElement) + }} + onSortEnd={({ oldIndex, newIndex }) => { + field.move(oldIndex, newIndex) + }} + {...props} + /> + ), + [field] + ) + return ( + + {(dataSource, pager) => ( +
+ +
{}} + pagination={false} + columns={columns} + dataSource={dataSource} + components={{ + body: { + wrapper: WrapperComp, + row: RowComp, + }, + }} + /> +
{pager}
+ {sources.map((column, key) => { + //专门用来承接对Column的状态管理 + if (!isColumnComponent(column.schema)) return + return React.createElement(RecursionField, { + name: column.name, + schema: column.schema, + onlyRenderSelf: true, + key, + }) + })} + {addition} + + + )} + + ) +}) ArrayTable.displayName = 'ArrayTable' diff --git a/packages/next/docs/components/ArrayCards.md b/packages/next/docs/components/ArrayCards.md index eb256a246c4..045870dbb20 100644 --- a/packages/next/docs/components/ArrayCards.md +++ b/packages/next/docs/components/ArrayCards.md @@ -439,7 +439,17 @@ export default () => { ### ArrayCards -Reference https://fusion.design/pc/component/basic/card +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://fusion.design/pc/component/basic/card ### ArrayCards.Addition diff --git a/packages/next/docs/components/ArrayCards.zh-CN.md b/packages/next/docs/components/ArrayCards.zh-CN.md index 6bd71010129..34a8bac2009 100644 --- a/packages/next/docs/components/ArrayCards.zh-CN.md +++ b/packages/next/docs/components/ArrayCards.zh-CN.md @@ -439,7 +439,17 @@ export default () => { ### ArrayCards -参考 https://fusion.design/pc/component/basic/card +扩展属性 + +| 属性名 | 类型 | 描述 | 默认值 | +| ---------- | ------------------------- | ------------ | ------ | +| onAdd | `(index: number) => void` | 增加方法 | | +| onRemove | `(index: number) => void` | 删除方法 | | +| onCopy | `(index: number) => void` | 复制方法 | | +| onMoveUp | `(index: number) => void` | 向上移动方法 | | +| onMoveDown | `(index: number) => void` | 向下移动方法 | | + +其余参考 https://fusion.design/pc/component/basic/card ### ArrayCards.Addition diff --git a/packages/next/docs/components/ArrayItems.md b/packages/next/docs/components/ArrayItems.md index 17dbb84ce26..0b6d1dd1a30 100644 --- a/packages/next/docs/components/ArrayItems.md +++ b/packages/next/docs/components/ArrayItems.md @@ -706,7 +706,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/next/docs/components/ArrayItems.zh-CN.md b/packages/next/docs/components/ArrayItems.zh-CN.md index 8e6a596eca0..6f2dbdfa2ef 100644 --- a/packages/next/docs/components/ArrayItems.zh-CN.md +++ b/packages/next/docs/components/ArrayItems.zh-CN.md @@ -700,7 +700,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/next/docs/components/ArrayTable.md b/packages/next/docs/components/ArrayTable.md index 3e6e7c8e58a..66159677e8f 100644 --- a/packages/next/docs/components/ArrayTable.md +++ b/packages/next/docs/components/ArrayTable.md @@ -673,7 +673,17 @@ export default () => { > Form Components -Reference https://fusion.design/pc/component/basic/table +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://fusion.design/pc/component/basic/table ### ArrayTable.Column diff --git a/packages/next/docs/components/ArrayTable.zh-CN.md b/packages/next/docs/components/ArrayTable.zh-CN.md index b60a85cc533..aac13d550a0 100644 --- a/packages/next/docs/components/ArrayTable.zh-CN.md +++ b/packages/next/docs/components/ArrayTable.zh-CN.md @@ -671,7 +671,17 @@ export default () => { > 表格组件 -参考 https://fusion.design/pc/component/basic/table +扩展属性 + +| 属性名 | 类型 | 描述 | 默认值 | +| ---------- | ------------------------- | ------------ | ------ | +| onAdd | `(index: number) => void` | 增加方法 | | +| onRemove | `(index: number) => void` | 删除方法 | | +| onCopy | `(index: number) => void` | 复制方法 | | +| onMoveUp | `(index: number) => void` | 向上移动方法 | | +| onMoveDown | `(index: number) => void` | 向下移动方法 | | + +其余参考 https://fusion.design/pc/component/basic/table ### ArrayTable.Column diff --git a/packages/next/src/array-cards/index.tsx b/packages/next/src/array-cards/index.tsx index 0c73fcb5ae5..0e68f420e9c 100644 --- a/packages/next/src/array-cards/index.tsx +++ b/packages/next/src/array-cards/index.tsx @@ -10,10 +10,12 @@ import { } from '@formily/react' import { ISchema } from '@formily/json-schema' import { usePrefixCls } from '../__builtins__' -import { ArrayBase, ArrayBaseMixins } from '../array-base' +import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from '../array-base' import cls from 'classnames' -type ComposedArrayCards = React.FC> & +type ComposedArrayCards = React.FC< + React.PropsWithChildren +> & ArrayBaseMixins const isAdditionComponent = (schema: ISchema) => { @@ -111,6 +113,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 const renderItems = () => { return dataSource?.map((item, index) => { const items = Array.isArray(schema.items) @@ -201,7 +204,13 @@ export const ArrayCards: ComposedArrayCards = observer((props) => { } return ( - + {renderEmpty()} {renderItems()} {renderAddition()} diff --git a/packages/next/src/array-items/index.tsx b/packages/next/src/array-items/index.tsx index adb7621a020..1fc61cbf6c3 100644 --- a/packages/next/src/array-items/index.tsx +++ b/packages/next/src/array-items/index.tsx @@ -15,10 +15,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.PropsWithChildren< + React.HTMLAttributes & IArrayBaseProps + > > & ArrayBaseMixins & { Item?: React.FC< @@ -75,9 +77,16 @@ export const ArrayItems: ComposedArrayItems = observer((props) => { const prefixCls = usePrefixCls('formily-array-items') const schema = useFieldSchema() const addition = useAddition() + const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props const dataSource = Array.isArray(field.value) ? field.value : [] return ( - +
{}} diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx index d18879a9778..8ae4650410a 100644 --- a/packages/next/src/array-table/index.tsx +++ b/packages/next/src/array-table/index.tsx @@ -22,7 +22,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 @@ -44,9 +44,10 @@ interface IStatusSelectProps extends SelectProps { pageSize?: number } -export interface ExtendTableProps extends TableProps { +export type ExtendTableProps = { pagination?: PaginationProps -} +} & IArrayBaseProps & + TableProps type ComposedArrayTable = ReactFC & ArrayBaseMixins & { @@ -302,13 +303,20 @@ export const ArrayTable: ComposedArrayTable = observer( const sources = useArrayTableSources() const columns = useArrayTableColumns(dataSource, field, sources) const pagination = isBool(props.pagination) ? {} : props.pagination + const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props const addition = useAddition() return ( {(dataSource, pager) => (
- +