feat(modal): add modal component (#1400)

Co-authored-by: ZhaoChen <ittisennsinn@gmail.com>

package.json

@@ -48,7 +48,7 @@
     "rc-animate": "^3.1.0",
     "rc-calendar": "9.15.11",
     "rc-checkbox": "^2.2.0",
-    "rc-dialog": "^8.1.0",
+    "rc-dialog": "^8.6.0",
     "rc-drawer": "^4.1.0",
     "rc-field-form": "^1.11.0",
     "rc-menu": "^8.5.1",

src/index.ts

@@ -40,7 +40,7 @@ export {
   ModalStaticFuncReturn,
   ModalStaticFuncType,
   ModalStaticFunc,
-} from './modal';
+} from './legacy/modal';
 export { default as Page, PageProps } from './page';
 export { default as Pagination, PaginationProps } from './pagination';
 export { default as Popconfirm, PopconfirmProps } from './legacy/popconfirm';

src/modal/CalloutModal.tsx → src/legacy/modal/CalloutModal.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import Modal from './Modal';
 import { ICalloutModalProps } from './interface';
-import usePrefixCls from '../utils/hooks/use-prefix-cls';
-import Button from '../legacy/button';
+import usePrefixCls from '../../utils/hooks/use-prefix-cls';
+import Button from '../../legacy/button';
 
 const CalloutModal: React.FC<ICalloutModalProps> = ({
   visible,

src/modal/Footer.tsx → src/legacy/modal/Footer.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import Button from '../legacy/button';
+import Button from '../../legacy/button';
 import { IFooterProps } from './interface';
 import ModalPrefixClsContext from './ModalContext';
 

src/legacy/modal/Modal.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useLocale, usePrefixCls } from '@gio-design/utils';
+import RcDialog from 'rc-dialog';
+import { CloseOutlined } from '@gio-design/icons';
+import { ButtonProps } from '../../legacy/button';
+import { IModalProps, ModalLocale } from './interface';
+import ModalPrefixClsContext from './ModalContext';
+import Title from './Title';
+import Footer from './Footer';
+import defaultLocale from './locales/zh-CN';
+
+const Modal: React.FC<IModalProps> = ({
+  prefixCls: customPrefixCls,
+  size = 'small',
+  className,
+  wrapClassName,
+  useBack,
+  title,
+  additionalFooter,
+  onBack,
+  closeAfterOk,
+  dropCloseButton,
+  okText: customizeOKText,
+  closeText: customizeCloseText,
+  okButtonProps,
+  closeButtonProps,
+  onOk,
+  onClose,
+  pending,
+  ...restProps
+}: IModalProps) => {
+  const prefix = usePrefixCls('modal', customPrefixCls);
+  const locale = useLocale('Modal');
+  const { closeText, okText } = {
+    ...defaultLocale,
+    ...locale,
+  } as ModalLocale;
+
+  const modalCls = classnames(className, {
+    [`${prefix}--small`]: size === 'small',
+    [`${prefix}--middle`]: size === 'middle',
+    [`${prefix}--full`]: size === 'full',
+  });
+  const wrapperCls = classnames(wrapClassName, `${prefix}__wrapper`);
+  const closeCls = classnames(`${prefix}__close`, {
+    [`${prefix}__close--disabled`]: pending,
+  });
+
+  const useOkBtn = !!onOk && typeof onOk === 'function';
+  let useFooter = useOkBtn || !dropCloseButton || !!additionalFooter;
+  if ('footer' in restProps && (restProps.footer === false || restProps.footer === null)) {
+    useFooter = false;
+  }
+  const okBtnProps: ButtonProps = {
+    loading: pending,
+    disabled: pending,
+    ...okButtonProps,
+  };
+  const closeBtnProps: ButtonProps = {
+    disabled: pending,
+    ...closeButtonProps,
+  };
+
+  const handleOk = async (e: React.MouseEvent<HTMLElement>) => {
+    if (onOk && typeof onOk === 'function') {
+      e.persist();
+      try {
+        await Promise.resolve(onOk(e));
+        if (closeAfterOk) {
+          onClose?.(e);
+        }
+      } catch (error) {
+        const err = error ?? 'onOk 执行 reject 或抛出错误。';
+        console.error(err);
+      }
+    }
+  };
+
+  const handleClose = (e: React.SyntheticEvent<HTMLElement, Event>) => {
+    if (!pending) {
+      onClose?.(e as React.MouseEvent<HTMLElement, MouseEvent>);
+    }
+  };
+  return (
+    <ModalPrefixClsContext.Provider value={prefix}>
+      <RcDialog
+        keyboard
+        {...restProps}
+        maskClosable={!useFooter}
+        onClose={handleClose}
+        transitionName="zoom"
+        maskTransitionName="fade"
+        prefixCls={prefix}
+        className={modalCls}
+        wrapClassName={wrapperCls}
+        closable={title !== false}
+        closeIcon={<CloseOutlined className={closeCls} />}
+        title={title !== false && <Title onBack={onBack} useBack={useBack} title={title} />}
+        footer={
+          useFooter && (
+            <Footer
+              okText={customizeOKText ?? okText}
+              closeText={customizeCloseText ?? closeText}
+              okButtonProps={okBtnProps}
+              closeButtonProps={closeBtnProps}
+              footer={restProps.footer}
+              additionalFooter={additionalFooter}
+              onOk={handleOk}
+              onClose={handleClose}
+              useOk={useOkBtn}
+              useClose={!dropCloseButton}
+            />
+          )
+        }
+      />
+    </ModalPrefixClsContext.Provider>
+  );
+};
+
+export default Modal;

src/modal/ModalContext.ts → src/legacy/modal/ModalContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { defaultRootPrefixCls } from '../components/config-provider';
+import { defaultRootPrefixCls } from '../../components/config-provider';
 
 const ModalPrefixClsContext = createContext(`${defaultRootPrefixCls}-modal`);
 

src/modal/__test__/Modal.test.tsx → src/legacy/modal/__test__/Modal.test.tsx

@@ -7,8 +7,8 @@ import { render, screen, fireEvent, act } from '@testing-library/react';
 import { Default } from '../demos/Modal.stories';
 import Modal from '..';
 import { IModalStaticFuncReturn } from '../interface';
-import enUS from '../../locales/en-US';
-import zhCN from '../../locales/zh-CN';
+import enUS from '../../../locales/en-US';
+import zhCN from '../../../locales/zh-CN';
 
 describe('Modal Testing', () => {
   it('renders with multi languages', () => {

src/modal/__test__/Steps.tsx → src/legacy/modal/__test__/Steps.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-console */
 import React from 'react';
-import Button from '../../legacy/button';
+import Button from '../../../legacy/button';
 
 interface Props {
   [key: string]: any;

src/modal/__test__/staticFunc.test.tsx → src/legacy/modal/__test__/staticFunc.test.tsx

@@ -5,8 +5,8 @@ import { WarningCircleFilled } from '@gio-design/icons';
 import CalloutModal from '../CalloutModal';
 import { withConfirm, withInfo, withSuccess, withWarn, withError, configModal } from '../callout';
 import Modal from '..';
-import { sleep } from '../../utils/test';
-import { defaultRootPrefixCls } from '../../components/config-provider';
+import { sleep } from '../../../utils/test';
+import { defaultRootPrefixCls } from '../../../components/config-provider';
 
 const { confirm } = Modal;
 

src/modal/callout.tsx → src/legacy/modal/callout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { WarningCircleFilled, InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@gio-design/icons';
 import { PaletteBlue4, PaletteYellow5, PaletteGreen6, PaletteRed5 } from '@gio-design/tokens';
-import { defaultRootPrefixCls } from '../components/config-provider';
+import { defaultRootPrefixCls } from '../../components/config-provider';
 import CalloutModal from './CalloutModal';
 import { IModalStaticFuncConfig, IModalStaticFuncReturn, IModalConfigs } from './interface';