feat: 为Modal组件的confirm、success、error、warning、info 子组件增加快捷键，模仿原生体验。 (#3061)

* Add hotkey for Modal.confirm

* Optimize

* 重构快捷键逻辑

* 根据CR 进一步优化逻辑

* timeoutId 改为非强制

* Update confirm.tsx

* 使用 onCancel 回调代替 onClose，并修改 onCancel 注释。

* 修改注释

.gitignore

@@ -15,6 +15,7 @@ Thumbs.db
 *.swp
 *.swo
 *.log
+*.json.gzip
 node_modules/
 .buildpath
 .settings

components/modal/Modal.tsx

@@ -20,7 +20,7 @@ export interface ModalProps {
   closable?: boolean;
   /** 点击确定回调*/
   onOk?: () => void;
-  /** 点击遮罩层或右上角叉或取消按钮的回调*/
+  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
   onCancel?: (e: React.MouseEvent) => void;
   /** 宽度*/
   width?: string | number;

components/modal/confirm.tsx

@@ -11,15 +11,25 @@ export interface ActionButtonProps {
   type: 'primary' | 'ghost' | 'dashed';
   actionFn: Function;
   closeModal: Function;
+  autoFocus?: Boolean;
 }
 class ActionButton extends React.Component<ActionButtonProps, any> {
+  timeoutId: number;
   constructor(props) {
     super(props);
     this.state = {
       loading: false,
     };
   }
-
+  componentDidMount () {
+    if (this.props.autoFocus) {
+      const $this = ReactDOM.findDOMNode(this) as HTMLInputElement;
+      this.timeoutId = setTimeout(() => $this.focus());
+    }
+  }
+  componentWillUnmount () {
+    clearTimeout(this.timeoutId);
+  }
   onClick = () => {
     const { actionFn, closeModal } = this.props;
     if (actionFn) {
@@ -98,7 +108,7 @@ export default function confirm(config) {
         <ActionButton type="ghost" actionFn={props.onCancel} closeModal={close}>
           {props.cancelText}
         </ActionButton>
-        <ActionButton type="primary" actionFn={props.onOk} closeModal={close}>
+        <ActionButton type="primary" actionFn={props.onOk} closeModal={close} autoFocus>
           {props.okText}
         </ActionButton>
       </div>
@@ -106,7 +116,7 @@ export default function confirm(config) {
   } else {
     footer = (
       <div className={`${prefixCls}-btns`}>
-        <ActionButton type="primary" actionFn={props.onOk} closeModal={close}>
+        <ActionButton type="primary" actionFn={props.onOk} closeModal={close} autoFocus>
           {props.okText}
         </ActionButton>
       </div>
@@ -122,12 +132,13 @@ export default function confirm(config) {
   ReactDOM.render(
     <Dialog
       className={classString}
+      onCancel={close}
       visible
-      closable={false}
       title=""
       transitionName="zoom"
       footer=""
       maskTransitionName="fade"
+      maskClosable={false}
       style={style}
       width={width}
     >

components/modal/style/confirm.less

@@ -5,6 +5,10 @@
     display: none;
   }
 
+  .@{ant-prefix}-modal-close {
+    display: none;
+  }
+
   .@{ant-prefix}-modal-body {
     padding: 30px 40px;
   }