Pass the ok and cancel button props in the confirm API (#12425)

This PR adds the `okButtonProps` and `cancelButtonProps` API to the `Modal.confirm` and associated methods.


* [x] Make sure that you propose PR to right branch: bugfix for `master`, feature for branch `feature`.
* [x] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [x] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
* [x] Rebase before creating a PR to keep commit history clear.
* [x] Add some descriptions and refer relative issues for you PR.

Extra checklist:

*isNewFeature* **:**

  * [x] Update API docs for the component.
  * [x] Update/Add demo to demonstrate new feature.
  * [x] Update TypeScript definition for the component.
  * [x] Add unit tests for the feature.

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<any>;
   closeModal: Function;
   autoFocus?: boolean;
+  buttonProps?: NativeButtonProps;
 }
 
 export interface ActionButtonState {
@@ -61,10 +62,10 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
   }
 
   render() {
-    const { type, children } = this.props;
+    const { type, children, buttonProps } = this.props;
     const loading = this.state.loading;
     return (
-      <Button type={type} onClick={this.onClick} loading={loading}>
+      <Button type={type} onClick={this.onClick} loading={loading} {...buttonProps}>
         {children}
       </Button>
     );

components/modal/Modal.tsx

@@ -66,6 +66,8 @@ export interface ModalFuncProps {
   content?: React.ReactNode;
   onOk?: (...args: any[]) => any | PromiseLike<any>;
   onCancel?: (...args: any[]) => any | PromiseLike<any>;
+  okButtonProps?: NativeButtonProps;
+  cancelButtonProps?: NativeButtonProps;
   centered?: boolean;
   width?: string | number;
   iconClassName?: string;

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) => {

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 && (
-    <ActionButton actionFn={onCancel} closeModal={close} autoFocus={autoFocusButton === 'cancel'}>
+    <ActionButton actionFn={onCancel} closeModal={close} autoFocus={autoFocusButton === 'cancel'} buttonProps={cancelButtonProps}>
       {cancelText}
     </ActionButton>
   );
@@ -70,7 +70,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         </div>
         <div className={`${prefixCls}-btns`}>
           {cancelButton}
-          <ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus={autoFocusButton === 'ok'}>
+          <ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus={autoFocusButton === 'ok'} buttonProps={okButtonProps}>
             {okText}
           </ActionButton>
         </div>

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(
   <div>
     <Button onClick={showConfirm}>
@@ -55,6 +77,9 @@ ReactDOM.render(
     <Button onClick={showDeleteConfirm} type="dashed">
       Delete
     </Button>
+    <Button onClick={showPropsConfirm} type="dashed">
+      With extra props
+    </Button>
   </div>,
   mountNode);
 ````

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 |

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 |