chore: 抽取PageModal 调整ReactModalStyle类型

packages/app/src/components/filter-field/index.tsx

@@ -36,3 +36,8 @@ const FilterField: FC<Props> = function({label, name, placeholder, value, onChan
 };
 
 export default FilterField;
+
+export {default as FilterDatePicker} from './Date';
+export * from './Date';
+
+export {default as FilterSelect} from './Select';

packages/app/src/components/index.tsx

@@ -1,18 +1,17 @@
-export {default as Footer} from './footer';
-export {default as Auth} from './authentication';
 export {default as FilterField} from './filter-field';
-export {default as FilterSelect} from './filter-field/Select';
-export {default as FilterDatePicker} from './filter-field/Date';
 export {default as FilterButtonGroup} from './filter-button-group';
-export {default as ModalField} from './operation-field/field';
-export * from './filter-field/Date';
-export {default as ModalTextArea} from './operation-field/Area';
-export {default as ModalSelect} from './operation-field/Select';
+export * from './filter-field';
+
+export * from './operation-field';
+
 export {default as Modal} from './modal';
-export {default as ModalBtnGroup} from './modal/BtnGroup';
+export * from './modal';
+
 export {default as Loading} from './loading';
 export {default as ErrorBoundary} from './error-boundary';
 export {default as Jurisdiction} from './jurisdiction';
 export {default as PageProvider} from './page-provider';
 export {default as TableTools} from './table-tools';
 export {default as SearchProvider} from './search-provider';
+export {default as Footer} from './footer';
+export {default as Auth} from './authentication';

packages/app/src/components/modal/PageModal.tsx

@@ -0,0 +1,34 @@
+import ReactModal from 'react-modal';
+import {ReactModalStyle} from '.';
+import {ChildrenFC} from '@utils';
+
+const styles: ReactModalStyle = {
+  content: {
+    width: '80vw',
+    height: '90vh',
+  },
+};
+
+type Props = {
+  visible: boolean,
+  onClose: () => void,
+  testId?: string,
+};
+
+const PageModal: ChildrenFC<Props> = function({children, visible, onClose, testId}) {
+  return (
+    <ReactModal
+      data-testid={testId}
+      shouldCloseOnOverlayClick
+      onRequestClose={onClose}
+      isOpen={visible}
+      ariaHideApp={false}
+      style={styles}
+      closeTimeoutMS={200}
+    >
+      {children}
+    </ReactModal>
+  );
+};
+
+export default PageModal;

packages/app/src/components/modal/index.tsx

@@ -1,13 +1,15 @@
 import css from './index.module.css';
 import {FC, FormEventHandler, ReactNode} from 'react';
-import ReacatModal from 'react-modal';
+import ReactModal from 'react-modal';
 import {CloseOutlined} from '@ant-design/icons';
 import ModalBtnGroup from './BtnGroup';
 import {Space} from 'antd';
 
+type ReactModalStyle = ReactModal.Styles;
+
 type Props = {
   visible: boolean,
-  style?: ReacatModal.Styles,
+  style?: ReactModalStyle,
   title: string,
   onClose?: () => void,
   isLoading?: boolean,
@@ -29,11 +31,13 @@ const Modal: FC<Props> = function({
   testId,
 }) {
   return (
-    <ReacatModal
+    <ReactModal
       isOpen={visible}
       style={style}
       closeTimeoutMS={200}
       ariaHideApp={false}
+      shouldCloseOnOverlayClick
+      onRequestClose={onClose}
     >
       <section className={css.dialog} data-testid={testId}>
         <div className={css.dialogTitle}>
@@ -50,8 +54,13 @@ const Modal: FC<Props> = function({
           </form>
         </div>
       </section>
-    </ReacatModal>
+    </ReactModal>
   );
 };
 
 export default Modal;
+export {
+  ModalBtnGroup,
+};
+export type {ReactModalStyle};
+export {default as PageModal} from './PageModal';

packages/app/src/components/operation-field/index.ts

@@ -0,0 +1,3 @@
+export {default as ModalField} from './field';
+export {default as ModalTextArea} from './Area';
+export {default as ModalSelect} from './Select';

packages/app/src/pages/container/table/put-modal/index.tsx

@@ -1,11 +1,10 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
-import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import Info from './Info';
 import {FormProvider} from 'react-hook-form';
 
-const styles: ReactModal.Styles = {
+const styles: ReactModalStyle = {
   content: {width: '540px', height: '560px'},
 };
 

packages/app/src/pages/container/table/scrap-log-modal/index.tsx

@@ -1,10 +1,6 @@
+import {PageModal} from '@components';
 import ContainerScrap from '@pages/container-scrap';
 import {FC} from 'react';
-import ReactModal from 'react-modal';
-
-const styles: ReactModal.Styles = {
-  content: {width: '80vw', height: '90vh'},
-};
 
 type Props = {
   id: string,
@@ -14,17 +10,13 @@ type Props = {
 
 const ScrapLogModal: FC<Props> = function({id, onClose, visible}) {
   return (
-    <ReactModal
-      isOpen={visible}
-      ariaHideApp={false}
-      style={styles}
-      closeTimeoutMS={200}
-      data-testid='container_scrap_log_modal'
-      shouldCloseOnOverlayClick
-      onRequestClose={onClose}
+    <PageModal
+      visible={visible}
+      testId='container_scrap_log_modal'
+      onClose={onClose}
     >
       <ContainerScrap id={id} />
-    </ReactModal>
+    </PageModal>
   );
 };
 

packages/app/src/pages/container/table/scrap-modal/index.tsx

@@ -1,9 +1,8 @@
-import {Modal, ModalField, ModalTextArea} from '@components';
+import {Modal, ModalField, ModalTextArea, ReactModalStyle} from '@components';
 import {FC} from 'react';
 import {useFormState} from './hooks';
-import ReactModal from 'react-modal';
 
-const styles: ReactModal.Styles = {
+const styles: ReactModalStyle = {
   content: {width: '540px', height: '460px'},
 };
 

packages/app/src/pages/goods/table/modal/index.tsx

@@ -1,11 +1,10 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
 import GoodsModalInfo from './Info';
-import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '540px',
     height: '680px',

packages/app/src/pages/menu-id/table/modal/index.tsx

@@ -1,11 +1,10 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
-import ReactModal from 'react-modal';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
 import Info from './Info';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '560px',
     height: '500px',

packages/app/src/pages/menu/child-menu/index.tsx

@@ -1,6 +1,6 @@
 import {FC} from 'react';
-import ReactModal from 'react-modal';
 import ChildMenu from '@pages/menu-id';
+import {PageModal} from '@components';
 
 type Props = {
   visible: boolean
@@ -8,25 +8,14 @@ type Props = {
   onClose: () => void
 };
 
-const styles: ReactModal.Styles = {
-  content: {
-    width: '80vw',
-    height: '90vh',
-  },
-};
-
 const ChildMenuModal: FC<Props> = function({visible, id, onClose}) {
   return (
-    <ReactModal
-      shouldCloseOnOverlayClick
-      onRequestClose={onClose}
-      isOpen={visible}
-      ariaHideApp={false}
-      style={styles}
-      closeTimeoutMS={200}
+    <PageModal
+      onClose={onClose}
+      visible={visible}
     >
       <ChildMenu id={id} onClose={onClose} />
-    </ReactModal>
+    </PageModal>
   );
 };
 

packages/app/src/pages/menu/table/modal/index.tsx

@@ -1,11 +1,10 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
-import ReactModal from 'react-modal';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
 import Info from './Info';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '560px',
     height: '500px',

packages/app/src/pages/pda-menu/table/modal/index.tsx

@@ -1,11 +1,10 @@
 import {FC, Suspense} from 'react';
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
-import ReactModal from 'react-modal';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {useFormState} from './hooks';
 import Info from './Info';
 import {FormProvider} from 'react-hook-form';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '560px',
     height: '500px',

packages/app/src/pages/role/table/modal/index.tsx

@@ -1,11 +1,10 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
-import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
 import Info from './Info';
 
-const modalStyle: ReactModal.Styles = {
+const modalStyle: ReactModalStyle = {
   content: {width: '520px', height: '420px'},
 };
 

packages/app/src/pages/role/table/pda-modal/index.tsx

@@ -1,10 +1,9 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
-import ReactModal from 'react-modal';
 import Info from './Info';
 import {useSubmit, useTransfer} from './hooks';
 
-const modalStyle: ReactModal.Styles = {
+const modalStyle: ReactModalStyle = {
   content: {width: '600px', height: '420px'},
 };
 

packages/app/src/pages/role/table/tree-modal/index.tsx

@@ -1,12 +1,11 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
-import ReactModal from 'react-modal';
 import TreeInfo from './info';
 import {ChildrenFC} from '@utils';
 import {context, useContextState} from './context';
 import {useSubmit, useWatchId} from './hooks';
 
-const modalStyle: ReactModal.Styles = {
+const modalStyle: ReactModalStyle = {
   content: {width: '600px', height: '520px'},
 };
 

packages/app/src/pages/storage/table/modal/index.tsx

@@ -1,11 +1,10 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
 import {useFormState} from './hooks';
 import {FormProvider} from 'react-hook-form';
 import StoreModalInfo from './Info';
-import ReactModal from 'react-modal';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '550px',
     height: '630px',

packages/app/src/pages/user/table/modal/index.tsx

@@ -1,11 +1,10 @@
-import {ErrorBoundary, Loading, Modal, ModalBtnGroup} from '@components';
+import {ErrorBoundary, Loading, Modal, ModalBtnGroup, ReactModalStyle} from '@components';
 import {FC, Suspense} from 'react';
-import ReactModal from 'react-modal';
 import {useFormState} from './hooks';
 import UserModalInfo from './Info';
 import {FormProvider} from 'react-hook-form';
 
-const style: ReactModal.Styles = {
+const style: ReactModalStyle = {
   content: {
     width: '650px',
     height: '600px',