refactor: optimize modal confirm button style and fix redundacy heade… (

#810)

* refactor: optimize modal confirm button style and fix redundacy header for confirmDialog Component

* fix: resolve modal.confirm can not destory problems

* ci: fix closeModal rename problems

* ci: fix lint error

* test: fix test cases

* test: correct test cases

* fix: correct ActionButtonProps interface

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]}
 />
 `;

src/components/dialog/__tests__/actionbutton.test.tsx

@@ -4,48 +4,34 @@ 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();
         const component = renderer.create(
-            <ActionButton closeModal={TEST_FN}></ActionButton>
+            <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}
-                closeModal={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}
-                closeModal={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();
     });

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);
 

src/components/dialog/actionButton.tsx

@@ -1,21 +1,23 @@
 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>;
-    closeModal: Function;
+    close?: Function;
+    buttonProps?: IButtonProps;
+    children?: React.ReactNode;
 }
 
 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 +28,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>
     );

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(
@@ -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);

src/components/dialog/confirmDialog.tsx

@@ -29,26 +29,25 @@ 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,
         maskClosable = false,
         transitionName = 'zoom',
         maskTransitionName = 'fade',
         type,
-        ...resetProps
+        visible,
     } = props;
 
     const confirmDescriperClassName = iconConfirmClassName(type);
-
     const classString = classNames(
         confirmClassName,
         confirmDescriperClassName,
@@ -58,8 +57,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     const cancelButton = okCancel && (
         <ActionButton
             actionFn={onCancel}
-            closeModal={close}
-            {...cancelButtonProps}
+            close={close}
+            buttonProps={cancelButtonProps}
         >
             {cancelText}
         </ActionButton>
@@ -73,16 +72,17 @@ 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}
+            footer=""
+            title=""
+            maskStyle={maskStyle}
+            visible={visible}
         >
             <div className={containerConfirmClassName} style={bodyStyle}>
                 <div className={contentConfirmClassName}>
@@ -105,8 +105,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                             {
                                 <ActionButton
                                     actionFn={onOk}
-                                    closeModal={close}
-                                    {...okButtonProps}
+                                    close={close}
+                                    buttonProps={okButtonProps}
                                 >
                                     {okText}
                                 </ActionButton>

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;
 

src/components/dialog/style.scss

@@ -67,12 +67,14 @@
     }
 
     &-footer {
+        border-radius: 0 0 2px 2px;
         display: flex;
-        font-size: 13px;
+        flex-direction: row;
         justify-content: flex-end;
-        padding: 20px 10px 10px;
+        padding: 10px 16px;
 
-        .mo-botton {
+        .mo-btn {
+            margin-left: 8px;
             width: fit-content;
         }
     }
@@ -98,10 +100,10 @@
         &--x {
             display: block;
             font-size: 16px;
-            height: 40px;
+            height: 54px;
             line-height: 40px;
             text-align: center;
-            width: 40px;
+            width: 54px;
         }
     }
 }
@@ -155,7 +157,13 @@
 
     &__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;
+        }
     }
 }

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');
             },
         });
     }