fix(modal): 添加showCancel属性，修复无icon是container宽度异常的问题

Yoshino-UI · Jul 8, 2018 · 3484836 · 3484836
1 parent 63c7290
commit 3484836
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
@@ -15,6 +15,7 @@ export interface IModalProps extends IBaseComponent {
   onClose?: () => void;
   okText?: React.ReactNode;
   cancelText?: React.ReactNode;
+  showCancel?: boolean;
   title?: React.ReactNode;
   content?: React.ReactNode;
   bodyCotent?: React.ReactNode;
@@ -36,6 +37,7 @@ export class Modal extends Component<IModalComponentProps, IModalComponentState>
   static defaultProps = {
     zIndex: 1000,
     width: 256,
+    showCancel: true,
   };
 
   state = {
@@ -75,7 +77,7 @@ export class Modal extends Component<IModalComponentProps, IModalComponentState>
   render() {
     const {
       className, style, title, bodyCotent,
-      content, icon, width, zIndex,
+      content, icon, width, zIndex, showCancel,
       okText, cancelText, type,
     } = this.props;
     const preCls = 'yoshino-modal';
@@ -88,6 +90,7 @@ export class Modal extends Component<IModalComponentProps, IModalComponentState>
       warning: 'android-alert',
       error: 'close-circled',
     };
+    const hasIcon = type !== 'confirm' || icon;
     return this.state.show ? (
       <div
         className={clsName}
@@ -104,7 +107,7 @@ export class Modal extends Component<IModalComponentProps, IModalComponentState>
                   </div>
                 ) : null
               }
-              <div className={`${preCls}-word-container`}>
+              <div className={`${preCls}-word-container ${!hasIcon ? `${preCls}-word-container-no-icon` : ''}`}>
                 <div className={`${preCls}-title`}>{title}</div>
                 <div className={`${preCls}-content`}>{content}</div>
               </div>
@@ -114,7 +117,7 @@ export class Modal extends Component<IModalComponentProps, IModalComponentState>
         </div>
         <div className={`${preCls}-footer`}>
           {
-            type === 'confirm' ? (
+            type === 'confirm' && showCancel ? (
               <div className={`${preCls}-cancel`} onClick={this.onCancel}>
                 {
                   typeof cancelText === 'string' || !cancelText ? (

diff --git a/components/Modal/style/index.less b/components/Modal/style/index.less
@@ -14,7 +14,10 @@
     display: inline-block;
     width: calc(100% - @icon-width);
     vertical-align: middle;
-
+
+    &-no-icon {
+      width: 100%;
+    }
   }
 
   &-footer {

diff --git a/docs/pages/Modal/api.tsx b/docs/pages/Modal/api.tsx
@@ -71,6 +71,12 @@ export default [
         type: "ReactNode",
         defaultValue: "-",
       },
+      {
+        props: "showCancel",
+        intro: "是否显示取消按钮",
+        type: "boolean",
+        defaultValue: "false",
+      },
     ]
   }
 ]
diff --git a/docs/pages/Modal/demo/modalDemo.tsx b/docs/pages/Modal/demo/modalDemo.tsx
@@ -13,10 +13,10 @@ export default function () {
 
   const autoClose = () => {
     const ref =Modal.confirm({
-      icon: <Icon type='checkmark-round'/>,
       title: '这是一个标题！！！',
       content: '这是一个内容主题！这是一个内容主题！这是一个内容主题！这是一个内容主题！！',
       width: 400,
+      showCancel: false,
     });
     setTimeout(() => {
       Modal.close(ref);