feat: extract colorValue to theme

Author: mumiao

src/components/Modal/actionButton.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { classNames, getBEMElement, getBEMModifier, prefixClaName } from 'mo/common/className';
+import {
+    classNames,
+    getBEMElement,
+    getBEMModifier,
+    prefixClaName,
+} from 'mo/common/className';
 import Dialog, { IModalFuncProps } from './modal';
 import ActionButton from './actionButton';
 
@@ -42,28 +47,31 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         maskTransitionName = 'fade',
     } = props;
 
-    const confirmDescriperClassName = getBEMElement(confirmClassName, `${props.type}`)
+    const confirmDescriperClassName = getBEMElement(
+        confirmClassName,
+        `${props.type}`
+    );
     const containerClassName = getBEMElement(confirmClassName, 'container');
     const indicatorClassName = getBEMElement(confirmClassName, 'indicator');
-    const contentClassName =  getBEMElement(confirmClassName, 'content');
-    const messageClassName =  getBEMElement(confirmClassName, 'message');
+    const contentClassName = getBEMElement(confirmClassName, 'content');
+    const messageClassName = getBEMElement(confirmClassName, 'message');
     const btnsClassName = getBEMElement(confirmClassName, 'btns');
 
     const classString = classNames(
         confirmClassName,
         confirmDescriperClassName,
-        className,
+        className
     );
 
     const cancelButton = okCancel && (
         <ActionButton
-          actionFn={onCancel}
-          closeModal={close}
-          buttonProps={cancelButtonProps}
+            actionFn={onCancel}
+            closeModal={close}
+            buttonProps={cancelButtonProps}
         >
-          {cancelText}
+            {cancelText}
         </ActionButton>
-      );
+    );
 
     return (
         <Dialog
@@ -96,31 +104,42 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
                     <div className={indicatorClassName}> {icon} </div>
                     <div className={messageClassName}>
                         {props.title !== undefined && (
-                            <span className={getBEMModifier(messageClassName, 'text')}>
+                            <span
+                                className={getBEMModifier(
+                                    messageClassName,
+                                    'text'
+                                )}
+                            >
                                 {props.title}
                             </span>
                         )}
-                        <div className={`${getBEMModifier(messageClassName, 'detail')}`}>
+                        <div
+                            className={`${getBEMModifier(
+                                messageClassName,
+                                'detail'
+                            )}`}
+                        >
                             {props.content}
                         </div>
                     </div>
                 </div>
                 <div className={btnsClassName}>
-                {
-                    actions === undefined ? (
+                    {actions === undefined ? (
                         <>
                             {cancelButton}
-                            {<ActionButton
-                                actionFn={onOk}
-                                closeModal={close}
-                                buttonProps={okButtonProps}
-                            >
-                                {okText}
-                            </ActionButton>
-                        }
+                            {
+                                <ActionButton
+                                    actionFn={onOk}
+                                    closeModal={close}
+                                    buttonProps={okButtonProps}
+                                >
+                                    {okText}
+                                </ActionButton>
+                            }
                         </>
-                    ) : actions
-                }
+                    ) : (
+                        actions
+                    )}
                 </div>
             </div>
         </Dialog>

src/components/Modal/ConfirmDialog.tsx src/components/dialog/ConfirmDialog.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Button, IButton } from 'mo/components/button';
+export interface ActionButtonProps {
+    actionFn?: (...args: any[]) => any | PromiseLike<any>;
+    closeModal: Function;
+    buttonProps?: IButton;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = (props) => {
+    const clickedRef = React.useRef<boolean>(false);
+
+    const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
+        const { closeModal } = props;
+        if (!returnValueOfOnOk || !returnValueOfOnOk.then) {
+            return;
+        }
+        returnValueOfOnOk.then(
+            (...args: any[]) => {
+                closeModal(...args);
+            },
+            (e: Error) => {
+                // eslint-disable-next-line no-console
+                console.error(e);
+                clickedRef.current = false;
+            }
+        );
+    };
+
+    const onClick = () => {
+        const { actionFn, closeModal } = props;
+        if (clickedRef.current) {
+            return;
+        }
+        clickedRef.current = true;
+        if (!actionFn) {
+            closeModal();
+            return;
+        }
+        let returnValueOfOnOk;
+        if (actionFn.length) {
+            returnValueOfOnOk = actionFn(closeModal);
+            clickedRef.current = false;
+        } else {
+            returnValueOfOnOk = actionFn();
+            if (!returnValueOfOnOk) {
+                closeModal();
+                return;
+            }
+        }
+        handlePromiseOnOk(returnValueOfOnOk);
+    };
+
+    const { children, buttonProps } = props;
+    return (
+        <Button onClick={onClick} {...buttonProps}>
+            {children}
+        </Button>
+    );
+};
+
+export default ActionButton;

src/components/dialog/actionButton.tsx

@@ -52,8 +52,8 @@ export default function confirm(config: IModalFuncProps) {
                     okText={okText}
                     cancelText={cancelText}
                 />,
-                div,
-            )
+                div
+            );
         });
     }
 
@@ -79,16 +79,16 @@ export function withWarn(props: IModalFuncProps): IModalFuncProps {
     return {
         type: 'warning',
         okCancel: false,
-        icon: <Icon type="warning"/>,
+        icon: <Icon type="warning" />,
         ...props,
     };
 }
 
 export function withConfirm(props: IModalFuncProps): IModalFuncProps {
     return {
-      type: 'confirm',
-      okCancel: true,
-      icon: <Icon type="warning"/>,
-      ...props,
+        type: 'confirm',
+        okCancel: true,
+        icon: <Icon type="warning" />,
+        ...props,
     };
-}
+}

src/components/Modal/confirm.tsx src/components/dialog/confirm.tsx

@@ -1,6 +1,10 @@
-import './style.scss'
+import './style.scss';
 import OriginModal, { IModalFuncProps, destroyFns } from './modal';
-import confirm, { withWarn, withConfirm, ModalStaticFunctions } from './confirm';
+import confirm, {
+    withWarn,
+    withConfirm,
+    ModalStaticFunctions,
+} from './confirm';
 
 function modalWarn(props: IModalFuncProps) {
     return confirm(withWarn(props));
@@ -18,7 +22,7 @@ Modal.warn = modalWarn;
 Modal.confirm = function confirmFn(props: IModalFuncProps) {
     return confirm(withConfirm(props));
 };
-  
+
 Modal.destroyAll = function destroyAllFn() {
     while (destroyFns.length) {
         const close = destroyFns.pop();

src/components/Modal/index.tsx src/components/dialog/index.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import Dialog from 'rc-dialog';
 import { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
 
-import { classNames, prefixClaName, getBEMElement ,getBEMModifier} from 'mo/common/className';
+import {
+    classNames,
+    prefixClaName,
+    getBEMElement,
+    getBEMModifier,
+} from 'mo/common/className';
 import { Icon } from 'mo/components/icon';
 import { Button, IButton } from 'mo/components/button';
 
@@ -26,7 +31,6 @@ export const destroyFns: Array<() => void> = [];
 
 export const modalClassName = prefixClaName('modal');
 
-
 export interface IModalProps extends IDialogPropTypes {
     onOk?: (e: React.MouseEvent<HTMLElement>) => void;
     onCancel?: (e: React.SyntheticEvent<Element, Event>) => void;
@@ -82,23 +86,25 @@ const Modal: React.FC<IModalProps> = (props) => {
     const closeDescriptorClassName = getBEMModifier(`${closeClassName}`, 'x');
 
     const closeIconToRender = (
-        <span className={closeDescriptorClassName}><Icon type="close"/></span>
+        <span className={closeDescriptorClassName}>
+            <Icon type="close" />
+        </span>
     );
 
     const renderFooter = () => {
-        const { footer, cancelButtonProps, okButtonProps } = props
-        if (footer !== undefined) return footer
+        const { footer, cancelButtonProps, okButtonProps } = props;
+        if (footer !== undefined) return footer;
         return (
             <>
-                <Button onClick={handleCancel} {...cancelButtonProps }>
+                <Button onClick={handleCancel} {...cancelButtonProps}>
                     {cancelText}
                 </Button>
-                <Button onClick={handleOk} {...okButtonProps }>
+                <Button onClick={handleOk} {...okButtonProps}>
                     {okText}
                 </Button>
             </>
-        )
-    }
+        );
+    };
     return (
         <Dialog
             {...restProps}

src/components/Modal/modal.tsx src/components/dialog/modal.tsx

@@ -93,15 +93,14 @@ $confirm: 'confirm';
             width: 40px;
         }
     }
-
 }
 
 #{prefix($confirm)} {
     &__container {
         display: flex;
         flex-flow: column wrap;
         font-size: 14px;
-        padding: 25px 10px 10px 10;
+        padding: 25px 10px 10px;
     }
 
     &__indicator {
@@ -143,4 +142,4 @@ $confirm: 'confirm';
         justify-content: flex-end;
         padding: 20px 10px 10px;
     }
-}
+}