feat: extract the ClassName out of the function; Prevent duplicate execution

Author: mumiao

src/components/button/index.tsx

@@ -18,7 +18,7 @@ const disableButtonClassName = getBEMModifier(
 );
 
 export function Button(props: React.PropsWithChildren<IButton>) {
-    const { className, children, size = 'normal', onClick, ...custom } = props;
+    const { className, children, size = 'normal', ...custom } = props;
 
     const disabled = props.disabled ? disableButtonClassName : null;
 

src/components/dialog/ConfirmDialog.tsx

@@ -15,6 +15,11 @@ interface ConfirmDialogProps extends IModalFuncProps {
 }
 
 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 {
@@ -51,18 +56,11 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         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(
         confirmClassName,
         confirmDescriperClassName,
         className
     );
-
     const cancelButton = okCancel && (
         <ActionButton
             actionFn={onCancel}

src/components/dialog/modal.tsx

@@ -10,27 +10,6 @@ import {
 } from 'mo/common/className';
 import { Icon } from 'mo/components/icon';
 import { Button, IButton } from 'mo/components/button';
-
-let mousePosition: any;
-
-const getClickPosition = (e: MouseEvent) => {
-    mousePosition = {
-        x: e.pageX,
-        y: e.pageY,
-    };
-    setTimeout(() => {
-        mousePosition = null;
-    }, 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;
@@ -41,7 +20,6 @@ export interface IModalProps extends IDialogPropTypes {
     cancelButtonProps?: IButton;
     okCancel?: boolean;
 }
-
 export interface IModalFuncProps extends IDialogPropTypes {
     cancelText?: React.ReactNode;
     okText?: React.ReactNode;
@@ -56,6 +34,33 @@ export interface IModalFuncProps extends IDialogPropTypes {
     type?: string;
 }
 
+export const destroyFns: Array<() => void> = [];
+export const modalClassName = prefixClaName('modal');
+
+let mousePosition: any;
+
+const getClickPosition = (e: MouseEvent) => {
+    mousePosition = {
+        x: e.pageX,
+        y: e.pageY,
+    };
+    setTimeout(() => {
+        mousePosition = null;
+    }, 100);
+};
+
+if (typeof window !== 'undefined' && window.document?.documentElement) {
+    document.documentElement.addEventListener('click', getClickPosition, true);
+}
+
+const closeClassName = getBEMElement(modalClassName, 'close');
+const closeDescriptorClassName = getBEMModifier(`${closeClassName}`, 'x');
+const closeIconToRender = (
+    <span className={closeDescriptorClassName}>
+        <Icon type="close" />
+    </span>
+);
+
 const Modal: React.FC<IModalProps> = (props) => {
     const handleCancel = (e: React.SyntheticEvent<Element, Event>) => {
         const { onCancel } = props;
@@ -82,15 +87,6 @@ const Modal: React.FC<IModalProps> = (props) => {
         [getBEMModifier(`${modalClassName}`, 'centered')]: !!centered,
     });
 
-    const closeClassName = getBEMElement(modalClassName, 'close');
-    const closeDescriptorClassName = getBEMModifier(`${closeClassName}`, 'x');
-
-    const closeIconToRender = (
-        <span className={closeDescriptorClassName}>
-            <Icon type="close" />
-        </span>
-    );
-
     const renderFooter = () => {
         const { footer, cancelButtonProps, okButtonProps } = props;
         if (footer !== undefined) return footer;