fix: 优化modal、Button

Yoshino-UI · Nov 8, 2018 · 54b17b4 · 54b17b4
1 parent 646dce1
commit 54b17b4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 10 deletions.
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -56,11 +56,24 @@ export class Button extends Component<IButtonProps, IButtonState> {
     size: 'default',
   };
 
+  onClick = () => {
+    const { loading, disabled, onClick } = this.props;
+    const ban = loading || disabled;
+    if (ban) {
+      return;
+    }
+    if (onClick) {
+      onClick();
+    }
+  }
+
   render() {
     const {
       className, style, disabled, type,
       shape, size, icon, ghost, children,
-      tail, loading, ...otherProps} = this.props;
+      tail, loading, onClick,
+      ...otherProps
+    } = this.props;
     const preCls = 'yoshino-button';
     const btnCls = {
       [`${preCls}-${type}`]: type && !disabled && !loading || type === 'dashed',
@@ -86,6 +99,7 @@ export class Button extends Component<IButtonProps, IButtonState> {
         className={clsName}
         style={style}
         disabled={ban}
+        onClick={this.onClick}
         {...otherProps}
       >
         <div className={`${preCls}-container`}>

diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
@@ -7,6 +7,7 @@ import Button from '../Button';
 import Icon from '../Icon';
 import { render } from 'react-dom';
 import { Dialog } from '../utils/';
+import { IButtonProps } from '../Button/Button';
 
 export interface IModalProps extends IBaseComponent {
   zIndex?: number;
@@ -15,7 +16,9 @@ export interface IModalProps extends IBaseComponent {
   onCancel?: () => void;
   onClose?: () => void;
   okText?: React.ReactNode;
+  okButtonProps?: IButtonProps;
   cancelText?: React.ReactNode;
+  cancelButtonProps?: IButtonProps;
   showCancel?: boolean;
   closeText?: React.ReactNode;
   showClose?: boolean;
@@ -105,7 +108,7 @@ class Modal extends Component<IModalComponentProps, IModalComponentState> {
       content, icon, width, zIndex, showCancel,
       okText, cancelText, type = 'confirm', closeText, showClose,
       maskStyle, maskClosable, showMask, maskClick, onOk,
-      onCancel, children,
+      onCancel, children, okButtonProps, cancelButtonProps,
       ...otherProps
     } = this.props;
     const preCls = 'yoshino-modal';
@@ -121,6 +124,8 @@ class Modal extends Component<IModalComponentProps, IModalComponentState> {
     const hasIcon = type !== 'confirm' || icon;
     const visible = this.getVisible();
     const conetnt = children || bodyContent;
+    const okTextIsString = typeof okText === 'string' || okText === undefined;
+    const cancelTextIsString = typeof cancelText === 'string' || cancelText === undefined ;
 
     return visible ? (
       <Dialog
@@ -169,19 +174,36 @@ class Modal extends Component<IModalComponentProps, IModalComponentState> {
           <div className={`${preCls}-footer`}>
             {
               type === 'confirm' && showCancel ? (
-                <div className={`${preCls}-cancel`} onClick={this.onCancel}>
+                <div
+                  className={`${preCls}-cancel`}
+                  onClick={!cancelTextIsString ? this.onCancel : undefined}
+                >
                   {
-                    typeof cancelText === 'string' || !cancelText ? (
-                      <Button>{cancelText || '取消'}</Button>
+                    cancelTextIsString ? (
+                      <Button
+                        {...cancelButtonProps}
+                        onClick={this.onCancel}
+                      >
+                        {cancelText || '取消'}
+                      </Button>
                     ) : cancelText
                   }
                 </div>
               ) : null
             }
-            <div className={`${preCls}-ok`} onClick={this.onOk}>
+            <div
+              className={`${preCls}-ok`}
+              onClick={!okTextIsString ? this.onOk : undefined}
+            >
               {
-                typeof okText === 'string' || !okText ? (
-                  <Button type='primary'>{okText ? okText : type !== 'confirm' ? '知道了' : '确定'}</Button>
+                okTextIsString ? (
+                  <Button
+                    type='primary'
+                    {...okButtonProps}
+                    onClick={this.onOk}
+                  >
+                    {okText ? okText : type !== 'confirm' ? '知道了' : '确定'}
+                  </Button>
                 ) : okText
               }
             </div>

diff --git a/docs/pages/components/Modal/api.tsx b/docs/pages/components/Modal/api.tsx
@@ -37,13 +37,25 @@ export default [
       },
       {
         props: 'okText',
-        intro: '确认按钮文本',
+        intro: '确认按钮文本，也可以是一个`Element`',
+        type: 'ReactNode',
+        defaultValue: '确定',
+      },
+      {
+        props: 'okButtonProps',
+        intro: '确认按钮的`props`，详情见`Button Props`',
         type: 'ReactNode',
         defaultValue: '确定',
       },
       {
         props: 'cancelText',
-        intro: '取消按钮文本',
+        intro: '取消按钮文本，也可以是一个`Element`',
+        type: 'ReactNode',
+        defaultValue: '取消',
+      },
+      {
+        props: 'cancelButtonProps',
+        intro: '取消按钮的`props`，，详情见`Button Props`',
         type: 'ReactNode',
         defaultValue: '取消',
       },

diff --git a/docs/pages/components/Modal/demo/modalInner.tsx b/docs/pages/components/Modal/demo/modalInner.tsx
@@ -22,6 +22,7 @@ export default class App extends React.Component {
           visible={this.state.visible}
           bodyContent={this.state.count}
           onClose={() => this.setState({visible: false})}
+          okButtonProps={{loading: true}}
         />
       </div>
     );