@etsoo/materialui 1.2.77 → 1.2.78

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";
 export * from "./messages/OperationMessageHandler";
 export * from "./messages/RefreshHandler";

package/lib/index.js

@@ -8,6 +8,7 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";
 export * from "./messages/OperationMessageHandler";
 export * from "./messages/RefreshHandler";

package/lib/messages/OperationMessageContainer.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { OperationMessageHandlerAll } from "./OperationMessageHandler";
+/**
+ * Operation message container properties
+ * 操作消息容器属性
+ */
+export type OperationMessageContainerProps = {
+    /**
+     * Handler
+     * 处理器
+     */
+    handler: OperationMessageHandlerAll;
+    /**
+     * Timeout miliseconds
+     * 超时毫秒
+     */
+    timeout?: number;
+};
+/**
+ * Operation message container
+ * 操作消息容器
+ * @param props Props
+ * @returns Component
+ */
+export declare function OperationMessageContainer(props: OperationMessageContainerProps): React.JSX.Element;

package/lib/messages/OperationMessageContainer.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { MessageUtils } from "./MessageUtils";
+/**
+ * Operation message container
+ * 操作消息容器
+ * @param props Props
+ * @returns Component
+ */
+export function OperationMessageContainer(props) {
+    const { handler, timeout = 200 } = props;
+    const refs = React.useRef({ seed: 0, mounted: false });
+    const resetSeed = () => {
+        if (refs.current.seed > 0) {
+            clearTimeout(refs.current.seed);
+            refs.current.seed = 0;
+        }
+    };
+    React.useEffect(() => {
+        const my = typeof handler === "function"
+            ? handler
+            : (_user, _isSelf, message) => {
+                const [types, callback, id] = handler;
+                if (id == null || id === message.id) {
+                    if (!types.includes(message.operationType))
+                        return;
+                    resetSeed();
+                    refs.current.seed = window.setTimeout(callback, timeout);
+                }
+            };
+        MessageUtils.onOperationMessage(my);
+        refs.current.mounted = true;
+        return () => {
+            resetSeed();
+            refs.current.mounted = false;
+            MessageUtils.offOperationMessage(my);
+        };
+    }, []);
+    return React.createElement(React.Fragment, null);
+}

package/lib/messages/OperationMessageHandler.d.ts

@@ -2,7 +2,7 @@ import { OperationMessageDto } from "./OperationMessageDto";
 import { SignalRUser } from "./SignalRUser";
 /**
  * Operation message handler type
- * 操作信息处理程序类型
+ * 操作消息处理程序类型
  */
 export type OperationMessageHandler = (
 /**
@@ -17,3 +17,8 @@ isSelf: boolean,
  * Message
  */
 message: OperationMessageDto) => void | boolean;
+/**
+ * Operation message handler type for pages
+ * 操作消息处理程序类型（页面）
+ */
+export type OperationMessageHandlerAll = [types: string[], handler: () => void] | [types: string[], handler: () => void, id: number] | OperationMessageHandler;

package/lib/pages/EditPage.d.ts

@@ -1,6 +1,6 @@
 import React, { FormEventHandler } from "react";
 import { CommonPageProps } from "./CommonPageProps";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * Add / Edit page props
  */
@@ -33,7 +33,7 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
     /**
      * Operation message handler
      */
-    operationMessageHandler?: OperationMessageHandler;
+    operationMessageHandler?: OperationMessageHandlerAll;
 }
 /**
  * Add / Edit page

package/lib/pages/EditPage.js

@@ -6,7 +6,7 @@ import SaveIcon from "@mui/icons-material/Save";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
-import { MessageUtils } from "../messages/MessageUtils";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 /**
  * Add / Edit page
  * @param props Props
@@ -16,15 +16,8 @@ export function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, topPart, operationMessageHandler, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
-    React.useEffect(() => {
-        if (operationMessageHandler == null)
-            return;
-        MessageUtils.onOperationMessage(operationMessageHandler);
-        return () => {
-            MessageUtils.offOperationMessage(operationMessageHandler);
-        };
-    }, []);
     return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
+        operationMessageHandler && (React.createElement(OperationMessageContainer, { handler: operationMessageHandler })),
         topPart,
         React.createElement("form", { onSubmit: onSubmit },
             React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),

package/lib/pages/ResponsivePage.js

@@ -2,7 +2,7 @@ import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ResponsibleContainer } from "../ResponsibleContainer";
 import { CommonPage } from "./CommonPage";
-import { MessageUtils } from "../messages/MessageUtils";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 /**
  * Fixed height list page
  * @param props Props
@@ -17,16 +17,9 @@ export function ResponsivePage(props) {
     // State
     const [scrollContainer, setScrollContainer] = React.useState();
     const [direction, setDirection] = React.useState(fabColumnDirection);
-    React.useEffect(() => {
-        if (operationMessageHandler == null)
-            return;
-        MessageUtils.onOperationMessage(operationMessageHandler);
-        return () => {
-            MessageUtils.offOperationMessage(operationMessageHandler);
-        };
-    }, []);
     // Layout
     return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, fabColumnDirection: direction },
+        operationMessageHandler && (React.createElement(OperationMessageContainer, { handler: operationMessageHandler })),
         React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {
                 // Half
                 const half = MUGlobal.half(paddings);

package/lib/pages/ResponsivePageProps.d.ts

@@ -4,7 +4,7 @@ import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import { ListChildComponentProps } from "react-window";
 import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "../ScrollerListEx";
 import { DataGridPageProps } from "./DataGridPageProps";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * Response page props
  */
@@ -47,5 +47,5 @@ export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplat
     /**
      * Operation message handler
      */
-    operationMessageHandler?: OperationMessageHandler;
+    operationMessageHandler?: OperationMessageHandlerAll;
 };

package/lib/pages/ViewPage.d.ts

@@ -3,7 +3,7 @@ import { DataTypes } from "@etsoo/shared";
 import { GridProps } from "@mui/material";
 import React from "react";
 import { CommonPageProps } from "./CommonPageProps";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * View page grid item properties
  */
@@ -91,10 +91,7 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
     /**
      * Operation message handler
      */
-    operationMessageHandler?: [
-        id: number | undefined,
-        handler: OperationMessageHandler | string[]
-    ];
+    operationMessageHandler?: OperationMessageHandlerAll;
 }
 /**
  * View page

package/lib/pages/ViewPage.js

@@ -9,6 +9,7 @@ import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
 import { MessageUtils } from "../messages/MessageUtils";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 /**
  * View page grid item
  * @param props Props
@@ -105,6 +106,10 @@ export function ViewPage(props) {
     const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
     // Data
     const [data, setData] = React.useState();
+    const refs = React.useRef({
+        seed: 0,
+        mounted: false
+    });
     // Labels
     const labels = Labels.CommonPage;
     // Container
@@ -117,33 +122,16 @@ export function ViewPage(props) {
         setData(result);
     }, [loadData]);
     React.useEffect(() => {
-        const handler = (user, isSelf, message) => {
-            if (operationMessageHandler == null)
-                return;
-            const [id, handler] = operationMessageHandler;
-            if ((id == null && message.id == null) || id === message.id) {
-                if (Array.isArray(handler)) {
-                    if (!handler.includes(message.operationType))
-                        return;
-                }
-                else {
-                    if (handler(user, isSelf, message) === false)
-                        return;
-                }
-                refresh();
-            }
-        };
-        MessageUtils.onOperationMessage(handler);
         const refreshHandler = async () => {
             await refresh();
         };
         MessageUtils.onRefresh(refreshHandler);
         return () => {
-            MessageUtils.offOperationMessage(handler);
             MessageUtils.offRefresh(refreshHandler);
         };
     }, []);
     return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+        operationMessageHandler && (React.createElement(OperationMessageContainer, { handler: operationMessageHandler })),
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
                 ".MuiTypography-subtitle2": {
                     fontWeight: "bold"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.77",
+  "version": "1.2.78",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
 export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";
 export * from "./messages/OperationMessageHandler";
 export * from "./messages/RefreshHandler";

package/src/messages/OperationMessageContainer.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  OperationMessageHandler,
+  OperationMessageHandlerAll
+} from "./OperationMessageHandler";
+import { MessageUtils } from "./MessageUtils";
+
+/**
+ * Operation message container properties
+ * 操作消息容器属性
+ */
+export type OperationMessageContainerProps = {
+  /**
+   * Handler
+   * 处理器
+   */
+  handler: OperationMessageHandlerAll;
+
+  /**
+   * Timeout miliseconds
+   * 超时毫秒
+   */
+  timeout?: number;
+};
+
+/**
+ * Operation message container
+ * 操作消息容器
+ * @param props Props
+ * @returns Component
+ */
+export function OperationMessageContainer(
+  props: OperationMessageContainerProps
+) {
+  const { handler, timeout = 200 } = props;
+
+  const refs = React.useRef({ seed: 0, mounted: false });
+
+  const resetSeed = () => {
+    if (refs.current.seed > 0) {
+      clearTimeout(refs.current.seed);
+      refs.current.seed = 0;
+    }
+  };
+
+  React.useEffect(() => {
+    const my: OperationMessageHandler =
+      typeof handler === "function"
+        ? handler
+        : (_user, _isSelf, message) => {
+            const [types, callback, id] = handler;
+            if (id == null || id === message.id) {
+              if (!types.includes(message.operationType)) return;
+
+              resetSeed();
+
+              refs.current.seed = window.setTimeout(callback, timeout);
+            }
+          };
+    MessageUtils.onOperationMessage(my);
+
+    refs.current.mounted = true;
+
+    return () => {
+      resetSeed();
+      refs.current.mounted = false;
+
+      MessageUtils.offOperationMessage(my);
+    };
+  }, []);
+
+  return <React.Fragment></React.Fragment>;
+}

package/src/messages/OperationMessageHandler.ts

@@ -3,7 +3,7 @@ import { SignalRUser } from "./SignalRUser";
 
 /**
  * Operation message handler type
- * 操作信息处理程序类型
+ * 操作消息处理程序类型
  */
 export type OperationMessageHandler = (
   /**
@@ -21,3 +21,12 @@ export type OperationMessageHandler = (
    */
   message: OperationMessageDto
 ) => void | boolean;
+
+/**
+ * Operation message handler type for pages
+ * 操作消息处理程序类型（页面）
+ */
+export type OperationMessageHandlerAll =
+  | [types: string[], handler: () => void]
+  | [types: string[], handler: () => void, id: number]
+  | OperationMessageHandler;

package/src/pages/EditPage.tsx

@@ -7,8 +7,8 @@ import SaveIcon from "@mui/icons-material/Save";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
-import { MessageUtils } from "../messages/MessageUtils";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 
 /**
  * Add / Edit page props
@@ -48,7 +48,7 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
   /**
    * Operation message handler
    */
-  operationMessageHandler?: OperationMessageHandler;
+  operationMessageHandler?: OperationMessageHandlerAll;
 }
 
 /**
@@ -74,18 +74,11 @@ export function EditPage(props: EditPageProps) {
   // Labels
   const labels = Labels.CommonPage;
 
-  React.useEffect(() => {
-    if (operationMessageHandler == null) return;
-
-    MessageUtils.onOperationMessage(operationMessageHandler);
-
-    return () => {
-      MessageUtils.offOperationMessage(operationMessageHandler);
-    };
-  }, []);
-
   return (
     <CommonPage paddings={paddings} scrollContainer={scrollContainer} {...rest}>
+      {operationMessageHandler && (
+        <OperationMessageContainer handler={operationMessageHandler} />
+      )}
       {topPart}
       <form onSubmit={onSubmit}>
         <Grid container justifyContent="left" spacing={paddings} paddingTop={1}>

package/src/pages/ResponsivePage.tsx

@@ -4,7 +4,7 @@ import { MUGlobal } from "../MUGlobal";
 import { ResponsibleContainer } from "../ResponsibleContainer";
 import { CommonPage } from "./CommonPage";
 import { ResponsePageProps } from "./ResponsivePageProps";
-import { MessageUtils } from "../messages/MessageUtils";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 
 /**
  * Fixed height list page
@@ -26,16 +26,6 @@ export function ResponsivePage<
   const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
   const [direction, setDirection] = React.useState(fabColumnDirection);
 
-  React.useEffect(() => {
-    if (operationMessageHandler == null) return;
-
-    MessageUtils.onOperationMessage(operationMessageHandler);
-
-    return () => {
-      MessageUtils.offOperationMessage(operationMessageHandler);
-    };
-  }, []);
-
   // Layout
   return (
     <CommonPage
@@ -44,6 +34,9 @@ export function ResponsivePage<
       scrollContainer={scrollContainer}
       fabColumnDirection={direction}
     >
+      {operationMessageHandler && (
+        <OperationMessageContainer handler={operationMessageHandler} />
+      )}
       <ResponsibleContainer<T, F, D>
         paddings={paddings}
         containerBoxSx={(paddings, hasField, _dataGrid) => {

package/src/pages/ResponsivePageProps.ts

@@ -6,7 +6,7 @@ import {
   ScrollerListExItemSize
 } from "../ScrollerListEx";
 import { DataGridPageProps } from "./DataGridPageProps";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 
 /**
  * Response page props
@@ -67,5 +67,5 @@ export type ResponsePageProps<
   /**
    * Operation message handler
    */
-  operationMessageHandler?: OperationMessageHandler;
+  operationMessageHandler?: OperationMessageHandlerAll;
 };

package/src/pages/ViewPage.tsx

@@ -19,9 +19,10 @@ import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
 import { CommonPageProps } from "./CommonPageProps";
-import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 import { MessageUtils } from "../messages/MessageUtils";
 import { RefreshHandler } from "../messages/RefreshHandler";
+import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 
 /**
  * View page grid item properties
@@ -165,10 +166,7 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
   /**
    * Operation message handler
    */
-  operationMessageHandler?: [
-    id: number | undefined,
-    handler: OperationMessageHandler | string[]
-  ];
+  operationMessageHandler?: OperationMessageHandlerAll;
 }
 
 function formatItemData(fieldData: unknown): string | undefined {
@@ -274,6 +272,10 @@ export function ViewPage<T extends DataTypes.StringRecord>(
 
   // Data
   const [data, setData] = React.useState<T>();
+  const refs = React.useRef<{ seed: number; mounted: boolean }>({
+    seed: 0,
+    mounted: false
+  });
 
   // Labels
   const labels = Labels.CommonPage;
@@ -289,28 +291,12 @@ export function ViewPage<T extends DataTypes.StringRecord>(
   }, [loadData]);
 
   React.useEffect(() => {
-    const handler: OperationMessageHandler = (user, isSelf, message) => {
-      if (operationMessageHandler == null) return;
-
-      const [id, handler] = operationMessageHandler;
-      if ((id == null && message.id == null) || id === message.id) {
-        if (Array.isArray(handler)) {
-          if (!handler.includes(message.operationType)) return;
-        } else {
-          if (handler(user, isSelf, message) === false) return;
-        }
-        refresh();
-      }
-    };
-    MessageUtils.onOperationMessage(handler);
-
     const refreshHandler: RefreshHandler = async () => {
       await refresh();
     };
     MessageUtils.onRefresh(refreshHandler);
 
     return () => {
-      MessageUtils.offOperationMessage(handler);
       MessageUtils.offRefresh(refreshHandler);
     };
   }, []);
@@ -330,6 +316,9 @@ export function ViewPage<T extends DataTypes.StringRecord>(
         <LinearProgress />
       ) : (
         <React.Fragment>
+          {operationMessageHandler && (
+            <OperationMessageContainer handler={operationMessageHandler} />
+          )}
           <Grid
             container
             justifyContent="left"