fix(modal): fix buttonProps.style covered (#1881)

* fix(drawer): fix console wrong * fix(modal): fix buttonProps.style covered Co-authored-by: maxin <maxin@growingio.com>
growingio · Mar 3, 2022 · aa778ca · aa778ca · vercel · Mar 3, 2022
1 parent fc506e1
commit aa778ca
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 25 deletions.
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
@@ -3,7 +3,6 @@ import classnames from 'classnames';
 import { usePrefixCls } from '@gio-design/utils';
 import RcDialog from 'rc-dialog';
 import { CloseOutlined } from '@gio-design/icons';
-import { IconButton } from '../button';
 import { DrawerProps } from './interfaces';
 
 export const Drawer: React.FC<DrawerProps> = ({
@@ -43,13 +42,7 @@ export const Drawer: React.FC<DrawerProps> = ({
       className={drawerCls}
       wrapClassName={wrapperCls}
       closable={title !== false}
-      closeIcon={
-        closeIcon || (
-          <IconButton type="text" size="small">
-            <CloseOutlined className={closeCls} />
-          </IconButton>
-        )
-      }
+      closeIcon={closeIcon || <CloseOutlined className={closeCls} />}
       title={title}
       width={size === 'fixed' ? 500 : width}
       {...restProps}

diff --git a/src/drawer/style/index.less b/src/drawer/style/index.less
@@ -107,6 +107,7 @@
     position: absolute;
     top: 20px;
     right: 20px;
+    z-index: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -116,7 +117,6 @@
     color: @gray-5;
     background-color: @gray-0;
     border: 0;
-    border-radius: 50%;
     outline: 0;
     cursor: pointer;
   }

diff --git a/src/modal/Modal.tsx b/src/modal/Modal.tsx
@@ -3,7 +3,8 @@ import classnames from 'classnames';
 import { useLocale, usePrefixCls } from '@gio-design/utils';
 import RcDialog from 'rc-dialog';
 import { CloseOutlined } from '@gio-design/icons';
-import Button, { IconButton } from '../button';
+import { omit } from 'lodash';
+import Button from '../button';
 import { ModalProps } from './interface';
 import defaultLocale from '../locales/zh-CN';
 
@@ -44,21 +45,27 @@ const Modal: React.FC<ModalProps> = ({
         <div>
           <Button
             type="secondary"
-            {...closeButtonProps}
-            style={{ padding: '7px 13px' }}
+            style={{ padding: '7px 13px', ...closeButtonProps?.style }}
             className={closeBtnCls}
-            onClick={onClose}
+            onClick={(e) => {
+              onClose?.(e);
+              closeButtonProps?.onClick?.(e);
+            }}
+            {...omit(closeButtonProps, 'style', 'className', 'onClick')}
           >
             {customizeCloseText ?? closeText ?? '取消'}
           </Button>
           {useOkBtn && (
             <Button
               type="primary"
-              {...okButtonProps}
-              loading={confirmLoading}
+              loading={confirmLoading ?? okButtonProps?.loading}
               className={okBtnCls}
-              style={{ padding: '7px 13px' }}
-              onClick={onOk}
+              style={{ padding: '7px 13px', ...okButtonProps?.style }}
+              onClick={(e) => {
+                onOk?.(e);
+                okButtonProps?.onClick?.(e);
+              }}
+              {...omit(okButtonProps, 'style', 'onClick', 'className', 'loading')}
             >
               {customizeOKText ?? okText ?? '确定'}
             </Button>
@@ -84,13 +91,7 @@ const Modal: React.FC<ModalProps> = ({
       className={modalCls}
       wrapClassName={wrapperCls}
       closable={title !== false}
-      closeIcon={
-        closeIcon || (
-          <IconButton type="text" size="small">
-            <CloseOutlined className={closeCls} />
-          </IconButton>
-        )
-      }
+      closeIcon={closeIcon || <CloseOutlined className={closeCls} />}
       title={title}
       footer={renderDefaultFooter()}
       {...restProps}

diff --git a/src/modal/style/index.less b/src/modal/style/index.less
@@ -117,6 +117,7 @@
     position: absolute;
     top: 16px;
     right: 20px;
+    z-index: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -126,7 +127,6 @@
     color: @gray-5;
     background-color: @gray-0;
     border: 0;
-    border-radius: 50%;
     outline: 0;
     cursor: pointer;
   }