feat: finish dialog interface

DTStack · Dec 10, 2020 · 8642a90 · 8642a90
1 parent c8a7999
commit 8642a90
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 195 deletions.
diff --git a/src/components/dialog/ConfirmDialog.tsx b/src/components/dialog/ConfirmDialog.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { classNames, prefixClaName } from 'mo/common/className';
+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?: any;
+    actions?: React.ReactNode;
 }
 
+export const confirmClassName = prefixClaName('confirm');
+
 const ConfirmDialog = (props: ConfirmDialogProps) => {
     const {
         actions,
@@ -23,30 +25,34 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         centered,
         getContainer,
         maskStyle,
-        okText = 'Save',
+        okText = 'Ok',
         okButtonProps,
         cancelText = 'Cancel',
         cancelButtonProps,
-        prefixCls,
         bodyStyle,
-        closable = false,
+        closable = true,
         closeIcon,
+        className,
         okCancel,
+        width = 520,
+        style = {},
+        mask = true,
+        maskClosable = false,
+        transitionName = 'zoom',
+        maskTransitionName = 'fade',
     } = props;
-    const contentPrefixCls = `${prefixCls}-confirm`;
-    const width = props.width || 416;
-    const style = props.style || {};
-    const mask = props.mask === undefined ? true : props.mask;
-    // 默认为 false，保持旧版默认行为
-    const maskClosable =
-        props.maskClosable === undefined ? false : props.maskClosable;
-    const transitionName = props.transitionName || 'zoom';
-    const maskTransitionName = props.maskTransitionName || 'fade';
+
+    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 btnsClassName = getBEMElement(confirmClassName, 'btns');
 
     const classString = classNames(
-        contentPrefixCls,
-        `${contentPrefixCls}-${props.type}`,
-        props.className,
+        confirmClassName,
+        confirmDescriperClassName,
+        className,
     );
 
     const cancelButton = okCancel && (
@@ -58,12 +64,13 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
           {cancelText}
         </ActionButton>
       );
+
     return (
         <Dialog
-            prefixCls={prefixCls}
+            prefixCls={confirmClassName}
             className={classString}
             wrapClassName={classNames({
-                [`${contentPrefixCls}-centered`]: !!props.centered,
+                [getBEMElement(confirmClassName, 'centered')]: !!props.centered,
             })}
             onCancel={() => close({ triggerCancel: true })}
             visible={visible}
@@ -84,19 +91,21 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
             closable={closable}
             closeIcon={closeIcon}
         >
-            <div className={`${contentPrefixCls}-body`} style={bodyStyle}>
-                <div className={`${contentPrefixCls}__icon`}> {icon} </div>
-                <div className={`${contentPrefixCls}__message`}>
-                    {props.title !== undefined && (
-                        <span className={`${contentPrefixCls}__message--text`}>
-                            {props.title}
-                        </span>
-                    )}
-                    <div className={`${contentPrefixCls}__message--detail`}>
-                        {props.content}
+            <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={`${contentPrefixCls}__btns`}>
+                <div className={btnsClassName}>
                 {
                     actions === undefined ? (
                         <>

diff --git a/src/components/dialog/Modal.tsx b/src/components/dialog/Modal.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 import Dialog from 'rc-dialog';
 import { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
 
-import { classNames, prefixClaName, 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';
 
-let mousePosition;
+let mousePosition: any;
 
 const getClickPosition = (e: MouseEvent) => {
     mousePosition = {
@@ -18,13 +18,15 @@ const getClickPosition = (e: MouseEvent) => {
     }, 100);
 };
 
-// 只有点击事件支持从鼠标位置动画展开
 if (typeof window !== 'undefined' && window.document?.documentElement) {
     document.documentElement.addEventListener('click', getClickPosition, true);
 }
 
 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;
@@ -67,37 +69,43 @@ const Modal: React.FC<IModalProps> = (props) => {
         centered,
         getContainer,
         closeIcon,
-        cancelText = 'Cancel',
+        cancelText = 'Ok',
         okText = 'Save',
         ...restProps
     } = props;
 
-    const prefixCls = prefixClaName('modal');
+    const wrapClassNameExtended = classNames(wrapClassName, {
+        [getBEMModifier(`${modalClassName}`, 'centered')]: !!centered,
+    });
+
+    const closeClassName = getBEMElement(modalClassName, 'close');
+    const closeDescriptorClassName = getBEMModifier(`${closeClassName}`, 'x');
 
     const closeIconToRender = (
-        <span className={getBEMModifier(`${prefixCls}-close`, 'x')}><Icon type="close"/></span>
+        <span className={closeDescriptorClassName}><Icon type="close"/></span>
     );
 
-    const wrapClassNameExtended = classNames(wrapClassName, {
-        [getBEMModifier(`${prefixCls}`, 'centered')]: !!centered,
-    });
-    console.log(props)
+    const renderFooter = () => {
+        const { footer, cancelButtonProps, okButtonProps } = props
+        if (footer !== undefined) return footer
+        return (
+            <>
+                <Button onClick={handleCancel} {...cancelButtonProps }>
+                    {cancelText}
+                </Button>
+                <Button onClick={handleOk} {...okButtonProps }>
+                    {okText}
+                </Button>
+            </>
+        )
+    }
     return (
         <Dialog
             {...restProps}
             getContainer={getContainer}
-            prefixCls={prefixCls}
+            prefixCls={modalClassName}
             wrapClassName={wrapClassNameExtended}
-            footer={footer === undefined ? (
-                <>
-                    <Button onClick={handleCancel} {...props.cancelButtonProps}>
-                        {cancelText}
-                    </Button>
-                    <Button onClick={handleOk} {...props.okButtonProps}>
-                        {okText}
-                    </Button>
-                </>
-            ) : footer}
+            footer={renderFooter()}
             visible={visible}
             mousePosition={mousePosition}
             onClose={handleCancel}

diff --git a/src/components/dialog/confirm.tsx b/src/components/dialog/confirm.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { prefixClaName } from 'mo/common/className';
+import { Icon } from 'mo/components/icon';
 import { IModalFuncProps, destroyFns } from './modal';
 import ConfirmDialog from './ConfirmDialog';
 
@@ -49,7 +49,6 @@ export default function confirm(config: IModalFuncProps) {
             ReactDOM.render(
                 <ConfirmDialog
                     {...props}
-                    prefixCls={prefixClaName('modal')}
                     okText={okText}
                     cancelText={cancelText}
                 />,
@@ -62,7 +61,7 @@ export default function confirm(config: IModalFuncProps) {
         currentConfig = {
             ...currentConfig,
             visible: false,
-            afterClose: destroy.bind(this, ...args),
+            // afterClose: destroy.bind(this, ...args),
         };
         render(currentConfig);
     }
@@ -80,6 +79,7 @@ export function withWarn(props: IModalFuncProps): IModalFuncProps {
     return {
         type: 'warning',
         okCancel: false,
+        icon: <Icon type="warning"/>,
         ...props,
     };
 }
@@ -88,6 +88,7 @@ export function withConfirm(props: IModalFuncProps): IModalFuncProps {
     return {
       type: 'confirm',
       okCancel: true,
+      icon: <Icon type="warning"/>,
       ...props,
     };
 }