diff --git a/components/modal/ActionButton.tsx b/components/modal/ActionButton.tsx index 1ea65bf253..f43def2479 100644 --- a/components/modal/ActionButton.tsx +++ b/components/modal/ActionButton.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Button from '../button'; -import { ButtonType } from '../button/button'; +import { ButtonType, NativeButtonProps } from '../button/button'; export interface ActionButtonProps { type?: ButtonType; actionFn?: (...args: any[]) => any | PromiseLike; closeModal: Function; autoFocus?: boolean; + buttonProps?: NativeButtonProps; } export interface ActionButtonState { @@ -61,10 +62,10 @@ export default class ActionButton extends React.Component + ); diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index e3db3ee237..6c65a943b7 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -66,6 +66,8 @@ export interface ModalFuncProps { content?: React.ReactNode; onOk?: (...args: any[]) => any | PromiseLike; onCancel?: (...args: any[]) => any | PromiseLike; + okButtonProps?: NativeButtonProps; + cancelButtonProps?: NativeButtonProps; centered?: boolean; width?: string | number; iconClassName?: string; diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js index 869f32cc61..ec7b7a68a1 100644 --- a/components/modal/__tests__/confirm.test.js +++ b/components/modal/__tests__/confirm.test.js @@ -84,6 +84,13 @@ describe('Modal.confirm triggers callbacks correctly', () => { expect($$('.ant-btn')[0].innerHTML).toContain('OK'); }); + it('allows extra props on buttons', () => { + open({ okButtonProps: { disabled: true }, cancelButtonProps: { 'data-test': 'baz' } }); + expect($$('.ant-btn')).toHaveLength(2); + expect($$('.ant-btn')[0].attributes['data-test'].value).toBe('baz'); + expect($$('.ant-btn')[1].disabled).toBe(true); + }); + it('trigger onCancel once when click on cancel button', () => { jest.useFakeTimers(); ['info', 'success', 'warning', 'error'].forEach((type) => { diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index 73ab1686f9..f457cde1ac 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -15,7 +15,7 @@ interface ConfirmDialogProps extends ModalFuncProps { const IS_REACT_16 = !!ReactDOM.createPortal; const ConfirmDialog = (props: ConfirmDialogProps) => { - const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer } = props; + const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer, okButtonProps, cancelButtonProps } = props; const iconType = props.iconType || 'question-circle'; const okType = props.okType || 'primary'; const prefixCls = props.prefixCls || 'ant-confirm'; @@ -38,7 +38,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { ); const cancelButton = okCancel && ( - + {cancelText} ); @@ -70,7 +70,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
{cancelButton} - + {okText}
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md index 64988cb93a..24597359b8 100644 --- a/components/modal/demo/confirm.md +++ b/components/modal/demo/confirm.md @@ -47,6 +47,28 @@ function showDeleteConfirm() { }); } +function showPropsConfirm() { + confirm({ + title: 'Are you sure delete this task?', + content: 'Some descriptions', + okText: 'Yes', + okType: 'danger', + okButtonProps: { + disabled: true, + }, + cancelButtonProps: { + loading: true, + }, + cancelText: 'No', + onOk() { + console.log('OK'); + }, + onCancel() { + console.log('Cancel'); + }, + }); +} + ReactDOM.render(
+
, mountNode); ```` diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 1c9db5e31f..3ac5101ad2 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -72,6 +72,8 @@ The properties of the object are follows: | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | | okText | Text of the OK button | string | `OK` | | okType | Button `type` of the OK button | string | `primary` | +| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | +| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | | title | Title | string\|ReactNode | - | | width | Width of the modal dialog | string\|number | 416 | | zIndex | The `z-index` of the Modal | Number | 1000 | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index bcad53e8b6..8937e6fc15 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -70,6 +70,8 @@ title: Modal | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | | okText | 确认按钮文字 | string | 确定 | | okType | 确认按钮类型 | string | primary | +| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | +| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | | title | 标题 | string\|ReactNode | 无 | | width | 宽度 | string\|number | 416 | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 |