feat(modal): add antd modal method and useModal (#552)

#551

Author: LuckyFBB

src/index.ts

@@ -21,7 +21,7 @@ export { default as Image } from './image';
 export { default as Input } from './input';
 export { default as KeyEventListener } from './keyEventListener';
 export { default as MarkdownRender } from './markdownRender';
-export { default as Modal } from './modal';
+export { default as Modal } from './modal/modal';
 export { default as NotFound } from './notFound';
 export { default as ProgressBar } from './progressBar';
 export { default as ProgressLine } from './progressLine';

src/modal/index.tsx

@@ -1,53 +1,30 @@
-import React from 'react';
-import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
-import classNames from 'classnames';
-import { omit } from 'lodash-es';
+import { Modal as AntdModal } from 'antd';
+import { ModalStaticFunctions } from 'antd/lib/modal/confirm';
 
-import './index.scss';
+import InternalModal from './modal';
 
-export interface IModalProps extends ModalProps {
-    size?: 'small' | 'default' | 'middle' | 'large';
-    banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
-}
+type ModalType = typeof InternalModal &
+    ModalStaticFunctions & {
+        useModal: typeof AntdModal.useModal;
+        destroyAll: () => void;
+        config: typeof AntdModal.config;
+    };
 
-const getWidthFromSize = (size: IModalProps['size']) => {
-    if (size === 'small') return 400;
-    if (size === 'middle') return 640;
-    if (size === 'large') return 900;
-    return 520;
-};
+const { useModal, info, success, error, warning, confirm, destroyAll, config } = AntdModal;
 
-const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
-    if (typeof banner === 'object') return React.isValidElement(banner);
-    return true;
-};
+const Modal = InternalModal as ModalType;
 
-export default function InternalModal({
-    bodyStyle,
-    banner,
-    size = 'default',
-    children,
-    width,
-    className,
-    ...rest
-}: IModalProps) {
-    const finalWidth = width ?? getWidthFromSize(size);
+Object.assign(Modal, {
+    useModal,
+    info,
+    success,
+    error,
+    warning,
+    confirm,
+    destroyAll,
+    config,
+});
 
-    return (
-        <Modal
-            className={classNames('dtc-modal', className)}
-            bodyStyle={{ padding: 0, ...bodyStyle }}
-            width={finalWidth}
-            {...rest}
-        >
-            {banner && (
-                <Alert
-                    message={isValidBanner(banner) ? banner : banner.message}
-                    banner
-                    {...(isValidBanner(banner) ? {} : omit(banner, 'message'))}
-                />
-            )}
-            <section className="dtc-modal-body">{children}</section>
-        </Modal>
-    );
-}
+export { IModalProps } from './modal';
+
+export default Modal;

src/modal/modal.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Alert, type AlertProps, Modal as AntdModal, type ModalProps } from 'antd';
+import classNames from 'classnames';
+import { omit } from 'lodash-es';
+
+import './index.scss';
+
+export interface IModalProps extends ModalProps {
+    size?: 'small' | 'default' | 'middle' | 'large';
+    banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
+}
+
+const getWidthFromSize = (size: IModalProps['size']) => {
+    if (size === 'small') return 400;
+    if (size === 'middle') return 640;
+    if (size === 'large') return 900;
+    return 520;
+};
+
+const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
+    if (typeof banner === 'object') return React.isValidElement(banner);
+    return true;
+};
+
+export default function Modal({
+    bodyStyle,
+    banner,
+    size = 'default',
+    children,
+    width,
+    className,
+    ...rest
+}: IModalProps) {
+    const finalWidth = width ?? getWidthFromSize(size);
+
+    return (
+        <AntdModal
+            className={classNames('dtc-modal', className)}
+            bodyStyle={{ padding: 0, ...bodyStyle }}
+            width={finalWidth}
+            {...rest}
+        >
+            {banner && (
+                <Alert
+                    message={isValidBanner(banner) ? banner : banner.message}
+                    banner
+                    {...(isValidBanner(banner) ? {} : omit(banner, 'message'))}
+                />
+            )}
+            <section className="dtc-modal-body">{children}</section>
+        </AntdModal>
+    );
+}