@etsoo/materialui 1.4.74 → 1.4.75

package/src/app/ReactApp.ts

@@ -24,15 +24,12 @@ import {
   CultureState,
   INotificationReact,
   InputDialogProps,
-  IPageData,
   IStateProps,
   NotificationReactCallProps,
-  PageAction,
-  PageActionType,
-  PageState,
   UserAction,
   UserActionType,
   UserCalls,
+  useRequiredContext,
   UserState
 } from "@etsoo/react";
 import { NavigateFunction, NavigateOptions } from "react-router";
@@ -42,67 +39,25 @@ import { NavigateFunction, NavigateOptions } from "react-router";
  */
 export type ReactAppType = IApp & IReactAppBase;
 
-/**
- * React application data
- */
-export type ReactAppData<A extends ReactAppType> = {
-  /**
-   * Current application
-   */
-  app: A;
-};
-
 /**
  * React application context
  */
-export const ReactAppContext =
-  React.createContext<ReactAppData<ReactAppType> | null>(null);
+export const ReactAppContext = React.createContext<ReactAppType | null>(null);
 
 /**
- * Global application
+ * Get React application context hook
+ * @returns React application
  */
-export let globalApp: ReactAppType | null;
+export function useAppContext() {
+  return React.useContext(ReactAppContext);
+}
 
 /**
- * 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 function ReactAppStateDetector(props: IStateProps) {
-  // Destruct
-  const { targetFields, update } = props;
-
-  // Context
-  const { state } =
-    globalApp == null
-      ? ({} as UserCalls<IUser>)
-      : React.useContext(globalApp.userState.context);
-
-  // Ready
-  React.useEffect(() => {
-    // Match fields
-    const changedFields = state.lastChangedFields;
-    let matchedFields: string[] | undefined;
-    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.createElement(React.Fragment);
+export function useRequiredAppContext() {
+  return useRequiredContext(ReactAppContext);
 }
 
 /**
@@ -114,11 +69,6 @@ export interface IReactAppBase {
    */
   readonly notifier: INotifier<React.ReactNode, NotificationReactCallProps>;
 
-  /**
-   * User state
-   */
-  readonly userState: UserState<any>;
-
   /**
    * Is screen size down 'sm'
    */
@@ -142,25 +92,6 @@ export interface IReactAppBase {
    */
   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
@@ -171,39 +102,32 @@ export interface IReactAppBase {
     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 class ReactApp<
-    S extends IAppSettings,
-    D extends IUser,
-    P extends IPageData
-  >
+export class ReactApp<S extends IAppSettings, D extends IUser>
   extends CoreApp<D, S, React.ReactNode, NotificationReactCallProps>
-  implements IReactApp<S, D, P>
+  implements IReactApp<S, D>
 {
   private static _notifierProvider: React.FunctionComponent<NotificationRenderProps>;
 
@@ -225,11 +149,6 @@ export class ReactApp<
    */
   readonly cultureState: CultureState;
 
-  /**
-   * Page state
-   */
-  readonly pageState: PageState<P>;
-
   /**
    * User state
    */
@@ -250,11 +169,6 @@ export class ReactApp<
    */
   navigateFunction?: NavigateFunction;
 
-  /**
-   * Page state dispatch
-   */
-  pageStateDispatch?: React.Dispatch<PageAction<P>>;
-
   /**
    * User state dispatch
    */
@@ -287,9 +201,6 @@ export class ReactApp<
     }
 
     this.cultureState = new CultureState(settings.currentCulture);
-    this.pageState = new PageState<P>();
-
-    globalApp = this;
   }
 
   /**
@@ -494,38 +405,6 @@ export class ReactApp<
     else return false;
   }
 
-  /**
-   * Set page data
-   * @param data Page data
-   */
-  setPageData(data: P): void {
-    // Dispatch the change
-    if (this.pageStateDispatch != null) {
-      this.pageStateDispatch({
-        type: PageActionType.Data,
-        data
-      });
-    }
-  }
-
-  /**
-   * Set page title and subtitle
-   * @param title Page title
-   * @param subtitle Page subtitle
-   */
-  setPageTitle(title: string, subtitle?: string): void {
-    // Data
-    const data = { title, subtitle } as P;
-
-    // Dispatch the change
-    if (this.pageStateDispatch != null) {
-      this.pageStateDispatch({
-        type: PageActionType.Title,
-        data
-      });
-    }
-  }
-
   /**
    * Navigate to Url or delta
    * @param url Url or delta
@@ -540,14 +419,6 @@ export class ReactApp<
     else this.navigateFunction(to, options);
   }
 
-  /**
-   * Set page title and data
-   * @param key Page title resource key
-   */
-  setPageKey(key: string): void {
-    this.setPageTitle(this.get<string>(key) ?? "");
-  }
-
   /**
    * Show input dialog
    * @param props Props
@@ -566,6 +437,36 @@ export class ReactApp<
     );
   }
 
+  stateDetector(props: IStateProps) {
+    // Destruct
+    const { targetFields, update } = props;
+
+    // Context
+    const { state } = React.useContext(this.userState.context);
+
+    // Ready
+    React.useEffect(() => {
+      // Match fields
+      const changedFields = state.lastChangedFields;
+      let matchedFields: string[] | undefined;
+      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.createElement(React.Fragment);
+  }
+
   /**
    * User login extended
    * @param user New user

package/src/app/ServiceApp.ts

@@ -10,7 +10,6 @@ import {
 } 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";
@@ -27,10 +26,9 @@ const tryLoginKey = "tryLogin";
  */
 export class ServiceApp<
     U extends IServiceUser = IServiceUser,
-    P extends IServicePageData = IServicePageData,
     S extends IServiceAppSettings = IServiceAppSettings
   >
-  extends ReactApp<S, U, P>
+  extends ReactApp<S, U>
   implements IServiceApp
 {
   /**

package/src/custom/CustomFieldWindow.tsx

@@ -3,9 +3,9 @@ import { CustomFieldReactCollection } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import { Grid2, Grid2Props, Stack } from "@mui/material";
 import React from "react";
-import { globalApp } from "../app/ReactApp";
 import { MUGlobal } from "../MUGlobal";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useRequiredAppContext } from "../app/ReactApp";
 
 function calculateKeys(data: Record<string, unknown>) {
   let count = 0;
@@ -100,11 +100,8 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
 export function CustomFieldWindow<D extends CustomFieldData = CustomFieldData>(
   props: CustomFieldWindowProps<D>
 ) {
-  // Validate app
-  const app = globalApp;
-  if (app == null) {
-    throw new Error("No globalApp");
-  }
+  // Global app
+  const app = useRequiredAppContext();
 
   const {
     children,

package/src/index.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/src/pages/CommonPage.tsx

@@ -7,10 +7,10 @@ import { Container, ContainerProps, Fab, Theme, useTheme } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
-import { ReactAppStateDetector } from "../app/ReactApp";
 import type { CustomFabSize } from "../CustomFabProps";
 import type { IStateUpdate, ListItemReact } from "@etsoo/react";
 import type { UserKey } from "@etsoo/appscript";
+import { useAppContext } from "../app/ReactApp";
 
 /**
  * Common page props
@@ -93,6 +93,9 @@ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
  * @param props Props
  */
 export function CommonPage(props: CommonPageProps) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     children,
@@ -166,9 +169,7 @@ export function CommonPage(props: CommonPageProps) {
   // Return the UI
   return (
     <React.Fragment>
-      {update && (
-        <ReactAppStateDetector targetFields={targetFields} update={update} />
-      )}
+      {update && app?.stateDetector({ targetFields, update })}
       <Container
         disableGutters={disableGutters}
         maxWidth={maxWidth}

package/src/pages/LeftDrawer.tsx

@@ -9,7 +9,7 @@ import {
 import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
-import { globalApp } from "../app/ReactApp";
+import { useAppContext } from "../app/ReactApp";
 
 /**
  * Left drawer props
@@ -52,11 +52,14 @@ export type LeftDrawerProps = React.PropsWithRef<{
 }>;
 
 export function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>) {
+  // Global app
+  const app = useAppContext();
+
   // Destruct
   const {
     mdUp,
     width,
-    appName = globalApp?.get("appName"),
+    appName = app?.get("appName"),
     logoUrl = "/logo192.png",
     onMinimize,
     open = mdUp,
@@ -99,7 +102,7 @@ export function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>) {
       <DrawerHeader>
         <a
           href="https://www.etsoo.com"
-          title={globalApp?.get("etsoo") ?? "ETSOO"}
+          title={app?.get("etsoo") ?? "ETSOO"}
           target="_blank"
           rel="noreferrer"
         >

package/src/pages/ViewPage.tsx

@@ -3,7 +3,7 @@ import {
   GridDataType,
   ScrollRestoration
 } from "@etsoo/react";
-import { DataTypes, DateUtils, Utils } from "@etsoo/shared";
+import { DataTypes, Utils } from "@etsoo/shared";
 import {
   Grid2,
   Grid2Props,
@@ -13,7 +13,6 @@ import {
 } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
-import { globalApp } from "../app/ReactApp";
 import { GridDataFormat } from "../GridDataFormat";
 import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
@@ -22,6 +21,7 @@ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHan
 import { MessageUtils } from "../messages/MessageUtils";
 import type { RefreshHandler } from "../messages/RefreshHandler";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
+import { ReactAppType, useRequiredAppContext } from "../app/ReactApp";
 
 /**
  * View page grid item properties
@@ -170,13 +170,13 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
     | { id: number; types: string[] };
 }
 
-function formatItemData(fieldData: unknown): string | undefined {
+function formatItemData(
+  app: ReactAppType,
+  fieldData: unknown
+): string | undefined {
   if (fieldData == null) return undefined;
   if (typeof fieldData === "string") return fieldData;
-  if (fieldData instanceof Date)
-    return globalApp
-      ? globalApp.formatDate(fieldData, "d")
-      : DateUtils.format(fieldData, "d");
+  if (fieldData instanceof Date) return app.formatDate(fieldData, "d");
   return `${fieldData}`;
 }
 
@@ -199,6 +199,7 @@ function getResp(singleRow: ViewPageRowType) {
 }
 
 function getItemField<T extends object>(
+  app: ReactAppType,
   field: ViewPageFieldTypeNarrow<T>,
   data: T
 ): [React.ReactNode, React.ReactNode, Grid2Props] {
@@ -210,7 +211,7 @@ function getItemField<T extends object>(
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
     itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
-    itemLabel = globalApp?.get<string>(fieldData) ?? fieldData;
+    itemLabel = app.get<string>(fieldData) ?? fieldData;
     gridProps = { ...getResp(singleRow) };
   } else if (typeof field === "object") {
     // Destruct
@@ -230,7 +231,7 @@ function getItemField<T extends object>(
 
     // Field data
     if (typeof fieldData === "function") itemData = fieldData(data);
-    else if (dataType == null) itemData = formatItemData(data[fieldData]);
+    else if (dataType == null) itemData = formatItemData(app, data[fieldData]);
     else itemData = GridDataFormat(data[fieldData], dataType, renderProps);
 
     // Field label
@@ -238,11 +239,11 @@ function getItemField<T extends object>(
       typeof fieldLabel === "function"
         ? fieldLabel(data)
         : fieldLabel != null
-        ? globalApp?.get<string>(fieldLabel) ?? fieldLabel
+        ? app.get<string>(fieldLabel) ?? fieldLabel
         : fieldLabel;
   } else {
-    itemData = formatItemData(data[field]);
-    itemLabel = globalApp?.get<string>(field) ?? field;
+    itemData = formatItemData(app, data[field]);
+    itemLabel = app.get<string>(field) ?? field;
   }
 
   return [itemData, itemLabel, gridProps];
@@ -255,6 +256,9 @@ function getItemField<T extends object>(
 export function ViewPage<T extends DataTypes.StringRecord>(
   props: ViewPageProps<T>
 ) {
+  // Global app
+  const app = useRequiredAppContext();
+
   // Destruct
   const {
     actions,
@@ -348,6 +352,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               }
 
               const [itemData, itemLabel, gridProps] = getItemField(
+                app,
                 field,
                 data
               );

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

@@ -1,6 +0,0 @@
-import { IPageData } from "@etsoo/react";
-/**
- * Service page data interface
- */
-export interface IServicePageData extends IPageData {
-}

package/lib/cjs/app/IServicePage.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/lib/mjs/app/IServicePage.d.ts

@@ -1,6 +0,0 @@
-import { IPageData } from "@etsoo/react";
-/**
- * Service page data interface
- */
-export interface IServicePageData extends IPageData {
-}

package/lib/mjs/app/IServicePage.js

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

package/src/app/IServicePage.ts

@@ -1,6 +0,0 @@
-import { IPageData } from "@etsoo/react";
-
-/**
- * Service page data interface
- */
-export interface IServicePageData extends IPageData {}