2023.2.1 优化组件

packages/app/src/pages/department/context.ts

@@ -1,4 +1,4 @@
-import {PAGE_SIZE_LIST} from '@utils';
+import {createPageContext} from '@hooks';
 import {Dispatch, useReducer} from 'react';
 import {createContext} from 'use-context-selector';
 
@@ -34,37 +34,4 @@ export function useContextReducer() {
 export const context = createContext<[State, Dispatch<Action>]>([initState(), () => null]);
 //#endregion
 
-// #region 页码管理
-type PageState = {
-  page: number,
-  pageSize: number,
-};
-
-type PageAction = {
-  type: 'editPage',
-  payload: PageState,
-};
-
-function pageReduce(state: PageState, action: PageAction): PageState {
-  const {type} = action;
-
-  switch (type) {
-    case 'editPage':
-      return action.payload;
-    default:
-      return state;
-  }
-}
-
-function pageInit(): PageState {
-  return {page: 1, pageSize: Number(PAGE_SIZE_LIST[0])};
-}
-
-export function usePageContextReducer() {
-  return useReducer(pageReduce, pageInit());
-}
-
-export const pageContext = createContext<[PageState, Dispatch<PageAction>]>(
-  [pageInit(), () => null],
-);
-// #endregion
+export const pageContext = createPageContext();

packages/app/src/pages/department/index.module.css

@@ -1,3 +0,0 @@
-.main {
-  padding: var(--content-padding);
-}

packages/app/src/pages/department/index.tsx

@@ -1,8 +1,8 @@
-import css from './index.module.css';
 import {FC, ReactNode} from 'react';
 import Filter from './filter';
 import TableList from './table';
-import {context, pageContext, useContextReducer, usePageContextReducer} from './context';
+import {context, pageContext, useContextReducer} from './context';
+import {usePageContextReducer} from '@hooks';
 
 const DepartmentProvider: FC<{children: ReactNode}> = function({children}) {
   const state = useContextReducer();
@@ -10,7 +10,6 @@ const DepartmentProvider: FC<{children: ReactNode}> = function({children}) {
 
   return <Provider value={state}>{children}</Provider>;
 };
-
 const PageProvider: FC<{children: ReactNode}> = function({children}) {
   const state = usePageContextReducer();
   const {Provider} = pageContext;
@@ -22,7 +21,7 @@ const Department: FC = function() {
   return (
     <DepartmentProvider>
       <PageProvider>
-        <main className={css.main}>
+        <main className='content-main'>
           <Filter />
           <TableList />
         </main>

packages/app/src/pages/department/modal/index.tsx

@@ -1,8 +1,5 @@
-import {CloseOutlined} from '@ant-design/icons';
-import css from './index.module.css';
 import {FC} from 'react';
-import {ModalField} from '@components';
-import {Button, Space} from 'antd';
+import {ModalField, Modal as ModalComponent} from '@components';
 import ReacatModal from 'react-modal';
 import {useFormState} from './hooks';
 
@@ -23,42 +20,21 @@ const Modal: FC<Props> = function({visible, onClose, onFetch, name, id}) {
   const [{control, isLoading}, onSubmit] = useFormState({visible, onClose, onFetch, name, id});
 
   return (
-    <ReacatModal isOpen={visible} style={modalStyle} closeTimeoutMS={200} ariaHideApp={false}>
-      <section className={css.dialog}>
-        <div className={css.dialogTitle}>
-          <h3>{isEdit ? '修改' : '新增'}部门</h3>
-          <CloseOutlined className={css.dialogClose} onClick={onClose} />
-        </div>
-
-        <div className={css.dialogContent}>
-          <form onSubmit={onSubmit}>
-            <ModalField
-              name='departmentName'
-              width='300px'
-              label='部门名称'
-              control={control}
-            />
-            <Space className={css.dialogBtnGroup}>
-              <Button
-                loading={isLoading}
-                type='primary'
-                htmlType='submit'
-              >
-                确定
-              </Button>
-              <Button
-                disabled={isLoading}
-                type='default'
-                onClick={onClose}
-                htmlType='button'
-              >
-                关闭
-              </Button>
-            </Space>
-          </form>
-        </div>
-      </section>
-    </ReacatModal>
+    <ModalComponent
+      visible={visible}
+      style={modalStyle}
+      title={`${isEdit ? '修改' : '新增'}部门`}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      isLoading={isLoading}
+    >
+      <ModalField
+        name='departmentName'
+        width='300px'
+        label='部门名称'
+        control={control}
+      />
+    </ModalComponent>
 
   );
 };

packages/app/src/pages/department/table/hooks.tsx

@@ -13,7 +13,7 @@ export function useList() {
   const [{page, pageSize}, dispatch] = useContext(pageContext);
   const {name, code} = useContextSelector(context, state => state[0]);
   const {data, isFetching, refetch} = useQuery(
-    [name, code, page, pageSize],
+    [name, code, page, pageSize, getDepartmentList.name],
     async function() {
       const data = await getDepartmentList({
         departmentName: name,

packages/app/src/pages/department/table/index.module.css

@@ -1,9 +0,0 @@
-.table-wrapper {
-  margin-top: var(--content-padding);
-}
-
-.table-tool {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: var(--content-padding);
-}

packages/app/src/pages/department/table/index.tsx

@@ -1,4 +1,3 @@
-import css from './index.module.css';
 import {FC} from 'react';
 import {Button, Card, Table} from 'antd';
 import {useHandle, useList} from './hooks';
@@ -17,8 +16,8 @@ const TableList: FC = function() {
 
   return (
     <>
-      <Card className={css.tableWrapper}>
-        <section className={css.tableTool}>
+      <Card className='table-wrapper'>
+        <section className='table-tool'>
           <Button type='primary' onClick={onAdd}>新增</Button>
         </section>
         <Table