@etsoo/materialui 1.2.74 → 1.2.76

package/lib/index.d.ts

@@ -7,6 +7,11 @@ export * from "./app/ISmartERPUser";
 export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
+export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageDto";
+export * from "./messages/OperationMessageHandler";
+export * from "./messages/RefreshHandler";
+export * from "./messages/SignalRUser";
 export * from "./pages/CommonPage";
 export * from "./pages/CommonPageProps";
 export * from "./pages/DataGridPage";

package/lib/index.js

@@ -7,6 +7,11 @@ export * from "./app/ISmartERPUser";
 export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
+export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageDto";
+export * from "./messages/OperationMessageHandler";
+export * from "./messages/RefreshHandler";
+export * from "./messages/SignalRUser";
 export * from "./pages/CommonPage";
 export * from "./pages/CommonPageProps";
 export * from "./pages/DataGridPage";

package/lib/messages/MessageUtils.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="node" />
+import EventEmitter from "events";
+import { SignalRUser } from "./SignalRUser";
+import { OperationMessageDto } from "./OperationMessageDto";
+import { OperationMessageHandler } from "./OperationMessageHandler";
+/**
+ * Message utilities
+ * 消息工具
+ */
+export declare namespace MessageUtils {
+    /**
+     * Event emitter
+     */
+    const eventEmitter: EventEmitter;
+    /**
+     * Emit operation message
+     * 发出操作信息
+     * @param seed Refresh seed
+     */
+    function emitOperationMessage(user: SignalRUser | undefined, isSelf: boolean, message: OperationMessageDto): void;
+    /**
+     * Emit refresh
+     * 发出刷新
+     * @param user SignalR user
+     * @param isSelf Is current user self
+     * @param message Message
+     */
+    function emitRefresh(): void;
+    /**
+     * Add operation event listener
+     * 添加操作事件监控器
+     * @param handler Handler
+     */
+    function onOperationMessage(handler: OperationMessageHandler): void;
+    /**
+     * Add refresh event listener
+     * 添加事件事件监控器
+     * @param handler Handler
+     */
+    function onRefresh(handler: OperationMessageHandler): void;
+    /**
+     * Remove operation event listener
+     * 移除操作事件监控器
+     * @param handler Handler
+     */
+    function offOperationMessage(handler: OperationMessageHandler): void;
+    /**
+     * Remove refresh event listener
+     * 移除刷新事件监控器
+     * @param handler Handler
+     */
+    function offRefresh(handler: OperationMessageHandler): void;
+}

package/lib/messages/MessageUtils.js

@@ -0,0 +1,70 @@
+import EventEmitter from "events";
+/**
+ * Message utilities
+ * 消息工具
+ */
+export var MessageUtils;
+(function (MessageUtils) {
+    /**
+     * Event emitter
+     */
+    MessageUtils.eventEmitter = new EventEmitter();
+    const OperationMessageName = "onOperationMessage";
+    const RefreshName = "onRefresh";
+    /**
+     * Emit operation message
+     * 发出操作信息
+     * @param seed Refresh seed
+     */
+    function emitOperationMessage(user, isSelf, message) {
+        MessageUtils.eventEmitter.emit(OperationMessageName, user, isSelf, message);
+    }
+    MessageUtils.emitOperationMessage = emitOperationMessage;
+    /**
+     * Emit refresh
+     * 发出刷新
+     * @param user SignalR user
+     * @param isSelf Is current user self
+     * @param message Message
+     */
+    function emitRefresh() {
+        MessageUtils.eventEmitter.emit(RefreshName);
+    }
+    MessageUtils.emitRefresh = emitRefresh;
+    /**
+     * Add operation event listener
+     * 添加操作事件监控器
+     * @param handler Handler
+     */
+    function onOperationMessage(handler) {
+        MessageUtils.eventEmitter.on(OperationMessageName, handler);
+    }
+    MessageUtils.onOperationMessage = onOperationMessage;
+    /**
+     * Add refresh event listener
+     * 添加事件事件监控器
+     * @param handler Handler
+     */
+    function onRefresh(handler) {
+        MessageUtils.eventEmitter.on(RefreshName, handler);
+    }
+    MessageUtils.onRefresh = onRefresh;
+    /**
+     * Remove operation event listener
+     * 移除操作事件监控器
+     * @param handler Handler
+     */
+    function offOperationMessage(handler) {
+        MessageUtils.eventEmitter.off(OperationMessageName, handler);
+    }
+    MessageUtils.offOperationMessage = offOperationMessage;
+    /**
+     * Remove refresh event listener
+     * 移除刷新事件监控器
+     * @param handler Handler
+     */
+    function offRefresh(handler) {
+        MessageUtils.eventEmitter.off(RefreshName, handler);
+    }
+    MessageUtils.offRefresh = offRefresh;
+})(MessageUtils || (MessageUtils = {}));

package/lib/messages/OperationMessageDto.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Operation message data
+ * 操作信息数据
+ */
+export type OperationMessageDto = {
+    /**
+     * Operation type
+     * 操作类型
+     */
+    operationType: string;
+    /**
+     * Target object id
+     * 目标对象编号
+     */
+    id?: number;
+};

package/lib/messages/OperationMessageDto.js

@@ -0,0 +1 @@
+export {};

package/lib/messages/OperationMessageHandler.d.ts

@@ -0,0 +1,19 @@
+import { OperationMessageDto } from "./OperationMessageDto";
+import { SignalRUser } from "./SignalRUser";
+/**
+ * Operation message handler type
+ * 操作信息处理程序类型
+ */
+export type OperationMessageHandler = (
+/**
+ * Signal user data
+ */
+user: SignalRUser | undefined, 
+/**
+ * Is current self user
+ */
+isSelf: boolean, 
+/**
+ * Message
+ */
+message: OperationMessageDto) => void | boolean;

package/lib/messages/OperationMessageHandler.js

@@ -0,0 +1 @@
+export {};

package/lib/messages/RefreshHandler.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Refresh handler type
+ * 刷新处理程序类型
+ */
+export type RefreshHandler = () => void;

package/lib/messages/RefreshHandler.js

@@ -0,0 +1 @@
+export {};

package/lib/messages/SignalRUser.d.ts

@@ -0,0 +1,31 @@
+import { UserRole } from "@etsoo/appscript";
+/**
+ * SignalR user
+ */
+export type SignalRUser = {
+    /**
+     * Id
+     * 编号
+     */
+    id: number;
+    /**
+     * Name
+     * 姓名
+     */
+    name: string;
+    /**
+     * Avatar
+     * 头像
+     */
+    avatar?: string;
+    /**
+     * Device id
+     * 设备编号
+     */
+    deviceId: number | number[];
+    /**
+     * Role
+     * 角色
+     */
+    role?: UserRole;
+};

package/lib/messages/SignalRUser.js

@@ -0,0 +1 @@
+export {};

package/lib/pages/EditPage.d.ts

@@ -1,5 +1,6 @@
 import React, { FormEventHandler } from "react";
 import { CommonPageProps } from "./CommonPageProps";
+import { OperationMessageHandler } from "../messages/OperationMessageHandler";
 /**
  * Add / Edit page props
  */
@@ -29,6 +30,10 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
      * Top part
      */
     topPart?: React.ReactNode;
+    /**
+     * Operation message handler
+     */
+    operationMessageHandler?: OperationMessageHandler;
 }
 /**
  * Add / Edit page

package/lib/pages/EditPage.js

@@ -6,15 +6,24 @@ 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";
 /**
  * Add / Edit page
  * @param props Props
  */
 export function EditPage(props) {
     // Destruct
-    const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = CommonPageScrollContainer, supportBack = true, submitDisabled = false, topPart, ...rest } = 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 },
         topPart,
         React.createElement("form", { onSubmit: onSubmit },

package/lib/pages/ResponsivePage.js

@@ -2,6 +2,7 @@ import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ResponsibleContainer } from "../ResponsibleContainer";
 import { CommonPage } from "./CommonPage";
+import { MessageUtils } from "../messages/MessageUtils";
 /**
  * Fixed height list page
  * @param props Props
@@ -10,12 +11,20 @@ import { CommonPage } from "./CommonPage";
 export function ResponsivePage(props) {
     var _a;
     // Destruct
-    const { pageProps = {}, ...rest } = props;
+    const { pageProps = {}, operationMessageHandler, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     const { paddings, fabColumnDirection, ...pageRest } = pageProps;
     // 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 },
         React.createElement(ResponsibleContainer, { paddings: paddings, containerBoxSx: (paddings, hasField, _dataGrid) => {

package/lib/pages/ResponsivePageProps.d.ts

@@ -4,6 +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";
 /**
  * Response page props
  */
@@ -43,4 +44,8 @@ export type ResponsePageProps<T extends object, F extends DataTypes.BasicTemplat
      * Quick action for double click or click under mobile
      */
     quickAction?: (data: T) => void;
+    /**
+     * Operation message handler
+     */
+    operationMessageHandler?: OperationMessageHandler;
 };

package/lib/pages/ViewPage.d.ts

@@ -3,6 +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";
 /**
  * View page grid item properties
  */
@@ -88,9 +89,9 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      */
     gridRef?: React.Ref<HTMLDivElement>;
     /**
-     * Refresh seed
+     * Operation message handler
      */
-    refreshSeed?: number;
+    operationMessageHandler?: OperationMessageHandler | string[];
 }
 /**
  * View page

package/lib/pages/ViewPage.js

@@ -8,6 +8,7 @@ import { GridDataFormat } from "../GridDataFormat";
 import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
+import { MessageUtils } from "../messages/MessageUtils";
 /**
  * View page grid item
  * @param props Props
@@ -101,7 +102,7 @@ function getItemField(field, data) {
  */
 export function ViewPage(props) {
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, refreshSeed = 0, ...rest } = 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();
     // Labels
@@ -116,11 +117,29 @@ export function ViewPage(props) {
         setData(result);
     }, [loadData]);
     React.useEffect(() => {
-        // Only refresh after the first data load
-        if (refreshSeed === 0 || data == null)
-            return;
-        refresh();
-    }, [refreshSeed]);
+        const handler = (user, isSelf, message) => {
+            if (operationMessageHandler == null)
+                return;
+            if (Array.isArray(operationMessageHandler)) {
+                if (!operationMessageHandler.includes(message.operationType))
+                    return;
+            }
+            else {
+                if (operationMessageHandler(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,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
                 ".MuiTypography-subtitle2": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,20 +50,20 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.28",
+    "@etsoo/appscript": "^1.4.29",
     "@etsoo/notificationbase": "^1.1.25",
-    "@etsoo/react": "^1.6.99",
+    "@etsoo/react": "^1.7.0",
     "@etsoo/shared": "^1.2.8",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.2",
-    "@mui/x-data-grid": "^6.10.1",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.4",
+    "@mui/x-data-grid": "^6.11.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
-    "@types/react": "^18.2.16",
+    "@types/react": "^18.2.20",
     "@types/react-avatar-editor": "^13.0.0",
     "@types/react-dom": "^18.2.7",
     "@types/react-input-mask": "^3.0.2",
-    "chart.js": "^4.3.1",
+    "chart.js": "^4.3.3",
     "chartjs-plugin-datalabels": "^2.2.0",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
@@ -75,20 +75,20 @@
     "react-imask": "6.6.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
-    "@babel/core": "^7.22.9",
-    "@babel/plugin-transform-runtime": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime-corejs3": "^7.22.6",
+    "@babel/runtime-corejs3": "^7.22.10",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.3",
-    "@typescript-eslint/eslint-plugin": "^6.2.0",
-    "@typescript-eslint/parser": "^6.2.0",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "typescript": "^5.1.6"
   }
 }

package/src/index.ts

@@ -8,6 +8,12 @@ export * from "./app/Labels";
 export * from "./app/ReactApp";
 export * from "./app/ServiceApp";
 
+export * from "./messages/MessageUtils";
+export * from "./messages/OperationMessageDto";
+export * from "./messages/OperationMessageHandler";
+export * from "./messages/RefreshHandler";
+export * from "./messages/SignalRUser";
+
 export * from "./pages/CommonPage";
 export * from "./pages/CommonPageProps";
 export * from "./pages/DataGridPage";

package/src/messages/MessageUtils.ts

@@ -0,0 +1,78 @@
+import EventEmitter from "events";
+import { SignalRUser } from "./SignalRUser";
+import { OperationMessageDto } from "./OperationMessageDto";
+import { OperationMessageHandler } from "./OperationMessageHandler";
+
+/**
+ * Message utilities
+ * 消息工具
+ */
+export namespace MessageUtils {
+  /**
+   * Event emitter
+   */
+  export const eventEmitter = new EventEmitter();
+
+  const OperationMessageName = "onOperationMessage";
+  const RefreshName = "onRefresh";
+
+  /**
+   * Emit operation message
+   * 发出操作信息
+   * @param seed Refresh seed
+   */
+  export function emitOperationMessage(
+    user: SignalRUser | undefined,
+    isSelf: boolean,
+    message: OperationMessageDto
+  ) {
+    eventEmitter.emit(OperationMessageName, user, isSelf, message);
+  }
+
+  /**
+   * Emit refresh
+   * 发出刷新
+   * @param user SignalR user
+   * @param isSelf Is current user self
+   * @param message Message
+   */
+  export function emitRefresh() {
+    eventEmitter.emit(RefreshName);
+  }
+
+  /**
+   * Add operation event listener
+   * 添加操作事件监控器
+   * @param handler Handler
+   */
+  export function onOperationMessage(handler: OperationMessageHandler) {
+    eventEmitter.on(OperationMessageName, handler);
+  }
+
+  /**
+   * Add refresh event listener
+   * 添加事件事件监控器
+   * @param handler Handler
+   */
+  export function onRefresh(handler: OperationMessageHandler) {
+    eventEmitter.on(RefreshName, handler);
+  }
+
+  /**
+   * Remove operation event listener
+   * 移除操作事件监控器
+   * @param handler Handler
+   */
+  export function offOperationMessage(handler: OperationMessageHandler) {
+    eventEmitter.off(OperationMessageName, handler);
+  }
+
+  /**
+   * Remove refresh event listener
+   * 移除刷新事件监控器
+   * @param handler Handler
+   */
+  export function offRefresh(handler: OperationMessageHandler) {
+    eventEmitter.off(RefreshName, handler);
+  }
+}

package/src/messages/OperationMessageDto.ts

@@ -0,0 +1,17 @@
+/**
+ * Operation message data
+ * 操作信息数据
+ */
+export type OperationMessageDto = {
+  /**
+   * Operation type
+   * 操作类型
+   */
+  operationType: string;
+
+  /**
+   * Target object id
+   * 目标对象编号
+   */
+  id?: number;
+};

package/src/messages/OperationMessageHandler.ts

@@ -0,0 +1,23 @@
+import { OperationMessageDto } from "./OperationMessageDto";
+import { SignalRUser } from "./SignalRUser";
+
+/**
+ * Operation message handler type
+ * 操作信息处理程序类型
+ */
+export type OperationMessageHandler = (
+  /**
+   * Signal user data
+   */
+  user: SignalRUser | undefined,
+
+  /**
+   * Is current self user
+   */
+  isSelf: boolean,
+
+  /**
+   * Message
+   */
+  message: OperationMessageDto
+) => void | boolean;

package/src/messages/RefreshHandler.ts

@@ -0,0 +1,5 @@
+/**
+ * Refresh handler type
+ * 刷新处理程序类型
+ */
+export type RefreshHandler = () => void;

package/src/messages/SignalRUser.ts

@@ -0,0 +1,36 @@
+import { UserRole } from "@etsoo/appscript";
+
+/**
+ * SignalR user
+ */
+export type SignalRUser = {
+  /**
+   * Id
+   * 编号
+   */
+  id: number;
+
+  /**
+   * Name
+   * 姓名
+   */
+  name: string;
+
+  /**
+   * Avatar
+   * 头像
+   */
+  avatar?: string;
+
+  /**
+   * Device id
+   * 设备编号
+   */
+  deviceId: number | number[];
+
+  /**
+   * Role
+   * 角色
+   */
+  role?: UserRole;
+};

package/src/pages/EditPage.tsx

@@ -7,6 +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";
 
 /**
  * Add / Edit page props
@@ -42,6 +44,11 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
    * Top part
    */
   topPart?: React.ReactNode;
+
+  /**
+   * Operation message handler
+   */
+  operationMessageHandler?: OperationMessageHandler;
 }
 
 /**
@@ -60,12 +67,23 @@ export function EditPage(props: EditPageProps) {
     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 (
     <CommonPage paddings={paddings} scrollContainer={scrollContainer} {...rest}>
       {topPart}

package/src/pages/ResponsivePage.tsx

@@ -4,6 +4,7 @@ import { MUGlobal } from "../MUGlobal";
 import { ResponsibleContainer } from "../ResponsibleContainer";
 import { CommonPage } from "./CommonPage";
 import { ResponsePageProps } from "./ResponsivePageProps";
+import { MessageUtils } from "../messages/MessageUtils";
 
 /**
  * Fixed height list page
@@ -16,7 +17,7 @@ export function ResponsivePage<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ResponsePageProps<T, F, D>) {
   // Destruct
-  const { pageProps = {}, ...rest } = props;
+  const { pageProps = {}, operationMessageHandler, ...rest } = props;
 
   pageProps.paddings ??= MUGlobal.pagePaddings;
   const { paddings, fabColumnDirection, ...pageRest } = pageProps;
@@ -25,6 +26,16 @@ 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

package/src/pages/ResponsivePageProps.ts

@@ -6,6 +6,7 @@ import {
   ScrollerListExItemSize
 } from "../ScrollerListEx";
 import { DataGridPageProps } from "./DataGridPageProps";
+import { OperationMessageHandler } from "../messages/OperationMessageHandler";
 
 /**
  * Response page props
@@ -62,4 +63,9 @@ export type ResponsePageProps<
    * Quick action for double click or click under mobile
    */
   quickAction?: (data: T) => void;
+
+  /**
+   * Operation message handler
+   */
+  operationMessageHandler?: OperationMessageHandler;
 };

package/src/pages/ViewPage.tsx

@@ -19,6 +19,9 @@ import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 import { CommonPage } from "./CommonPage";
 import { CommonPageProps } from "./CommonPageProps";
+import { OperationMessageHandler } from "../messages/OperationMessageHandler";
+import { MessageUtils } from "../messages/MessageUtils";
+import { RefreshHandler } from "../messages/RefreshHandler";
 
 /**
  * View page grid item properties
@@ -160,9 +163,9 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
   gridRef?: React.Ref<HTMLDivElement>;
 
   /**
-   * Refresh seed
+   * Operation message handler
    */
-  refreshSeed?: number;
+  operationMessageHandler?: OperationMessageHandler | string[];
 }
 
 function formatItemData(fieldData: unknown): string | undefined {
@@ -262,7 +265,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     supportBack = true,
     pullToRefresh = true,
     gridRef,
-    refreshSeed = 0,
+    operationMessageHandler,
     ...rest
   } = props;
 
@@ -283,10 +286,27 @@ export function ViewPage<T extends DataTypes.StringRecord>(
   }, [loadData]);
 
   React.useEffect(() => {
-    // Only refresh after the first data load
-    if (refreshSeed === 0 || data == null) return;
-    refresh();
-  }, [refreshSeed]);
+    const handler: OperationMessageHandler = (user, isSelf, message) => {
+      if (operationMessageHandler == null) return;
+      if (Array.isArray(operationMessageHandler)) {
+        if (!operationMessageHandler.includes(message.operationType)) return;
+      } else {
+        if (operationMessageHandler(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);
+    };
+  }, []);
 
   return (
     <CommonPage