@etsoo/materialui 1.4.74 → 1.4.76

package/lib/cjs/app/IServiceApp.d.ts

@@ -1,12 +1,7 @@
 import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
-import { ReactAppData, ReactAppType } from "./ReactApp";
+import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { IActionResult } from "@etsoo/shared";
-import React from "react";
-/**
- * Service application context
- */
-export declare const ServiceAppContext: React.Context<ReactAppData<IServiceApp> | null>;
 /**
  * Service application interface
  */

package/lib/cjs/app/IServiceApp.js

@@ -1,11 +1,2 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServiceAppContext = void 0;
-const react_1 = __importDefault(require("react"));
-/**
- * Service application context
- */
-exports.ServiceAppContext = react_1.default.createContext(null);

package/lib/cjs/app/ReactApp.d.ts

@@ -2,41 +2,26 @@ import { AppTryLoginParams, CoreApp, FormatResultCustomCallback, IApp, IAppSetti
 import { INotifier, NotificationReturn } from "@etsoo/notificationbase";
 import { DataTypes, IActionResult } from "@etsoo/shared";
 import React from "react";
-import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from "@etsoo/react";
+import { CultureAction, CultureState, INotificationReact, InputDialogProps, IStateProps, NotificationReactCallProps, UserAction, UserState } from "@etsoo/react";
 import { NavigateFunction, NavigateOptions } from "react-router";
 /**
  * React Application Type
  */
 export type ReactAppType = IApp & IReactAppBase;
-/**
- * React application data
- */
-export type ReactAppData<A extends ReactAppType> = {
-    /**
-     * Current application
-     */
-    app: A;
-};
 /**
  * React application context
  */
-export declare const ReactAppContext: React.Context<ReactAppData<ReactAppType> | null>;
+export declare const ReactAppContext: React.Context<ReactAppType | null>;
 /**
- * Global application
+ * Get React application context hook
+ * @returns React application
  */
-export declare let globalApp: ReactAppType | null;
+export declare function useAppContext(): ReactAppType | null;
 /**
- * React app state detector
- * Case 1: undefined, when refresh the whole page
- * Case 2: false, unauthorized
- * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
- * Case 4: property or properties changed
- * @param props Props
- * @returns Component
+ * Get React application context hook
+ * @returns React application
  */
-export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
-    children?: React.ReactNode | undefined;
-}>;
+export declare function useRequiredAppContext(): IApp & IReactAppBase;
 /**
  * React implemented base
  */
@@ -45,10 +30,6 @@ export interface IReactAppBase {
      * Override Notifier as React specific
      */
     readonly notifier: INotifier<React.ReactNode, NotificationReactCallProps>;
-    /**
-     * User state
-     */
-    readonly userState: UserState<any>;
     /**
      * Is screen size down 'sm'
      */
@@ -68,46 +49,30 @@ export interface IReactAppBase {
      * @returns Props
      */
     getMoneyFormatProps(currency?: string): object;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: IPageData): void;
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title: string, subtitle?: string): void;
-    /**
-     * Set page title and data
-     * @param title Page title
-     */
-    setPageTitle(title: string): void;
     /**
      * Show input dialog
      * @param props Props
      */
     showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
+    /**
+     * State detector component
+     * @param props Props
+     */
+    stateDetector(props: IStateProps): React.ReactNode;
 }
 /**
  * Core application interface
  */
-export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps>, IReactAppBase {
+export interface IReactApp<S extends IAppSettings, D extends IUser> extends ICoreApp<D, S, React.ReactNode, NotificationReactCallProps>, Omit<IReactAppBase, "userState"> {
     /**
      * User state
      */
     readonly userState: UserState<D>;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: P): void;
 }
 /**
  * React application
  */
-export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
+export declare class ReactApp<S extends IAppSettings, D extends IUser> extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D> {
     private static _notifierProvider;
     /**
      * Get notifier provider
@@ -118,10 +83,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Culture state
      */
     readonly cultureState: CultureState;
-    /**
-     * Page state
-     */
-    readonly pageState: PageState<P>;
     /**
      * User state
      */
@@ -138,10 +99,6 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Navigate function
      */
     navigateFunction?: NavigateFunction;
-    /**
-     * Page state dispatch
-     */
-    pageStateDispatch?: React.Dispatch<PageAction<P>>;
     /**
      * User state dispatch
      */
@@ -205,33 +162,20 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @returns Result
      */
     protected tryLoginIgnoreResult(result: IActionResult): boolean;
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data: P): void;
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title: string, subtitle?: string): void;
     /**
      * Navigate to Url or delta
      * @param url Url or delta
      * @param options Options
      */
     navigate<T extends number | string | URL>(to: T, options?: T extends number ? never : NavigateOptions): void;
-    /**
-     * Set page title and data
-     * @param key Page title resource key
-     */
-    setPageKey(key: string): void;
     /**
      * Show input dialog
      * @param props Props
      */
     showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
+    stateDetector(props: IStateProps): React.FunctionComponentElement<{
+        children?: React.ReactNode | undefined;
+    }>;
     /**
      * User login extended
      * @param user New user

package/lib/cjs/app/ReactApp.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactApp = exports.globalApp = exports.ReactAppContext = void 0;
-exports.ReactAppStateDetector = ReactAppStateDetector;
+exports.ReactApp = exports.ReactAppContext = void 0;
+exports.useAppContext = useAppContext;
+exports.useRequiredAppContext = useRequiredAppContext;
 const appscript_1 = require("@etsoo/appscript");
 const notificationbase_1 = require("@etsoo/notificationbase");
 const shared_1 = require("@etsoo/shared");
@@ -18,41 +19,18 @@ const react_2 = require("@etsoo/react");
  */
 exports.ReactAppContext = react_1.default.createContext(null);
 /**
- * React app state detector
- * Case 1: undefined, when refresh the whole page
- * Case 2: false, unauthorized
- * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
- * Case 4: property or properties changed
- * @param props Props
- * @returns Component
+ * Get React application context hook
+ * @returns React application
  */
-function ReactAppStateDetector(props) {
-    // Destruct
-    const { targetFields, update } = props;
-    // Context
-    const { state } = exports.globalApp == null
-        ? {}
-        : react_1.default.useContext(exports.globalApp.userState.context);
-    // Ready
-    react_1.default.useEffect(() => {
-        // Match fields
-        const changedFields = state.lastChangedFields;
-        let matchedFields;
-        if (targetFields == null || changedFields == null) {
-            matchedFields = changedFields;
-        }
-        else {
-            matchedFields = [];
-            targetFields.forEach((targetField) => {
-                if (changedFields.includes(targetField))
-                    matchedFields?.push(targetField);
-            });
-        }
-        // Callback
-        update(state.authorized, matchedFields);
-    }, [state]);
-    // return
-    return react_1.default.createElement(react_1.default.Fragment);
+function useAppContext() {
+    return react_1.default.useContext(exports.ReactAppContext);
+}
+/**
+ * Get React application context hook
+ * @returns React application
+ */
+function useRequiredAppContext() {
+    return (0, react_2.useRequiredContext)(exports.ReactAppContext);
 }
 /**
  * React application
@@ -74,10 +52,6 @@ class ReactApp extends appscript_1.CoreApp {
      * Culture state
      */
     cultureState;
-    /**
-     * Page state
-     */
-    pageState;
     /**
      * User state
      */
@@ -94,10 +68,6 @@ class ReactApp extends appscript_1.CoreApp {
      * Navigate function
      */
     navigateFunction;
-    /**
-     * Page state dispatch
-     */
-    pageStateDispatch;
     /**
      * User state dispatch
      */
@@ -116,8 +86,6 @@ class ReactApp extends appscript_1.CoreApp {
             });
         }
         this.cultureState = new react_2.CultureState(settings.currentCulture);
-        this.pageState = new react_2.PageState();
-        exports.globalApp = this;
     }
     /**
      * Override alert action result
@@ -283,35 +251,6 @@ class ReactApp extends appscript_1.CoreApp {
         else
             return false;
     }
-    /**
-     * Set page data
-     * @param data Page data
-     */
-    setPageData(data) {
-        // Dispatch the change
-        if (this.pageStateDispatch != null) {
-            this.pageStateDispatch({
-                type: react_2.PageActionType.Data,
-                data
-            });
-        }
-    }
-    /**
-     * Set page title and subtitle
-     * @param title Page title
-     * @param subtitle Page subtitle
-     */
-    setPageTitle(title, subtitle) {
-        // Data
-        const data = { title, subtitle };
-        // Dispatch the change
-        if (this.pageStateDispatch != null) {
-            this.pageStateDispatch({
-                type: react_2.PageActionType.Title,
-                data
-            });
-        }
-    }
     /**
      * Navigate to Url or delta
      * @param url Url or delta
@@ -325,13 +264,6 @@ class ReactApp extends appscript_1.CoreApp {
         else
             this.navigateFunction(to, options);
     }
-    /**
-     * Set page title and data
-     * @param key Page title resource key
-     */
-    setPageKey(key) {
-        this.setPageTitle(this.get(key) ?? "");
-    }
     /**
      * Show input dialog
      * @param props Props
@@ -339,6 +271,32 @@ class ReactApp extends appscript_1.CoreApp {
     showInputDialog({ title, message, callback, ...rest }) {
         return this.notifier.prompt(message, callback, title, rest);
     }
+    stateDetector(props) {
+        // Destruct
+        const { targetFields, update } = props;
+        // Context
+        const { state } = react_1.default.useContext(this.userState.context);
+        // Ready
+        react_1.default.useEffect(() => {
+            // Match fields
+            const changedFields = state.lastChangedFields;
+            let matchedFields;
+            if (targetFields == null || changedFields == null) {
+                matchedFields = changedFields;
+            }
+            else {
+                matchedFields = [];
+                targetFields.forEach((targetField) => {
+                    if (changedFields.includes(targetField))
+                        matchedFields?.push(targetField);
+                });
+            }
+            // Callback
+            update(state.authorized, matchedFields);
+        }, [state]);
+        // return
+        return react_1.default.createElement(react_1.default.Fragment);
+    }
     /**
      * User login extended
      * @param user New user

package/lib/cjs/app/ServiceApp.d.ts

@@ -1,7 +1,6 @@
 import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
-import { IServicePageData } from "./IServicePage";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { ReactApp } from "./ReactApp";
 import { IActionResult } from "@etsoo/shared";
@@ -11,7 +10,7 @@ import { IActionResult } from "@etsoo/shared";
  * Use the acess token to the service api, get a service access token
  * Use the new acess token and refresh token to login
  */
-export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends IServicePageData = IServicePageData, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U, P> implements IServiceApp {
+export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends IServiceAppSettings = IServiceAppSettings> extends ReactApp<S, U> implements IServiceApp {
     /**
      * Core endpoint
      */

package/lib/cjs/custom/CustomFieldWindow.js

@@ -8,9 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
-const ReactApp_1 = require("../app/ReactApp");
 const MUGlobal_1 = require("../MUGlobal");
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const ReactApp_1 = require("../app/ReactApp");
 function calculateKeys(data) {
     let count = 0;
     for (const key in data) {
@@ -46,11 +46,8 @@ function parseJsonData(jsonData) {
  * @returns Component
  */
 function CustomFieldWindow(props) {
-    // Validate app
-    const app = ReactApp_1.globalApp;
-    if (app == null) {
-        throw new Error("No globalApp");
-    }
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
     const { children, label = app.get("jsonData"), gridProps, jsonData, inputName = "jsonData", inputRef, onUpdate } = props;
     const spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
     const [count, setCount] = react_1.default.useState(0);

package/lib/cjs/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./app/CommonApp";
 export * from "./app/IServiceApp";
 export * from "./app/IServiceAppSettings";
-export * from "./app/IServicePage";
 export * from "./app/IServiceUser";
 export * from "./app/ISmartERPUser";
 export * from "./app/Labels";

package/lib/cjs/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./app/CommonApp"), exports);
 __exportStar(require("./app/IServiceApp"), exports);
 __exportStar(require("./app/IServiceAppSettings"), exports);
-__exportStar(require("./app/IServicePage"), exports);
 __exportStar(require("./app/IServiceUser"), exports);
 __exportStar(require("./app/ISmartERPUser"), exports);
 __exportStar(require("./app/Labels"), exports);

package/lib/cjs/pages/CommonPage.js

@@ -20,6 +20,8 @@ const ReactApp_1 = require("../app/ReactApp");
  * @param props Props
  */
 function CommonPage(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
     const { children, disableGutters = true, fabTop, fabButtons, fabColumnDirection, fabPanel, fabPaddingAdjust = 1.5, fabSize = "small", maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal_1.MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
     // Fab padding
@@ -57,7 +59,7 @@ function CommonPage(props) {
         }
     }, [update]);
     // Return the UI
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && ((0, jsx_runtime_1.jsx)(ReactApp_1.ReactAppStateDetector, { targetFields: targetFields, update: update })), (0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [update && app?.stateDetector({ targetFields, update }), (0, jsx_runtime_1.jsxs)(material_1.Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [(0, jsx_runtime_1.jsxs)(FabBox_1.FabBox, { sx: {
                             zIndex: 1,
                             ...(typeof fabTop === "function"
                                 ? fabTop(theme, fabPadding)

package/lib/cjs/pages/LeftDrawer.js

@@ -11,8 +11,10 @@ const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft")
 const DrawerHeader_1 = require("./DrawerHeader");
 const ReactApp_1 = require("../app/ReactApp");
 function LeftDrawer(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
     // Destruct
-    const { mdUp, width, appName = ReactApp_1.globalApp?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
+    const { mdUp, width, appName = app?.get("appName"), logoUrl = "/logo192.png", onMinimize, open = mdUp, children } = props;
     // Menu open/close state
     const [openLocal, setOpen] = react_1.default.useState();
     const handleDrawerClose = () => {
@@ -33,5 +35,5 @@ function LeftDrawer(props) {
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
             keepMounted: true // Better open performance on mobile.
-        }, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: ReactApp_1.globalApp?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
+        }, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
 }

package/lib/cjs/pages/ViewPage.js

@@ -12,13 +12,13 @@ const shared_1 = require("@etsoo/shared");
 const material_1 = require("@mui/material");
 const react_3 = __importDefault(require("react"));
 const Labels_1 = require("../app/Labels");
-const ReactApp_1 = require("../app/ReactApp");
 const GridDataFormat_1 = require("../GridDataFormat");
 const MUGlobal_1 = require("../MUGlobal");
 const PullToRefreshUI_1 = require("../PullToRefreshUI");
 const CommonPage_1 = require("./CommonPage");
 const MessageUtils_1 = require("../messages/MessageUtils");
 const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
+const ReactApp_1 = require("../app/ReactApp");
 /**
  * View page grid item
  * @param props Props
@@ -38,15 +38,13 @@ function ViewPageGridItem(props) {
     // Layout
     return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: data }))] }));
 }
-function formatItemData(fieldData) {
+function formatItemData(app, fieldData) {
     if (fieldData == null)
         return undefined;
     if (typeof fieldData === "string")
         return fieldData;
     if (fieldData instanceof Date)
-        return ReactApp_1.globalApp
-            ? ReactApp_1.globalApp.formatDate(fieldData, "d")
-            : shared_1.DateUtils.format(fieldData, "d");
+        return app.formatDate(fieldData, "d");
     return `${fieldData}`;
 }
 function getResp(singleRow) {
@@ -65,13 +63,13 @@ function getResp(singleRow) {
                 };
     return { size };
 }
-function getItemField(field, data) {
+function getItemField(app, field, data) {
     // Item data and label
     let itemData, itemLabel, gridProps = {};
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
-        itemLabel = ReactApp_1.globalApp?.get(fieldData) ?? fieldData;
+        itemLabel = app.get(fieldData) ?? fieldData;
         gridProps = { ...getResp(singleRow) };
     }
     else if (typeof field === "object") {
@@ -85,7 +83,7 @@ function getItemField(field, data) {
         if (typeof fieldData === "function")
             itemData = fieldData(data);
         else if (dataType == null)
-            itemData = formatItemData(data[fieldData]);
+            itemData = formatItemData(app, data[fieldData]);
         else
             itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], dataType, renderProps);
         // Field label
@@ -93,12 +91,12 @@ function getItemField(field, data) {
             typeof fieldLabel === "function"
                 ? fieldLabel(data)
                 : fieldLabel != null
-                    ? ReactApp_1.globalApp?.get(fieldLabel) ?? fieldLabel
+                    ? app.get(fieldLabel) ?? fieldLabel
                     : fieldLabel;
     }
     else {
-        itemData = formatItemData(data[field]);
-        itemLabel = ReactApp_1.globalApp?.get(field) ?? field;
+        itemData = formatItemData(app, data[field]);
+        itemLabel = app.get(field) ?? field;
     }
     return [itemData, itemLabel, gridProps];
 }
@@ -107,6 +105,8 @@ function getItemField(field, data) {
  * @param props Props
  */
 function ViewPage(props) {
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
     const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
     // Data
@@ -118,8 +118,7 @@ function ViewPage(props) {
     // Load data
     const refresh = react_3.default.useCallback(async () => {
         const result = await loadData();
-        if (result == null)
-            return;
+        // When failed or no data returned, show the loading bar
         setData(result);
     }, [loadData]);
     react_3.default.useEffect(() => {
@@ -147,7 +146,7 @@ function ViewPage(props) {
                             // Most flexible way, do whatever you want
                             return field(data, refresh);
                         }
-                        const [itemData, itemLabel, gridProps] = getItemField(field, data);
+                        const [itemData, itemLabel, gridProps] = getItemField(app, field, data);
                         // Some callback function may return '' instead of undefined
                         if (itemData == null || itemData === "")
                             return undefined;

package/lib/mjs/AddresSelector.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormLabel, Grid2 } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Address field
  */
@@ -19,8 +19,10 @@ export var AddressField;
  * @param props Props
  */
 export function AddressSelector(props) {
+    // Global app
+    const app = useAppContext();
     // Labels
-    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = globalApp?.getLabels("region", "state", "city", "district") ?? {};
+    const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = app?.getLabels("region", "state", "city", "district") ?? {};
     // Destruct
     const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
     const isMounted = React.useRef(true);

package/lib/mjs/AuditDisplay.js

@@ -2,19 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
 import { Button, Divider, Typography, useTheme } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
 import { ListMoreDisplay } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
-// Get label
-const getLabel = (key) => {
-    return globalApp?.get(Utils.formatInitial(key)) ?? key;
-};
-// Format date
-const formatDate = (date) => {
-    if (globalApp)
-        return globalApp.formatDate(date, "ds");
-    return date.toUTCString();
-};
+import { useAppContext } from "./app/ReactApp";
 /**
  * Audit display
  * @param props Props
@@ -23,6 +13,16 @@ const formatDate = (date) => {
 export function AuditDisplay(props) {
     // Theme
     const theme = useTheme();
+    // Global app
+    const app = useAppContext();
+    // Get label
+    const getLabel = (key) => {
+        return app?.get(Utils.formatInitial(key)) ?? key;
+    };
+    // Format date
+    const formatDate = (date) => {
+        return app?.formatDate(date, "ds") ?? date.toUTCString();
+    };
     // Title
     var title = getLabel("dataComparison");
     // Destruct

package/lib/mjs/BridgeCloseButton.js

@@ -3,15 +3,17 @@ import { BridgeUtils } from "@etsoo/appscript";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, IconButton } from "@mui/material";
 import React from "react";
-import { globalApp } from "./app/ReactApp";
+import { useAppContext } from "./app/ReactApp";
 /**
  * Bridge close button
  * @param props Props
  * @returns Component
  */
 export function BridgeCloseButton(props) {
+    // Global app
+    const app = useAppContext();
     // Destruct
-    const { boxProps, onClick, title = globalApp?.get("close") ?? "Close", validate, ...rest } = props;
+    const { boxProps, onClick, title = app?.get("close") ?? "Close", validate, ...rest } = props;
     // Host
     const host = BridgeUtils.host;
     if (host == null ||