diff --git a/packages/antd/docs/components/ArrayCards.md b/packages/antd/docs/components/ArrayCards.md
index ab102e0e821..2527a1d144d 100644
--- a/packages/antd/docs/components/ArrayCards.md
+++ b/packages/antd/docs/components/ArrayCards.md
@@ -467,6 +467,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCards.Copy
> Copy button
@@ -482,6 +484,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCards.Remove
> Delete button
@@ -494,6 +498,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCards.MoveDown
> Move down button
@@ -506,6 +512,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCards.MoveUp
> Move up button
@@ -518,6 +526,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCards.Index
> Index Renderer
diff --git a/packages/antd/docs/components/ArrayCards.zh-CN.md b/packages/antd/docs/components/ArrayCards.zh-CN.md
index 1d3ff412d57..dd6821959df 100644
--- a/packages/antd/docs/components/ArrayCards.zh-CN.md
+++ b/packages/antd/docs/components/ArrayCards.zh-CN.md
@@ -467,6 +467,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCards.Copy
> 复制按钮
@@ -482,6 +484,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCards.Remove
> 删除按钮
@@ -494,6 +498,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCards.MoveDown
> 下移按钮
@@ -506,6 +512,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCards.MoveUp
> 上移按钮
@@ -518,6 +526,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCards.Index
> 索引渲染器
diff --git a/packages/antd/docs/components/ArrayCollapse.md b/packages/antd/docs/components/ArrayCollapse.md
index c5ed0e28b28..54778a3a44d 100644
--- a/packages/antd/docs/components/ArrayCollapse.md
+++ b/packages/antd/docs/components/ArrayCollapse.md
@@ -580,6 +580,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCollapse.Remove
> Delete button
@@ -592,6 +594,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCollapse.MoveDown
> Move down button
@@ -604,6 +608,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCollapse.MoveUp
> Move up button
@@ -616,6 +622,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayCollapse.Index
> Index Renderer
diff --git a/packages/antd/docs/components/ArrayCollapse.zh-CN.md b/packages/antd/docs/components/ArrayCollapse.zh-CN.md
index 760aca252db..b681fcd4190 100644
--- a/packages/antd/docs/components/ArrayCollapse.zh-CN.md
+++ b/packages/antd/docs/components/ArrayCollapse.zh-CN.md
@@ -585,6 +585,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCollapse.Remove
> 删除按钮
@@ -597,6 +599,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCollapse.MoveDown
> 下移按钮
@@ -609,6 +613,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCollapse.MoveUp
> 上移按钮
@@ -621,6 +627,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayCollapse.Index
> 索引渲染器
diff --git a/packages/antd/docs/components/ArrayItems.md b/packages/antd/docs/components/ArrayItems.md
index fff029c31af..2b85fb6ef10 100644
--- a/packages/antd/docs/components/ArrayItems.md
+++ b/packages/antd/docs/components/ArrayItems.md
@@ -748,6 +748,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayItems.Copy
> Copy button
@@ -763,6 +765,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayItems.Remove
> Delete button
@@ -775,6 +779,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayItems.MoveDown
> Move down button
@@ -787,6 +793,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayItems.MoveUp
> Move up button
@@ -799,6 +807,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayItems.Index
> Index Renderer
diff --git a/packages/antd/docs/components/ArrayItems.zh-CN.md b/packages/antd/docs/components/ArrayItems.zh-CN.md
index 0ae683af81b..9197b7e02fa 100644
--- a/packages/antd/docs/components/ArrayItems.zh-CN.md
+++ b/packages/antd/docs/components/ArrayItems.zh-CN.md
@@ -749,6 +749,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayItems.Copy
> 复制按钮
@@ -764,6 +766,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayItems.Remove
> 删除按钮
@@ -776,6 +780,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayItems.MoveDown
> 下移按钮
@@ -788,6 +794,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayItems.MoveUp
> 上移按钮
@@ -800,6 +808,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayItems.Index
> 索引渲染器
diff --git a/packages/antd/docs/components/ArrayTable.md b/packages/antd/docs/components/ArrayTable.md
index d5476fe7c10..adde205368b 100644
--- a/packages/antd/docs/components/ArrayTable.md
+++ b/packages/antd/docs/components/ArrayTable.md
@@ -652,6 +652,300 @@ export default () => {
}
```
+## Overwrite default behavior of build-in operations
+
+```tsx
+/**
+ * title: Markup Schema
+ */
+import React from 'react'
+import {
+ FormItem,
+ Input,
+ ArrayTable,
+ FormButtonGroup,
+ Submit,
+} from '@formily/antd'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { message } from 'antd'
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ ArrayTable,
+ },
+})
+
+const form = createForm()
+
+export default () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ message.info('remove is disabled!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('copy is disabled!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('moveDown is disabled!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('moveUp is disabled!')
+ },
+ }}
+ />
+
+
+
+ {
+ e.preventDefault()
+ const base = form.values.array.length
+ form.values.array.push(
+ { a1: base + 1 },
+ { a1: base + 2, a2: base + 2 }
+ )
+ },
+ }}
+ title="Add two entries"
+ />
+
+
+
+ Submit
+
+
+ )
+}
+```
+
+```tsx
+/**
+ * title: JSON Schema
+ */
+import React from 'react'
+import {
+ FormItem,
+ Input,
+ ArrayTable,
+ FormButtonGroup,
+ Submit,
+} from '@formily/antd'
+import { createForm, onFieldMount } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { message } from 'antd'
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ ArrayTable,
+ },
+})
+
+const form = createForm({
+ effects() {
+ onFieldMount('array.add', (field, form) => {
+ field.componentProps.onClick = (e) => {
+ e.preventDefault()
+ const base = form.values.array.length
+ form.values.array.push({ a1: base + 1 }, { a1: base + 2, a2: base + 2 })
+ }
+ })
+
+ onFieldMount('array.*[0:].item.*', (field) => {
+ field.componentProps.onClick = (e) => {
+ e.preventDefault()
+ message.info(`${field.address.segments.slice(-1)[0]} is disabled!`)
+ }
+ })
+ },
+})
+
+const schema = {
+ type: 'object',
+ properties: {
+ array: {
+ type: 'array',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ArrayTable',
+ 'x-component-props': {
+ pagination: { pageSize: 10 },
+ scroll: { x: '100%' },
+ },
+ items: {
+ type: 'object',
+ properties: {
+ column1: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 80, title: 'Index', align: 'center' },
+ properties: {
+ index: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Index',
+ },
+ },
+ },
+ column2: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 200, title: 'A1' },
+ properties: {
+ a1: {
+ type: 'string',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ },
+ },
+ column3: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 200, title: 'A2' },
+ properties: {
+ a2: {
+ type: 'string',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ },
+ },
+ column4: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': {
+ title: 'Operations',
+ dataIndex: 'operations',
+ width: 200,
+ fixed: 'right',
+ },
+ properties: {
+ item: {
+ type: 'void',
+ 'x-component': 'FormItem',
+ properties: {
+ remove: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Remove',
+ },
+ moveDown: {
+ type: 'void',
+ 'x-component': 'ArrayTable.MoveDown',
+ },
+ moveUp: {
+ type: 'void',
+ 'x-component': 'ArrayTable.MoveUp',
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ properties: {
+ add: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Addition',
+ title: 'Add two entries',
+ },
+ },
+ },
+ },
+}
+
+export default () => {
+ return (
+
+
+
+ Submit
+
+
+ )
+}
+```
+
## API
### ArrayTable
@@ -698,6 +992,8 @@ Other references https://ant.design/components/button-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayTable.Remove
> Delete button
@@ -710,6 +1006,22 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
+### ArrayTable.Copy
+
+> Copy button
+
+| Property name | Type | Description | Default value |
+| ------------- | --------- | ----------- | ------------- |
+| title | ReactText | Copywriting | |
+
+Other references https://ant.design/components/icon-cn/
+
+Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayTable.MoveDown
> Move down button
@@ -722,6 +1034,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayTable.MoveUp
> Move up button
@@ -734,6 +1048,8 @@ Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
+Note: You can disable default behavior with `onClick={e => e.preventDefault()}` in props.
+
### ArrayTable.Index
> Index Renderer
diff --git a/packages/antd/docs/components/ArrayTable.zh-CN.md b/packages/antd/docs/components/ArrayTable.zh-CN.md
index 2c73dbaadce..76288665181 100644
--- a/packages/antd/docs/components/ArrayTable.zh-CN.md
+++ b/packages/antd/docs/components/ArrayTable.zh-CN.md
@@ -652,6 +652,301 @@ export default () => {
}
```
+## 重写内置操作项的默认行为
+
+```tsx
+import React from 'react'
+import {
+ FormItem,
+ Input,
+ ArrayTable,
+ FormButtonGroup,
+ Submit,
+} from '@formily/antd'
+import { createForm } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { message } from 'antd'
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ ArrayTable,
+ },
+})
+
+const form = createForm()
+
+export default () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ e.preventDefault()
+ message.info('remove 已被禁用!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('copy 已被禁用!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('moveDown 已被禁用!')
+ },
+ }}
+ />
+ {
+ e.preventDefault()
+ message.info('moveUp 已被禁用!')
+ },
+ }}
+ />
+
+
+
+ {
+ e.preventDefault()
+ const base = form.values.array.length
+ form.values.array.push(
+ { a1: base + 1 },
+ { a1: base + 2, a2: base + 2 }
+ )
+ },
+ }}
+ title="添加2个条目"
+ />
+
+
+
+ 提交
+
+
+ )
+}
+```
+
+```tsx
+/**
+ * title: JSON Schema
+ */
+import React from 'react'
+import {
+ FormItem,
+ Input,
+ ArrayTable,
+ FormButtonGroup,
+ Submit,
+} from '@formily/antd'
+import { createForm, onFieldMount } from '@formily/core'
+import { FormProvider, createSchemaField } from '@formily/react'
+import { message } from 'antd'
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ ArrayTable,
+ },
+})
+
+const form = createForm({
+ effects() {
+ onFieldMount('array.add', (field, form) => {
+ field.componentProps.onClick = (e) => {
+ e.preventDefault()
+ const base = form.values.array.length
+ form.values.array.push({ a1: base + 1 }, { a1: base + 2, a2: base + 2 })
+ }
+ })
+
+ onFieldMount('array.*[0:].item.*', (field) => {
+ field.componentProps.onClick = (e) => {
+ e.preventDefault()
+ message.info(`${field.address.segments.slice(-1)[0]} 已被禁用!`)
+ }
+ })
+ },
+})
+
+const schema = {
+ type: 'object',
+ properties: {
+ array: {
+ type: 'array',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ArrayTable',
+ 'x-component-props': {
+ pagination: { pageSize: 10 },
+ scroll: { x: '100%' },
+ },
+ items: {
+ type: 'object',
+ properties: {
+ column1: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 80, title: 'Index', align: 'center' },
+ properties: {
+ index: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Index',
+ },
+ },
+ },
+ column2: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 200, title: 'A1' },
+ properties: {
+ a1: {
+ type: 'string',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ },
+ },
+ column3: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': { width: 200, title: 'A2' },
+ properties: {
+ a2: {
+ type: 'string',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ },
+ },
+ column4: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Column',
+ 'x-component-props': {
+ title: 'Operations',
+ dataIndex: 'operations',
+ width: 200,
+ fixed: 'right',
+ },
+ properties: {
+ item: {
+ type: 'void',
+ 'x-component': 'FormItem',
+ properties: {
+ remove: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Remove',
+ },
+ copy: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Copy',
+ },
+ moveDown: {
+ type: 'void',
+ 'x-component': 'ArrayTable.MoveDown',
+ },
+ moveUp: {
+ type: 'void',
+ 'x-component': 'ArrayTable.MoveUp',
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ properties: {
+ add: {
+ type: 'void',
+ 'x-component': 'ArrayTable.Addition',
+ title: '添加2个条目',
+ },
+ },
+ },
+ },
+}
+
+export default () => {
+ return (
+
+
+
+ Submit
+
+
+ )
+}
+```
+
## API
### ArrayTable
@@ -698,6 +993,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayTable.Remove
> 删除按钮
@@ -710,6 +1007,22 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
+### ArrayTable.Copy
+
+> 复制按钮
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| ------ | --------- | ---- | ------ |
+| title | ReactText | 文案 | |
+
+其余参考 https://ant.design/components/icon-cn/
+
+注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayTable.MoveDown
> 下移按钮
@@ -722,6 +1035,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayTable.MoveUp
> 上移按钮
@@ -734,6 +1049,8 @@ export default () => {
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
+注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
+
### ArrayTable.Index
> 索引渲染器
diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
index 55b872a24c3..1c6c44940e6 100644
--- a/packages/antd/src/array-base/index.tsx
+++ b/packages/antd/src/array-base/index.tsx
@@ -1,19 +1,19 @@
-import React, { createContext, useContext } from 'react'
-import { Button } from 'antd'
import {
+ CopyOutlined,
DeleteOutlined,
DownOutlined,
- UpOutlined,
- PlusOutlined,
MenuOutlined,
- CopyOutlined,
+ PlusOutlined,
+ UpOutlined,
} from '@ant-design/icons'
-import { ButtonProps } from 'antd/lib/button'
import { ArrayField } from '@formily/core'
-import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
-import { isValid, clone, isUndef } from '@formily/shared'
-import { usePrefixCls, SortableHandle } from '../__builtins__'
+import { JSXComponent, Schema, useField, useFieldSchema } from '@formily/react'
+import { clone, isUndef, isValid } from '@formily/shared'
+import { Button } from 'antd'
+import { ButtonProps } from 'antd/lib/button'
import cls from 'classnames'
+import React, { createContext, useContext } from 'react'
+import { SortableHandle, usePrefixCls } from '../__builtins__'
export interface IArrayBaseAdditionProps extends ButtonProps {
title?: string
@@ -175,6 +175,10 @@ ArrayBase.Addition = (props) => {
className={cls(`${prefixCls}-addition`, props.className)}
onClick={(e) => {
if (array.props?.disabled) return
+ if (props.onClick) {
+ props.onClick(e)
+ if (e.defaultPrevented) return
+ }
const defaultValue = getDefaultValue(props.defaultValue, array.schema)
if (props.method === 'unshift') {
array.field?.unshift?.(defaultValue)
@@ -183,9 +187,6 @@ ArrayBase.Addition = (props) => {
array.field?.push?.(defaultValue)
array.props?.onAdd?.(array?.field?.value?.length - 1)
}
- if (props.onClick) {
- props.onClick(e)
- }
}}
icon={isUndef(props.icon) ? : props.icon}
>
@@ -216,13 +217,14 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
if (self?.disabled) return
e.stopPropagation()
if (array.props?.disabled) return
+ if (props.onClick) {
+ props.onClick(e)
+ if (e.defaultPrevented) return
+ }
const value = clone(array?.field?.value[index])
const distIndex = index + 1
array.field?.insert?.(distIndex, value)
array.props?.onCopy?.(distIndex)
- if (props.onClick) {
- props.onClick(e)
- }
}}
icon={isUndef(props.icon) ? : props.icon}
>
@@ -252,11 +254,12 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
- array.field?.remove?.(index)
- array.props?.onRemove?.(index)
if (props.onClick) {
props.onClick(e)
+ if (e.defaultPrevented) return
}
+ array.field?.remove?.(index)
+ array.props?.onRemove?.(index)
}}
icon={isUndef(props.icon) ? : props.icon}
>
@@ -286,11 +289,12 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
- array.field?.moveDown?.(index)
- array.props?.onMoveDown?.(index)
if (props.onClick) {
props.onClick(e)
+ if (e.defaultPrevented) return
}
+ array.field?.moveDown?.(index)
+ array.props?.onMoveDown?.(index)
}}
icon={isUndef(props.icon) ? : props.icon}
>
@@ -320,11 +324,12 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
- array?.field?.moveUp(index)
- array?.props?.onMoveUp?.(index)
if (props.onClick) {
props.onClick(e)
+ if (e.defaultPrevented) return
}
+ array?.field?.moveUp(index)
+ array?.props?.onMoveUp?.(index)
}}
icon={isUndef(props.icon) ? : props.icon}
>