chore: code optimization (#421)

Author: li-jia-nan

src/Dialog/Content/MemoChildren.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 export type MemoChildrenProps = {
   shouldUpdate: boolean;
   children: React.ReactNode;
-}
+};
 
 export default React.memo(
   ({ children }: MemoChildrenProps) => children as React.ReactElement,

src/Dialog/Content/Panel.tsx

@@ -81,23 +81,26 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
     contentStyle.height = height;
   }
   // ================================ Render ================================
-  let footerNode: React.ReactNode;
-  if (footer) {
-    footerNode = <div className={classNames(`${prefixCls}-footer`, modalClassNames?.footer)} style={{...modalStyles?.footer}}>{footer}</div>;
-  }
+  const footerNode = footer ? (
+    <div
+      className={classNames(`${prefixCls}-footer`, modalClassNames?.footer)}
+      style={{ ...modalStyles?.footer }}
+    >
+      {footer}
+    </div>
+  ) : null;
 
-  let headerNode: React.ReactNode;
-  if (title) {
-    headerNode = (
-      <div className={classNames(`${prefixCls}-header`, modalClassNames?.header)} style={{...modalStyles?.header}}>
-        <div className={`${prefixCls}-title`} id={ariaId}>
-          {title}
-        </div>
+  const headerNode = title ? (
+    <div
+      className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
+      style={{ ...modalStyles?.header }}
+    >
+      <div className={`${prefixCls}-title`} id={ariaId}>
+        {title}
       </div>
-    );
-  }
+    </div>
+  ) : null;
 
-  
   const closableObj = useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {
       return closable;
@@ -106,24 +109,34 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       return { closeIcon: closeIcon ?? <span className={`${prefixCls}-close-x`} /> };
     }
     return {};
-  }, [closable, closeIcon]);
+  }, [closable, closeIcon, prefixCls]);
 
   const ariaProps = pickAttrs(closableObj, true);
-  
-  let closer: React.ReactNode;
-  if (closable) {
-    closer = (
-      <button type="button" onClick={onClose} aria-label="Close" {...ariaProps} className={`${prefixCls}-close`}>
-        {closableObj.closeIcon}
-      </button>
-    );
-  }
+
+  const closerNode = closable ? (
+    <button
+      type="button"
+      onClick={onClose}
+      aria-label="Close"
+      {...ariaProps}
+      className={`${prefixCls}-close`}
+    >
+      {closableObj.closeIcon}
+    </button>
+  ) : null;
 
   const content = (
-    <div className={classNames(`${prefixCls}-content`, modalClassNames?.content)} style={modalStyles?.content}>
-      {closer}
+    <div
+      className={classNames(`${prefixCls}-content`, modalClassNames?.content)}
+      style={modalStyles?.content}
+    >
+      {closerNode}
       {headerNode}
-      <div className={classNames(`${prefixCls}-body`, modalClassNames?.body)} style={{...bodyStyle, ...modalStyles?.body}} {...bodyProps}>
+      <div
+        className={classNames(`${prefixCls}-body`, modalClassNames?.body)}
+        style={{ ...bodyStyle, ...modalStyles?.body }}
+        {...bodyProps}
+      >
         {children}
       </div>
       {footerNode}
@@ -137,10 +150,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       aria-labelledby={title ? ariaId : null}
       aria-modal="true"
       ref={mergedRef}
-      style={{
-        ...style,
-        ...contentStyle,
-      }}
+      style={{ ...style, ...contentStyle }}
       className={classNames(prefixCls, className)}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}

src/Dialog/Mask.tsx

@@ -11,9 +11,8 @@ export type MaskProps = {
   className?: string;
 };
 
-export default function Mask(props: MaskProps) {
+const Mask: React.FC<MaskProps> = (props) => {
   const { prefixCls, style, visible, maskProps, motionName, className } = props;
-
   return (
     <CSSMotion
       key="mask"
@@ -31,4 +30,6 @@ export default function Mask(props: MaskProps) {
       )}
     </CSSMotion>
   );
-}
+};
+
+export default Mask;

src/Dialog/index.tsx

@@ -12,15 +12,14 @@ import type { ContentRef } from './Content/Panel';
 import Mask from './Mask';
 import { warning } from 'rc-util/lib/warning';
 
-export default function Dialog(props: IDialogPropTypes) {
+const Dialog: React.FC<IDialogPropTypes> = (props) => {
   const {
     prefixCls = 'rc-dialog',
     zIndex,
     visible = false,
     keyboard = true,
     focusTriggerAfterClose = true,
     // scrollLocker,
-
     // Wrapper
     wrapStyle,
     wrapClassName,
@@ -47,12 +46,12 @@ export default function Dialog(props: IDialogPropTypes) {
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
-    ["wrapStyle", "bodyStyle", "maskStyle"].forEach((prop) => {
+    ['wrapStyle', 'bodyStyle', 'maskStyle'].forEach((prop) => {
       // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
-      warning(!(prop in props), `${prop} is deprecated, please use styles instead.`)
+      warning(!(prop in props), `${prop} is deprecated, please use styles instead.`);
     });
-    if ("wrapClassName" in props) {
-      warning(false, `wrapClassName is deprecated, please use classNames instead.`)
+    if ('wrapClassName' in props) {
+      warning(false, `wrapClassName is deprecated, please use classNames instead.`);
     }
   }
 
@@ -167,6 +166,13 @@ export default function Dialog(props: IDialogPropTypes) {
     [],
   );
 
+  const mergedStyle: React.CSSProperties = {
+    zIndex,
+    ...wrapStyle,
+    ...modalStyles?.wrapper,
+    display: !animatedVisible ? 'none' : null,
+  };
+
   // ========================= Render =========================
   return (
     <div
@@ -177,11 +183,7 @@ export default function Dialog(props: IDialogPropTypes) {
         prefixCls={prefixCls}
         visible={mask && visible}
         motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
-        style={{
-          zIndex,
-          ...maskStyle,
-          ...modalStyles?.mask,
-        }}
+        style={{ zIndex, ...maskStyle, ...modalStyles?.mask }}
         maskProps={maskProps}
         className={modalClassNames?.mask}
       />
@@ -191,7 +193,7 @@ export default function Dialog(props: IDialogPropTypes) {
         className={classNames(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}
-        style={{ zIndex, ...wrapStyle, ...modalStyles?.wrapper, display: !animatedVisible ? 'none' : null }}
+        style={mergedStyle}
         {...wrapProps}
       >
         <Content
@@ -210,4 +212,6 @@ export default function Dialog(props: IDialogPropTypes) {
       </div>
     </div>
   );
-}
+};
+
+export default Dialog;

src/DialogWrap.tsx

@@ -13,7 +13,7 @@ import type { IDialogPropTypes } from './IDialogPropTypes';
  * So here should add a child (div element) to custom container.
  * */
 
-const DialogWrap: React.FC<IDialogPropTypes> = (props: IDialogPropTypes) => {
+const DialogWrap: React.FC<IDialogPropTypes> = (props) => {
   const {
     visible,
     getContainer,

src/IDialogPropTypes.tsx

@@ -24,7 +24,7 @@ export type IDialogPropTypes = {
   keyboard?: boolean;
   style?: CSSProperties;
   mask?: boolean;
-  children?: any;
+  children?: React.ReactNode;
   afterClose?: () => any;
   afterOpenChange?: (open: boolean) => void;
   onClose?: (e: SyntheticEvent) => any;