feat: resolve conflicts

Author: mumiao

package.json

@@ -31,10 +31,11 @@
         "immutability-helper": "^3.1.1",
         "loadsh": "^0.0.4",
         "monaco-editor": "^0.21.2",
-        "rc-collapse": "^2.0.1",
-        "rc-textarea": "^0.3.1",
-        "rc-tree": "^3.10.0",
-        "rc-util": "^5.5.0",
+        "rc-collapse": "~2.0.1",
+        "rc-dialog": "8.2.1",
+        "rc-textarea": "~0.3.1",
+        "rc-tree": "~3.10.0",
+        "rc-util": "~5.5.0",
         "react": "^16.13.1",
         "react-dnd": "^9.3.4",
         "react-dnd-html5-backend": "^9.3.4",

src/common/event/eventEmitter.ts

@@ -6,7 +6,7 @@ export class EventEmitter {
         if (events && events.length > 0) {
             // The log for development
             events.forEach((callEvent) => {
-                callEvent(args);
+                callEvent(...args);
             });
         }
     }

src/common/utils.ts

@@ -7,7 +7,6 @@ export function cloneInstance<T>(origin: T) {
         const prototypes = Object.getPrototypeOf(origin) || {};
         Object.keys(prototypes).forEach((prop) => {
             if (typeof prototypes[prop] === 'function') {
-                console.log('bind:', prototypes[prop], origin);
                 prototypes[prop].bind(origin);
             }
         });
@@ -16,6 +15,16 @@ export function cloneInstance<T>(origin: T) {
             ...prototypes,
         };
     } catch (e) {
-        console.error('cloneInstance error:', e);
+        console.error('Function cloneInstance error:', e);
     }
 }
+
+/**
+ * Merge multiple functions to one function
+ * @param funcs
+ */
+export function mergeFunctions(...funcs) {
+    return function (...args) {
+        funcs.filter((fn) => !!fn).forEach((fn) => fn?.(...args));
+    };
+}

src/components/button/index.tsx

@@ -4,26 +4,32 @@ import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
 
 type BtnSizeType = 'normal' | 'large';
 export interface IButton extends React.ComponentProps<'a'> {
-    /**
-     * Default size is normal
-     */
+    disabled?: boolean;
     size?: BtnSizeType;
+    onClick?(event: React.MouseEvent): void;
 }
 
 const defaultButtonClassName = prefixClaName('btn');
 const normalButtonClassName = getBEMModifier(defaultButtonClassName, 'normal');
 const largeButtonClassName = getBEMModifier(defaultButtonClassName, 'large');
+const disableButtonClassName = getBEMModifier(
+    defaultButtonClassName,
+    'disabled'
+);
 
 export function Button(props: React.PropsWithChildren<IButton>) {
     const { className, children, size = 'normal', ...custom } = props;
 
+    const disabled = props.disabled ? disableButtonClassName : null;
+
     const sizeClassName =
         size === 'large' ? largeButtonClassName : normalButtonClassName;
 
     const claNames = classNames(
+        className,
         defaultButtonClassName,
         sizeClassName,
-        className
+        disabled
     );
 
     return (

src/components/button/style.scss

@@ -7,18 +7,24 @@
     cursor: pointer;
     display: flex;
     justify-content: center;
-    margin: 10px;
+    margin: 4px 5px;
     outline-offset: 2px;
+    padding: 4px 10px;
     text-align: center;
-    width: 100%;
 
     &--normal {
-        padding: 4px;
+        padding: 4px 15px;
     }
 
     &--large {
         font-size: 16px;
-        padding: 8px;
+        padding: 8px 15px;
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+        pointer-events: none;
     }
 
     &:hover {

src/components/collapse/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
 import RcCollapse, { Panel } from 'rc-collapse';
-import { CollapseProps } from 'rc-collapse/lib/interface';
 import Toolbar from 'mo/components/toolbar';
 import { Icon } from 'mo/components/icon';
 import { prefixClaName, classNames } from 'mo/common/className';
@@ -10,7 +9,7 @@ import { IPanelItem } from 'mo/model/workbench/explorer';
 interface IExpandProps {
     isActive?: boolean;
 }
-interface ICollapseProps extends CollapseProps {
+interface ICollapseProps {
     data?: IPanelItem[];
     className?: string;
 }

src/components/dialog/ConfirmDialog.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import {
+    classNames,
+    getBEMElement,
+    getBEMModifier,
+    prefixClaName,
+} from 'mo/common/className';
+import Dialog, { IModalFuncProps } from './modal';
+import ActionButton from './actionButton';
+
+interface ConfirmDialogProps extends IModalFuncProps {
+    afterClose?: () => void;
+    close: (...args: any[]) => void;
+    actions?: React.ReactNode;
+}
+
+export const confirmClassName = prefixClaName('confirm');
+const containerClassName = getBEMElement(confirmClassName, 'container');
+const indicatorClassName = getBEMElement(confirmClassName, 'indicator');
+const contentClassName = getBEMElement(confirmClassName, 'content');
+const messageClassName = getBEMElement(confirmClassName, 'message');
+const btnsClassName = getBEMElement(confirmClassName, 'btns');
+
+const ConfirmDialog = (props: ConfirmDialogProps) => {
+    const {
+        actions,
+        icon,
+        onCancel,
+        onOk,
+        close,
+        maskStyle,
+        okText = 'delete',
+        okButtonProps,
+        cancelText = 'cancel',
+        cancelButtonProps,
+        bodyStyle,
+        closable = true,
+        className,
+        okCancel,
+        width = 520,
+        style = {},
+        mask = true,
+        maskClosable = false,
+        transitionName = 'zoom',
+        maskTransitionName = 'fade',
+        ...resetProps
+    } = props;
+
+    const confirmDescriperClassName = getBEMElement(
+        confirmClassName,
+        `${props.type}`
+    );
+    const classString = classNames(
+        confirmClassName,
+        confirmDescriperClassName,
+        className
+    );
+    const cancelButton = okCancel && (
+        <ActionButton
+            actionFn={onCancel}
+            closeModal={close}
+            {...cancelButtonProps}
+        >
+            {cancelText}
+        </ActionButton>
+    );
+
+    return (
+        <Dialog
+            prefixCls={confirmClassName}
+            className={classString}
+            wrapClassName={classNames({
+                [getBEMModifier(
+                    confirmClassName,
+                    'centered'
+                )]: !!props.centered,
+            })}
+            onCancel={() => close({ triggerCancel: true })}
+            title=""
+            transitionName={transitionName}
+            footer=""
+            maskTransitionName={maskTransitionName}
+            mask={mask}
+            maskClosable={maskClosable}
+            style={style}
+            width={width}
+            closable={closable}
+            {...resetProps}
+        >
+            <div className={containerClassName} style={bodyStyle}>
+                <div className={contentClassName}>
+                    <div className={indicatorClassName}> {icon} </div>
+                    <div className={messageClassName}>
+                        {props.title !== undefined && (
+                            <span
+                                className={getBEMModifier(
+                                    messageClassName,
+                                    'text'
+                                )}
+                            >
+                                {props.title}
+                            </span>
+                        )}
+                        <div
+                            className={getBEMModifier(
+                                messageClassName,
+                                'detail'
+                            )}
+                        >
+                            {props.content}
+                        </div>
+                    </div>
+                </div>
+                <div className={btnsClassName}>
+                    {actions === undefined ? (
+                        <>
+                            {cancelButton}
+                            {
+                                <ActionButton
+                                    actionFn={onOk}
+                                    closeModal={close}
+                                    {...okButtonProps}
+                                >
+                                    {okText}
+                                </ActionButton>
+                            }
+                        </>
+                    ) : (
+                        actions
+                    )}
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+export default ConfirmDialog;

src/components/dialog/actionButton.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Button, IButton } from 'mo/components/button';
+export interface ActionButtonProps extends IButton {
+    actionFn?: (...args: any[]) => any | PromiseLike<any>;
+    closeModal: Function;
+}
+
+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, ...resetProps } = props;
+    return (
+        <Button onClick={onClick} {...resetProps}>
+            {children}
+        </Button>
+    );
+};
+
+export default ActionButton;