fix #10822 (#10955)

Add `okButtonProps` and `cancelButtonProps` props to ok button and cancel button

components/modal/Modal.tsx

@@ -3,7 +3,7 @@ import Dialog from 'rc-dialog';
 import PropTypes from 'prop-types';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Button from '../button';
-import { ButtonType } from '../button/button';
+import { ButtonType, NativeButtonProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getConfirmLocale } from './locale';
 
@@ -36,6 +36,8 @@ export interface ModalProps {
   cancelText?: string;
   /** 点击蒙层是否允许关闭*/
   maskClosable?: boolean;
+  okButtonProps?: NativeButtonProps;
+  cancelButtonProps?: NativeButtonProps;
   destroyOnClose?: boolean;
   style?: React.CSSProperties;
   wrapClassName?: string;
@@ -98,6 +100,8 @@ export default class Modal extends React.Component<ModalProps, {}> {
     confirmLoading: false,
     visible: false,
     okType: 'primary' as ButtonType,
+    okButtonDisabled: false,
+    cancelButtonDisabled: false,
   };
 
   static propTypes = {
@@ -153,6 +157,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
       <div>
         <Button
           onClick={this.handleCancel}
+          {...this.props.cancelButtonProps}
         >
           {cancelText || locale.cancelText}
         </Button>
@@ -160,6 +165,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
           type={okType}
           loading={confirmLoading}
           onClick={this.handleOk}
+          {...this.props.okButtonProps}
         >
           {okText || locale.okText}
         </Button>

components/modal/demo/button-props.md

@@ -0,0 +1,59 @@
+---
+order: 11
+title:
+  zh-CN: 自定义页脚按钮属性
+  en-US: Customize footer buttons props
+---
+
+## zh-CN
+
+传入 `okButtonProps` 和 `cancelButtonProps` 可分别自定义确定按钮和取消按钮的 props。
+
+## en-US
+
+Passing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props.
+
+````jsx
+import { Modal, Button } from 'antd';
+
+class App extends React.Component {
+  state = { visible: false }
+  showModal = () => {
+    this.setState({
+      visible: true,
+    });
+  }
+  handleOk = (e) => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  }
+  handleCancel = (e) => {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Button type="primary" onClick={this.showModal}>Open</Button>
+        <Modal
+          title="Basic Modal"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          okButtonProps={{ disabled: true }}
+          cancelButtonProps={{ disabled: true }}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);

components/modal/index.en-US.md

@@ -31,6 +31,8 @@ and so on.
 | maskStyle | Style for modal's mask element. | object | {} |
 | 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) | - |
 | style | Style of floating layer, typically used at least for adjusting the position. | object | - |
 | title | The modal dialog's title | string\|ReactNode | - |
 | visible | Whether the modal dialog is visible or not | boolean | false |

components/modal/index.zh-CN.md

@@ -30,6 +30,8 @@ title: Modal
 | maskStyle | 遮罩样式 | object | {} |
 | okText | 确认按钮文字 | string | 确定 |
 | okType | 确认按钮类型 | string | primary |
+| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
+| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
 | style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
 | title | 标题 | string\|ReactNode | 无 |
 | visible | 对话框是否可见 | boolean | 无 |