From 65734464d95415857c1264b30c5af1542917bf72 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Tue, 18 Oct 2022 18:03:29 +0800
Subject: [PATCH 1/7] refactor: optimize modal confirm button style and fix
 redundacy header for confirmDialog Component

---
 src/components/dialog/confirmDialog.tsx  | 17 ++++++++---------
 src/components/dialog/modal.tsx          |  4 ++--
 src/components/dialog/style.scss         | 22 ++++++++++++++--------
 stories/components/17-Dialog.stories.tsx | 15 ++++++++++-----
 4 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/confirmDialog.tsx b/src/components/dialog/confirmDialog.tsx
index 34eae9c47..9a7837846 100644
--- a/src/components/dialog/confirmDialog.tsx
+++ b/src/components/dialog/confirmDialog.tsx
@@ -29,14 +29,14 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         onOk,
         close,
         maskStyle,
-        okText = 'delete',
+        okText = 'Ok',
         okButtonProps,
-        cancelText = 'cancel',
+        cancelText = 'Cancel',
         cancelButtonProps,
+        okCancel,
         bodyStyle,
-        closable = true,
+        closable = false,
         className,
-        okCancel,
         width = 520,
         style = {},
         mask = true,
@@ -44,11 +44,10 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         transitionName = 'zoom',
         maskTransitionName = 'fade',
         type,
-        ...resetProps
+        ...restProps
     } = props;
 
     const confirmDescriperClassName = iconConfirmClassName(type);
-
     const classString = classNames(
         confirmClassName,
         confirmDescriperClassName,
@@ -73,16 +72,16 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                 [centeredConfirmClassName]: !!props.centered,
             })}
             onCancel={() => close({ triggerCancel: true })}
-            title=""
             transitionName={transitionName}
-            footer=""
             maskTransitionName={maskTransitionName}
             mask={mask}
             maskClosable={maskClosable}
             style={style}
             width={width}
             closable={closable}
-            {...resetProps}
+            {...restProps}
+            footer=""
+            title=""
         >
             <div className={containerConfirmClassName} style={bodyStyle}>
                 <div className={contentConfirmClassName}>
diff --git a/src/components/dialog/modal.tsx b/src/components/dialog/modal.tsx
index 087bb3cad..d6a1e48fc 100644
--- a/src/components/dialog/modal.tsx
+++ b/src/components/dialog/modal.tsx
@@ -89,8 +89,8 @@ export const Modal: React.FC<IModalProps> = (props: IModalProps) => {
         centered,
         getContainer,
         closeIcon,
-        cancelText = 'cancel',
-        okText = 'ok',
+        cancelText = 'Cancel',
+        okText = 'Ok',
         ...restProps
     } = props;
 
diff --git a/src/components/dialog/style.scss b/src/components/dialog/style.scss
index 0b2502087..fc1aa7761 100644
--- a/src/components/dialog/style.scss
+++ b/src/components/dialog/style.scss
@@ -63,16 +63,17 @@
         background: var(--notificationCenterHeader-background);
         color: var(--notificationCenterHeader-foreground);
         font-size: 24px;
-        padding: 16px 0;
+        padding: 16px 0px;
     }
 
     &-footer {
         display: flex;
-        font-size: 13px;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 20px 10px 10px;
-
-        .mo-botton {
+        padding: 10px 16px;
+        border-radius: 0 0 2px 2px;
+        .mo-btn {
+            margin-left: 8px;
             width: fit-content;
         }
     }
@@ -98,10 +99,10 @@
         &--x {
             display: block;
             font-size: 16px;
-            height: 40px;
+            height: 54px;
             line-height: 40px;
             text-align: center;
-            width: 40px;
+            width: 54px;
         }
     }
 }
@@ -155,7 +156,12 @@
 
     &__btns {
         display: flex;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 20px 10px 10px;
+        padding: 10px 16px;
+        .mo-btn {
+            margin-left: 8px;
+            width: fit-content;
+        }
     }
 }
diff --git a/stories/components/17-Dialog.stories.tsx b/stories/components/17-Dialog.stories.tsx
index ce167fa91..d5d9d6e80 100644
--- a/stories/components/17-Dialog.stories.tsx
+++ b/stories/components/17-Dialog.stories.tsx
@@ -24,14 +24,19 @@ stories.add('Basic Usage', () => {
 
     function showConfirm() {
         confirm({
-            title: 'Are you sure you want to permanently delete ?',
-            content: 'This action is irreversible!',
-            cancelButtonProps: { disabled: true },
+            title: 'Tweet us your feedback',
+            content: (
+                <div>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </div>
+            ),
             onOk() {
-                console.log('OK');
+                console.log('onOk');
             },
             onCancel() {
-                console.log('Cancel');
+                console.log('onCancel');
             },
         });
     }

From 7a548be67f1947fee5c09456d6c3f1a1e743ec6e Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 11:12:56 +0800
Subject: [PATCH 2/7] fix: resolve modal.confirm can not destory problems

---
 src/components/dialog/actionButton.tsx  | 19 ++++++++++---------
 src/components/dialog/confirm.tsx       |  9 ++-------
 src/components/dialog/confirmDialog.tsx | 13 +++++--------
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/actionButton.tsx b/src/components/dialog/actionButton.tsx
index d2d5333c2..1219e296f 100644
--- a/src/components/dialog/actionButton.tsx
+++ b/src/components/dialog/actionButton.tsx
@@ -2,20 +2,21 @@ import React, { useRef } from 'react';
 import { Button, IButtonProps } from 'mo/components/button';
 export interface ActionButtonProps extends IButtonProps {
     actionFn?: (...args: any[]) => any | PromiseLike<any>;
-    closeModal: Function;
+    close?: Function;
+    buttonProps?: IButtonProps;
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {
     const clickedRef = useRef<boolean>(false);
+    const { close } = props;
 
     const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
-        const { closeModal } = props;
         if (!returnValueOfOnOk || !returnValueOfOnOk.then) {
             return;
         }
         returnValueOfOnOk.then(
             (...args: any[]) => {
-                closeModal(...args);
+                close?.(...args);
             },
             (e: Error) => {
                 // eslint-disable-next-line no-console
@@ -26,32 +27,32 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
     };
 
     const onClick = () => {
-        const { actionFn, closeModal } = props;
+        const { actionFn, close } = props;
         if (clickedRef.current) {
             return;
         }
         clickedRef.current = true;
         if (!actionFn) {
-            closeModal();
+            close?.();
             return;
         }
         let returnValueOfOnOk;
         if (actionFn!.length) {
-            returnValueOfOnOk = actionFn(closeModal);
+            returnValueOfOnOk = actionFn(close);
             clickedRef.current = false;
         } else {
             returnValueOfOnOk = actionFn();
             if (!returnValueOfOnOk) {
-                closeModal();
+                close?.();
                 return;
             }
         }
         handlePromiseOnOk(returnValueOfOnOk);
     };
 
-    const { children, ...resetProps } = props;
+    const { children, buttonProps } = props;
     return (
-        <Button onClick={onClick} {...resetProps}>
+        <Button onClick={onClick} {...buttonProps}>
             {children}
         </Button>
     );
diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
index 5a4757ca5..c481b32a9 100644
--- a/src/components/dialog/confirm.tsx
+++ b/src/components/dialog/confirm.tsx
@@ -46,21 +46,16 @@ export default function confirm(config: IModalFuncProps) {
     function render({ okText, cancelText, ...props }: any) {
         renderUtils(
             <ConfirmDialog
-                {...props}
                 okText={okText}
                 cancelText={cancelText}
+                {...props}
             />,
             div
         );
     }
 
     function close(...args: any[]) {
-        currentConfig = {
-            ...currentConfig,
-            visible: false,
-            afterClose: () => destroy(...args),
-        };
-        render(currentConfig);
+        destroy(...args);
     }
 
     render(currentConfig);
diff --git a/src/components/dialog/confirmDialog.tsx b/src/components/dialog/confirmDialog.tsx
index 9a7837846..d80c794d6 100644
--- a/src/components/dialog/confirmDialog.tsx
+++ b/src/components/dialog/confirmDialog.tsx
@@ -44,7 +44,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         transitionName = 'zoom',
         maskTransitionName = 'fade',
         type,
-        ...restProps
+        visible,
     } = props;
 
     const confirmDescriperClassName = iconConfirmClassName(type);
@@ -55,11 +55,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     );
 
     const cancelButton = okCancel && (
-        <ActionButton
-            actionFn={onCancel}
-            closeModal={close}
-            {...cancelButtonProps}
-        >
+        <ActionButton actionFn={onCancel} close={close} {...cancelButtonProps}>
             {cancelText}
         </ActionButton>
     );
@@ -79,9 +75,10 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
             style={style}
             width={width}
             closable={closable}
-            {...restProps}
             footer=""
             title=""
+            maskStyle={maskStyle}
+            visible={visible}
         >
             <div className={containerConfirmClassName} style={bodyStyle}>
                 <div className={contentConfirmClassName}>
@@ -104,7 +101,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                             {
                                 <ActionButton
                                     actionFn={onOk}
-                                    closeModal={close}
+                                    close={close}
                                     {...okButtonProps}
                                 >
                                     {okText}

From d139970a92d8ec96e51571cc3a1f4736f782a07a Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 11:22:31 +0800
Subject: [PATCH 3/7] ci: fix closeModal rename problems

---
 .../__tests__/__snapshots__/actionbutton.test.tsx.snap      | 1 -
 src/components/dialog/__tests__/actionbutton.test.tsx       | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap b/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
index 3d3df8812..165dd1592 100644
--- a/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
+++ b/src/components/dialog/__tests__/__snapshots__/actionbutton.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Test ActionButton Component Match ActionButton Snapshot 1`] = `
 <button
   className="mo-btn mo-btn--normal"
-  closeModal={[MockFunction]}
   onClick={[Function]}
 />
 `;
diff --git a/src/components/dialog/__tests__/actionbutton.test.tsx b/src/components/dialog/__tests__/actionbutton.test.tsx
index 1e9f2327e..18ffb529f 100644
--- a/src/components/dialog/__tests__/actionbutton.test.tsx
+++ b/src/components/dialog/__tests__/actionbutton.test.tsx
@@ -10,7 +10,7 @@ describe('Test ActionButton Component', () => {
     test('Match ActionButton Snapshot', () => {
         const TEST_FN = jest.fn();
         const component = renderer.create(
-            <ActionButton closeModal={TEST_FN}></ActionButton>
+            <ActionButton close={TEST_FN}></ActionButton>
         );
         const tree = component.toJSON();
 
@@ -24,7 +24,7 @@ describe('Test ActionButton Component', () => {
             <ActionButton
                 data-testid={TEST_ID}
                 actionFn={ACTION_FN}
-                closeModal={MODAL_FN}
+                close={MODAL_FN}
             />
         );
         const button = wrapper.getByTestId(TEST_ID);
@@ -41,7 +41,7 @@ describe('Test ActionButton Component', () => {
             <ActionButton
                 data-testid={TEST_ID}
                 actionFn={ACTION_FN}
-                closeModal={CLOSE_FN}
+                close={CLOSE_FN}
             />
         );
         const button = wrapper.getByTestId(TEST_ID);

From cdc44414151a81e5d6c57a6798dbfd30043fbfd9 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 11:31:20 +0800
Subject: [PATCH 4/7] ci: fix lint error

---
 src/components/dialog/confirm.tsx | 2 +-
 src/components/dialog/style.scss  | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
index c481b32a9..52f5d61db 100644
--- a/src/components/dialog/confirm.tsx
+++ b/src/components/dialog/confirm.tsx
@@ -18,7 +18,7 @@ export default function confirm(config: IModalFuncProps) {
     const div = document.createElement('div');
     document.body.appendChild(div);
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    let currentConfig = { ...config, close, visible: true } as any;
+    const currentConfig = { ...config, close, visible: true } as any;
 
     function destroy(...args: any[]) {
         const triggerCancel = args.some(
diff --git a/src/components/dialog/style.scss b/src/components/dialog/style.scss
index fc1aa7761..b28e1a4e2 100644
--- a/src/components/dialog/style.scss
+++ b/src/components/dialog/style.scss
@@ -63,15 +63,16 @@
         background: var(--notificationCenterHeader-background);
         color: var(--notificationCenterHeader-foreground);
         font-size: 24px;
-        padding: 16px 0px;
+        padding: 16px 0;
     }
 
     &-footer {
+        border-radius: 0 0 2px 2px;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         padding: 10px 16px;
-        border-radius: 0 0 2px 2px;
+
         .mo-btn {
             margin-left: 8px;
             width: fit-content;
@@ -159,6 +160,7 @@
         flex-direction: row;
         justify-content: flex-end;
         padding: 10px 16px;
+
         .mo-btn {
             margin-left: 8px;
             width: fit-content;

From 5028a9551a3703246a65e740314464bc1fcabf02 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 12:20:11 +0800
Subject: [PATCH 5/7] test: fix test cases

---
 .../dialog/__tests__/actionbutton.test.tsx    | 28 +++++--------------
 .../dialog/__tests__/confirm.test.tsx         |  3 --
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/__tests__/actionbutton.test.tsx b/src/components/dialog/__tests__/actionbutton.test.tsx
index 18ffb529f..e300e866d 100644
--- a/src/components/dialog/__tests__/actionbutton.test.tsx
+++ b/src/components/dialog/__tests__/actionbutton.test.tsx
@@ -4,8 +4,6 @@ import renderer from 'react-test-renderer';
 
 import ActionButton from '../actionButton';
 
-const TEST_ID = 'test-id';
-
 describe('Test ActionButton Component', () => {
     test('Match ActionButton Snapshot', () => {
         const TEST_FN = jest.fn();
@@ -13,39 +11,27 @@ describe('Test ActionButton Component', () => {
             <ActionButton close={TEST_FN}></ActionButton>
         );
         const tree = component.toJSON();
-
         expect(tree).toMatchSnapshot();
     });
 
     test('The ActionButton actionFn', () => {
         const ACTION_FN = jest.fn(() => false);
         const MODAL_FN = jest.fn();
-        const wrapper = render(
-            <ActionButton
-                data-testid={TEST_ID}
-                actionFn={ACTION_FN}
-                close={MODAL_FN}
-            />
+        const { container } = render(
+            <ActionButton actionFn={ACTION_FN} close={MODAL_FN} />
         );
-        const button = wrapper.getByTestId(TEST_ID);
-
-        fireEvent.click(button);
+        fireEvent.click(container.querySelector('.mo-btn')!);
         expect(ACTION_FN).toBeCalled();
         expect(MODAL_FN).toBeCalled();
     });
 
-    test('The ActionButton closeModal', () => {
+    test('The ActionButton close', () => {
         const CLOSE_FN = jest.fn();
         const ACTION_FN = jest.fn(() => Promise.resolve(1));
-        const wrapper = render(
-            <ActionButton
-                data-testid={TEST_ID}
-                actionFn={ACTION_FN}
-                close={CLOSE_FN}
-            />
+        const { container } = render(
+            <ActionButton actionFn={ACTION_FN} close={CLOSE_FN} />
         );
-        const button = wrapper.getByTestId(TEST_ID);
-
+        const button = container.querySelector('.mo-btn')!;
         fireEvent.click(button);
         expect(ACTION_FN).toBeCalled();
     });
diff --git a/src/components/dialog/__tests__/confirm.test.tsx b/src/components/dialog/__tests__/confirm.test.tsx
index 57d1ade3c..9c3edac4f 100644
--- a/src/components/dialog/__tests__/confirm.test.tsx
+++ b/src/components/dialog/__tests__/confirm.test.tsx
@@ -68,9 +68,6 @@ describe('Test Confirm Component', () => {
             const icon = querySelector('.codicon-warning');
             expect(icon).not.toBeNull();
 
-            const title = querySelector('.mo-modal-title');
-            expect(title?.textContent).toBe(TEST_TITLE);
-
             const confirmTitle = querySelector(`.${textConfirmClassName}`);
             expect(confirmTitle?.textContent).toBe(TEST_TITLE);
 

From b25860e208316369f2451e61fcea1e2ac82d7625 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 12:44:51 +0800
Subject: [PATCH 6/7] test: correct test cases

---
 src/components/dialog/confirmDialog.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/confirmDialog.tsx b/src/components/dialog/confirmDialog.tsx
index d80c794d6..c344f4701 100644
--- a/src/components/dialog/confirmDialog.tsx
+++ b/src/components/dialog/confirmDialog.tsx
@@ -55,7 +55,11 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     );
 
     const cancelButton = okCancel && (
-        <ActionButton actionFn={onCancel} close={close} {...cancelButtonProps}>
+        <ActionButton
+            actionFn={onCancel}
+            close={close}
+            buttonProps={cancelButtonProps}
+        >
             {cancelText}
         </ActionButton>
     );
@@ -102,7 +106,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                                 <ActionButton
                                     actionFn={onOk}
                                     close={close}
-                                    {...okButtonProps}
+                                    buttonProps={okButtonProps}
                                 >
                                     {okText}
                                 </ActionButton>

From b043b4ff57a6c3b39608a90751a642a994b2ad13 Mon Sep 17 00:00:00 2001
From: mumiao <1270865802zl@gmail.com>
Date: Fri, 21 Oct 2022 16:01:28 +0800
Subject: [PATCH 7/7] fix: correct ActionButtonProps interface

---
 src/components/dialog/actionButton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/actionButton.tsx b/src/components/dialog/actionButton.tsx
index 1219e296f..819c05b46 100644
--- a/src/components/dialog/actionButton.tsx
+++ b/src/components/dialog/actionButton.tsx
@@ -1,9 +1,10 @@
 import React, { useRef } from 'react';
 import { Button, IButtonProps } from 'mo/components/button';
-export interface ActionButtonProps extends IButtonProps {
+export interface ActionButtonProps {
     actionFn?: (...args: any[]) => any | PromiseLike<any>;
     close?: Function;
     buttonProps?: IButtonProps;
+    children?: React.ReactNode;
 }
 
 const ActionButton: React.FC<ActionButtonProps> = (props) => {