chore(platform): some improvements

- user-state shouldn't be undefined
- add dialog-service

Author: xiejay97

packages/platform/src/app/App.tsx

@@ -3,7 +3,7 @@ import type { DRootProps } from '@react-devui/ui';
 import type { DLang } from '@react-devui/ui/utils/types';
 
 import { isNull } from 'lodash';
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAsync, useMount, useStorage } from '@react-devui/hooks';
 import { DNotification, DToast } from '@react-devui/ui';
@@ -12,7 +12,7 @@ import { DRoot } from '@react-devui/ui';
 import { AppRoutes } from './Routes';
 import { STORAGE_KEY } from './config/storage';
 import { TOKEN, useHttp, useInit } from './core';
-import { useNotifications, useToasts } from './core/state';
+import { useDialogs, useNotifications, useToasts } from './core/state';
 
 export type AppTheme = 'light' | 'dark';
 
@@ -23,6 +23,7 @@ export function App() {
   const [loading, setLoading] = useState(!isNull(TOKEN.value));
   const languageStorage = useStorage<DLang>(...STORAGE_KEY.language);
   const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
+  const [dialogs] = useDialogs();
   const [notifications] = useNotifications();
   const [toasts] = useToasts();
 
@@ -91,6 +92,7 @@ export function App() {
   return (
     <DRoot context={rootContext}>
       {loading ? null : <AppRoutes />}
+      {dialogs.map(({ key, type, props }) => React.createElement(type, { key, ...props }))}
       {notifications.map(({ key, ...props }) => (
         <DNotification {...props} key={key}></DNotification>
       ))}

packages/platform/src/app/core/state.ts

@@ -7,7 +7,7 @@ export interface UserState {
   avatar?: string;
   permission: (string | number)[];
 }
-export const useUserState = createGlobalState<UserState>();
+export const useUserState = createGlobalState<UserState>({} as any);
 
 export interface NotificationItem {
   id: string;
@@ -22,3 +22,5 @@ export const useNotificationState = createGlobalState<NotificationItem[]>();
 export const useNotifications = createGlobalState<(DNotificationProps & { key: string | number })[]>([]);
 
 export const useToasts = createGlobalState<(DToastProps & { key: string | number })[]>([]);
+
+export const useDialogs = createGlobalState<{ key: string | number; type: any; props: any }[]>([]);

packages/platform/src/app/routes/layout/header/user/User.tsx

@@ -1,4 +1,3 @@
-import { isUndefined } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -13,7 +12,7 @@ export function AppUser(props: React.ButtonHTMLAttributes<HTMLButtonElement>): J
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  return isUndefined(user) ? null : (
+  return (
     <DDropdown
       style={{ minWidth: 160 }}
       dList={[

packages/platform/src/app/routes/list/standard-table/DeviceModal.tsx

@@ -1,11 +1,11 @@
-import type { OpenSettingFn } from '../../../utils/types';
+import type { AppDialogServiceSupport } from '../../../utils/dialog-service';
 import type { DeviceData } from './StandardTable';
 import type { DSelectItem } from '@react-devui/ui/components/select';
 
 import { isUndefined } from 'lodash';
-import React, { useImperativeHandle, useState } from 'react';
+import { useState } from 'react';
 
-import { useEventCallback } from '@react-devui/hooks';
+import { useMount } from '@react-devui/hooks';
 import { FormControl, FormGroup, useForm, Validators } from '@react-devui/ui';
 import { DForm, DInput, DModal, DSelect } from '@react-devui/ui';
 
@@ -14,38 +14,31 @@ import { useHttp } from '../../../core';
 import { useAPI } from '../../../hooks';
 
 export interface AppDeviceModalProps {
+  aDevice: DeviceData | undefined;
   onSuccess: () => void;
 }
 
-function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSettingFn<DeviceData>>): JSX.Element | null {
-  const { onSuccess } = props;
+export function AppDeviceModal(props: AppDeviceModalProps): JSX.Element | null {
+  const { aDevice, onSuccess, aVisible, onClose, afterVisibleChange } = props as AppDeviceModalProps & AppDialogServiceSupport;
 
   const http = useHttp();
-  const httpOfInit = useHttp();
   const modelApi = useAPI(http, '/device/model');
-  const modelApiOfInit = useAPI(httpOfInit, '/device/model');
 
-  const [visible, setVisible] = useState(false);
-  const [device, setDevice] = useState<DeviceData>();
-  const [form, updateForm] = useForm(
-    () =>
-      new FormGroup({
-        name: new FormControl('', Validators.required),
-        model: new FormControl<string | null>(null, Validators.required),
-      })
-  );
+  const [form, updateForm] = useForm(() => {
+    const form = new FormGroup({
+      name: new FormControl('', Validators.required),
+      model: new FormControl<string | null>(null, Validators.required),
+    });
+    if (aDevice) {
+      form.reset({ name: aDevice.name });
+    }
+    return form;
+  });
 
   const [modelList, setModelList] = useState<DSelectItem<string>[]>();
 
-  const open = useEventCallback<OpenSettingFn<DeviceData>>((device) => {
-    setVisible(true);
-    setDevice(device);
-
-    form.reset(device ? { name: device.name } : undefined);
-    updateForm();
-
-    setModelList(undefined);
-    modelApiOfInit.list().subscribe({
+  useMount(() => {
+    modelApi.list().subscribe({
       next: (res) => {
         setModelList(
           res.resources.map((model) => ({
@@ -54,20 +47,18 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
             disabled: model.disabled,
           }))
         );
-        if (device) {
-          form.patchValue({ model: device.model });
+        if (aDevice) {
+          form.patchValue({ model: aDevice.model });
           updateForm();
         }
       },
     });
   });
 
-  useImperativeHandle(ref, () => open, [open]);
-
   return (
     <DModal
-      dVisible={visible}
-      dHeader={`${device ? 'Edit' : 'Add'} Device`}
+      dVisible={aVisible}
+      dHeader={`${aDevice ? 'Edit' : 'Add'} Device`}
       dFooter={
         <DModal.Footer
           dOkProps={{ disabled: !form.valid }}
@@ -83,11 +74,10 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
           }
         ></DModal.Footer>
       }
+      dSkipFirstTransition={false}
       dMaskClosable={false}
-      onClose={() => {
-        httpOfInit.abortAll();
-        setVisible(false);
-      }}
+      onClose={onClose}
+      afterVisibleChange={afterVisibleChange}
     >
       <AppResponsiveForm>
         <DForm dUpdate={updateForm} dLabelWidth="6em">
@@ -106,5 +96,3 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
     </DModal>
   );
 }
-
-export const AppDeviceModal = React.forwardRef(DeviceModal);

packages/platform/src/app/routes/list/standard-table/StandardTable.tsx

@@ -1,8 +1,8 @@
-import type { DeviceDoc, OpenSettingFn, StandardQueryParams } from '../../../utils/types';
+import type { DeviceDoc, StandardQueryParams } from '../../../utils/types';
 import type { DSelectItem } from '@react-devui/ui/components/select';
 
 import { isUndefined } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
@@ -13,7 +13,7 @@ import { DButton, DCard, DCheckbox, DDropdown, DModal, DPagination, DSelect, DSe
 import { AppRouteHeader, AppStatusDot, AppTableFilter } from '../../../components';
 import { useHttp } from '../../../core';
 import { useAPI, useQueryParams } from '../../../hooks';
-import { AppRoute } from '../../../utils';
+import { AppRoute, DialogService } from '../../../utils';
 import { AppDeviceModal } from './DeviceModal';
 import styles from './StandardTable.module.scss';
 
@@ -29,8 +29,6 @@ interface DeviceQueryParams {
 }
 
 export default AppRoute(() => {
-  const deviceModalRef = useRef<OpenSettingFn<DeviceData>>(null);
-
   const { t } = useTranslation();
   const http = useHttp();
   const modelApi = useAPI(http, '/device/model');
@@ -118,6 +116,15 @@ export default AppRoute(() => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateDeviceTable]);
 
+  const openDeviceModal = (device?: DeviceData) => {
+    DialogService.open(AppDeviceModal, {
+      aDevice: device,
+      onSuccess: () => {
+        setUpdateDeviceTable((n) => n + 1);
+      },
+    });
+  };
+
   return (
     <>
       {paramsOfDeleteModal && (
@@ -156,12 +163,6 @@ export default AppRoute(() => {
           }}
         />
       )}
-      <AppDeviceModal
-        ref={deviceModalRef}
-        onSuccess={() => {
-          setUpdateDeviceTable((n) => n + 1);
-        }}
-      />
       <AppRouteHeader>
         <AppRouteHeader.Breadcrumb
           aList={[
@@ -173,7 +174,7 @@ export default AppRoute(() => {
           aActions={[
             <DButton
               onClick={() => {
-                deviceModalRef.current?.();
+                openDeviceModal();
               }}
               dIcon={<PlusOutlined />}
             >
@@ -337,7 +338,7 @@ export default AppRoute(() => {
                             onItemClick={(action) => {
                               switch (action) {
                                 case 'edit':
-                                  deviceModalRef.current?.(data);
+                                  openDeviceModal(data);
                                   break;
 
                                 case 'delete':

packages/platform/src/app/routes/list/standard-table/detail/Detail.tsx

@@ -1,8 +1,7 @@
-import type { OpenSettingFn } from '../../../../utils/types';
 import type { DeviceData } from '../StandardTable';
 
 import { isUndefined } from 'lodash';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
@@ -12,13 +11,11 @@ import { DButton, DCard, DSeparator, DSpinner, DTable } from '@react-devui/ui';
 import { AppDetailView, AppRouteHeader } from '../../../../components';
 import { useHttp } from '../../../../core';
 import { useAPI } from '../../../../hooks';
-import { AppRoute } from '../../../../utils';
+import { AppRoute, DialogService } from '../../../../utils';
 import { AppDeviceModal } from '../DeviceModal';
 import styles from './Detail.module.scss';
 
 export default AppRoute(() => {
-  const deviceModalRef = useRef<OpenSettingFn<DeviceData>>(null);
-
   const { t } = useTranslation();
 
   const http = useHttp();
@@ -44,12 +41,6 @@ export default AppRoute(() => {
 
   return (
     <>
-      <AppDeviceModal
-        ref={deviceModalRef}
-        onSuccess={() => {
-          setUpdateDevice((n) => n + 1);
-        }}
-      />
       <AppRouteHeader>
         <AppRouteHeader.Breadcrumb
           aList={[
@@ -68,7 +59,12 @@ export default AppRoute(() => {
             <DButton
               disabled={isUndefined(device)}
               onClick={() => {
-                deviceModalRef.current?.(device);
+                DialogService.open(AppDeviceModal, {
+                  aDevice: device,
+                  onSuccess: () => {
+                    setUpdateDevice((n) => n + 1);
+                  },
+                });
               }}
               dIcon={<EditOutlined />}
             >

packages/platform/src/app/utils/dialog-service.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { useDialogs } from '../core/state';
+import { getGlobalKey } from './vars';
+
+export interface AppDialogServiceSupport {
+  aVisible: boolean;
+  onClose: () => void;
+  afterVisibleChange: (visible: boolean) => void;
+}
+
+interface DialogInstance<P extends {}> {
+  key: string | number;
+  close: () => void;
+  rerender: (props: P) => void;
+}
+
+export class DialogService {
+  static open<P extends {}>(type: React.FC<P>, props: P, _key?: string | number): DialogInstance<P> {
+    const key = _key ?? getGlobalKey();
+
+    useDialogs.setState((draft) => {
+      draft.push({
+        key,
+        type,
+        props: {
+          ...props,
+          aVisible: true,
+          onClose: () => {
+            props['onClose']?.();
+
+            DialogService.close(key);
+          },
+          afterVisibleChange: (visible: boolean) => {
+            props['afterVisibleChange']?.(visible);
+
+            if (!visible) {
+              const index = useDialogs.state.findIndex((n) => n.key === key);
+              if (index !== -1) {
+                useDialogs.setState((draft) => {
+                  draft.splice(index, 1);
+                });
+              }
+            }
+          },
+        },
+      });
+    });
+
+    return {
+      key,
+      close: () => {
+        DialogService.close(key);
+      },
+      rerender: (props) => {
+        DialogService.rerender(key, type, props);
+      },
+    };
+  }
+
+  static close(key: string | number) {
+    const index = useDialogs.state.findIndex((n) => n.key === key);
+    if (index !== -1) {
+      useDialogs.setState((draft) => {
+        draft[index].props.aVisible = false;
+      });
+    }
+  }
+
+  static rerender(key: string | number, type: any, props: any) {
+    const index = useDialogs.state.findIndex((n) => n.key === key);
+    if (index !== -1) {
+      useDialogs.setState((draft) => {
+        draft.splice(index, 1, { key, type, props: Object.assign(draft[index].props, props) });
+      });
+    }
+  }
+
+  static closeAll(animation = true) {
+    if (animation) {
+      useDialogs.setState((draft) => {
+        draft.forEach((toast) => {
+          toast.props.aVisible = false;
+        });
+      });
+    } else {
+      useDialogs.setState([]);
+    }
+  }
+}