@etsoo/materialui 1.1.39 → 1.1.42

package/lib/UserAvatar.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Avatar } from '@mui/material';
-import { BusinessUtils } from '@etsoo/appscript';
-import { globalApp } from './app/ReactApp';
+import React from "react";
+import { Avatar } from "@mui/material";
+import { BusinessUtils } from "@etsoo/appscript";
+import { globalApp } from "./app/ReactApp";
 /**
  * User avatar
  * @param props Props
@@ -10,9 +10,8 @@ import { globalApp } from './app/ReactApp';
 export function UserAvatar(props) {
     // Destruct
     const { src, title, formatTitle = (title) => {
-        return BusinessUtils.formatAvatarTitle(title, 3, typeof globalApp === 'undefined'
-            ? 'ME'
-            : globalApp.get('me'));
+        var _a;
+        return BusinessUtils.formatAvatarTitle(title, 3, (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("me")) !== null && _a !== void 0 ? _a : "ME");
     } } = props;
     // Format
     const fTitle = formatTitle(title);
@@ -20,6 +19,6 @@ export function UserAvatar(props) {
     return (React.createElement(Avatar, { title: title, src: src, sx: {
             width: 48,
             height: 32,
-            fontSize: count <= 2 ? '15px' : '12px'
+            fontSize: count <= 2 ? "15px" : "12px"
         } }, fTitle));
 }

package/lib/app/ReactApp.d.ts

@@ -1,9 +1,9 @@
-import { CoreApp, IActionResult, IApp, IAppSettings, ICoreApp, IUser } from '@etsoo/appscript';
-import { INotifier, NotificationReturn } from '@etsoo/notificationbase';
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
-import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from '@etsoo/react';
-import { NavigateFunction, NavigateOptions } from 'react-router-dom';
+import { CoreApp, IActionResult, IApp, IAppSettings, ICoreApp, IUser } from "@etsoo/appscript";
+import { INotifier, NotificationReturn } from "@etsoo/notificationbase";
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from "@etsoo/react";
+import { NavigateFunction, NavigateOptions } from "react-router-dom";
 /**
  * React Application Type
  */
@@ -11,7 +11,7 @@ export type ReactAppType = IApp & IReactAppBase;
 /**
  * Global application
  */
-export declare let globalApp: ReactAppType;
+export declare let globalApp: ReactAppType | null;
 /**
  * React app state detector
  * Case 1: undefined, when refresh the whole page

package/lib/app/ReactApp.js

@@ -1,11 +1,11 @@
-import { BridgeUtils, CoreApp, createClient } from '@etsoo/appscript';
-import { NotificationMessageType } from '@etsoo/notificationbase';
-import { WindowStorage } from '@etsoo/shared';
-import React from 'react';
-import { NotifierMU } from '../NotifierMU';
-import { ProgressCount } from '../ProgressCount';
-import { Labels } from './Labels';
-import { CultureState, PageActionType, PageState, UserActionType, UserState } from '@etsoo/react';
+import { BridgeUtils, CoreApp, createClient } from "@etsoo/appscript";
+import { NotificationMessageType } from "@etsoo/notificationbase";
+import { WindowStorage } from "@etsoo/shared";
+import React from "react";
+import { NotifierMU } from "../NotifierMU";
+import { ProgressCount } from "../ProgressCount";
+import { Labels } from "./Labels";
+import { CultureState, PageActionType, PageState, UserActionType, UserState } from "@etsoo/react";
 /**
  * Global application
  */
@@ -75,7 +75,7 @@ export class ReactApp extends CoreApp {
         this.userState = new UserState();
         if (BridgeUtils.host) {
             BridgeUtils.host.onUpdate((app, version) => {
-                this.notifier.message(NotificationMessageType.Success, this.get('updateTip') + `(${[app, version].join(', ')})`, this.get('updateReady'));
+                this.notifier.message(NotificationMessageType.Success, this.get("updateTip") + `(${[app, version].join(", ")})`, this.get("updateReady"));
             });
         }
         this.cultureState = new CultureState(settings.currentCulture);
@@ -88,13 +88,13 @@ export class ReactApp extends CoreApp {
      * @param callback Callback
      */
     alertResult(result, callback) {
-        const message = typeof result === 'string' ? result : this.formatResult(result);
-        if (message.endsWith(')')) {
-            const startPos = message.lastIndexOf('(');
+        const message = typeof result === "string" ? result : this.formatResult(result);
+        if (message.endsWith(")")) {
+            const startPos = message.lastIndexOf("(");
             if (startPos > 0) {
                 const main = message.substring(0, startPos).trim();
                 const tip = message.substring(startPos);
-                const titleNode = React.createElement(React.Fragment, null, main, React.createElement('br'), React.createElement('span', { style: { fontSize: '9px' } }, tip));
+                const titleNode = React.createElement(React.Fragment, null, main, React.createElement("br"), React.createElement("span", { style: { fontSize: "9px" } }, tip));
                 this.notifier.alert(titleNode, callback);
                 return;
             }
@@ -112,19 +112,19 @@ export class ReactApp extends CoreApp {
         // Update component labels
         Labels.setLabels(culture.resources, {
             notificationMU: {
-                alertTitle: 'warning',
-                alertOK: 'ok',
-                confirmTitle: 'confirm',
-                confirmYes: 'ok',
-                confirmNo: 'cancel',
-                promptTitle: 'prompt',
-                promptCancel: 'cancel',
-                promptOK: 'ok'
+                alertTitle: "warning",
+                alertOK: "ok",
+                confirmTitle: "confirm",
+                confirmYes: "ok",
+                confirmNo: "cancel",
+                promptTitle: "prompt",
+                promptCancel: "cancel",
+                promptOK: "ok"
             }
         });
         // Document title
         // Default is servier name's label or appName label
-        const title = (_b = (_a = this.get(this.name)) !== null && _a !== void 0 ? _a : this.get('appName')) !== null && _b !== void 0 ? _b : this.name;
+        const title = (_b = (_a = this.get(this.name)) !== null && _a !== void 0 ? _a : this.get("appName")) !== null && _b !== void 0 ? _b : this.name;
         const host = BridgeUtils.host;
         if (host) {
             // Notify host
@@ -170,11 +170,11 @@ export class ReactApp extends CoreApp {
      */
     freshCountdownUI(callback) {
         // Labels
-        const labels = this.getLabels('cancel', 'tokenExpiry');
+        const labels = this.getLabels("cancel", "tokenExpiry");
         // Progress
         const progress = React.createElement(ProgressCount, {
             seconds: 30,
-            valueUnit: 's',
+            valueUnit: "s",
             onComplete: () => {
                 // Stop the progress
                 return false;
@@ -228,7 +228,7 @@ export class ReactApp extends CoreApp {
     navigate(to, options) {
         if (this.navigateFunction == null)
             super.navigate(to, options);
-        else if (typeof to === 'number')
+        else if (typeof to === "number")
             this.navigateFunction(to);
         else
             this.navigateFunction(to, options);
@@ -239,7 +239,7 @@ export class ReactApp extends CoreApp {
      */
     setPageKey(key) {
         var _a;
-        this.setPageTitle((_a = this.get(key)) !== null && _a !== void 0 ? _a : '');
+        this.setPageTitle((_a = this.get(key)) !== null && _a !== void 0 ? _a : "");
     }
     /**
      * Show input dialog

package/lib/index.d.ts

@@ -38,6 +38,7 @@ export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
 export * from "./DataSteps";
+export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
@@ -77,6 +78,7 @@ export * from "./SelectEx";
 export * from "./ShowDataComparison";
 export * from "./Switch";
 export * from "./SwitchAnt";
+export * from "./SwitchField";
 export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";

package/lib/index.js

@@ -38,6 +38,7 @@ export * from "./CustomFabProps";
 export * from "./DataGridEx";
 export * from "./DataGridRenderers";
 export * from "./DataSteps";
+export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
@@ -77,6 +78,7 @@ export * from "./SelectEx";
 export * from "./ShowDataComparison";
 export * from "./Switch";
 export * from "./SwitchAnt";
+export * from "./SwitchField";
 export * from "./TabBox";
 export * from "./TableEx";
 export * from "./TextFieldEx";

package/lib/pages/ViewPage.d.ts

@@ -1,12 +1,12 @@
-import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
-import { DataTypes } from '@etsoo/shared';
-import { GridProps } from '@mui/material';
-import React from 'react';
-import { CommonPageProps } from './CommonPageProps';
+import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
+import { GridProps } from "@mui/material";
+import React from "react";
+import { CommonPageProps } from "./CommonPageProps";
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | 'default' | 'small' | object;
+export type ViewPageRowType = boolean | "default" | "small" | object;
 /**
  * View page display field
  */
@@ -40,7 +40,7 @@ export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | (
 /**
  * View page props
  */
-export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, 'children'> {
+export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, "children"> {
     /**
      * Actions
      */

package/lib/pages/ViewPage.js

@@ -1,25 +1,27 @@
-import { Utils } from '@etsoo/shared';
-import { Grid, LinearProgress, Stack, Typography } 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';
-import { CommonPage } from './CommonPage';
+import { DateUtils, Utils } from "@etsoo/shared";
+import { Grid, LinearProgress, Stack, Typography } 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";
+import { CommonPage } from "./CommonPage";
 function formatItemData(fieldData) {
     if (fieldData == null)
         return undefined;
-    if (typeof fieldData === 'string')
+    if (typeof fieldData === "string")
         return fieldData;
     if (fieldData instanceof Date)
-        return globalApp.formatDate(fieldData, 'd');
+        return globalApp
+            ? globalApp.formatDate(fieldData, "d")
+            : DateUtils.format(fieldData, "d");
     return `${fieldData}`;
 }
 function getResp(singleRow) {
-    return typeof singleRow === 'object'
+    return typeof singleRow === "object"
         ? singleRow
-        : singleRow === 'default'
+        : singleRow === "default"
             ? { xs: 12, sm: 12, md: 12, lg: 6, xl: 6 }
             : singleRow === true
                 ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
@@ -36,20 +38,20 @@ function getItemField(field, data) {
     // Item data and label
     let itemData, itemLabel, gridProps = {};
     if (Array.isArray(field)) {
-        const [fieldData, fieldType, renderProps, singleRow = 'small'] = field;
+        const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
-        itemLabel = (_a = globalApp.get(fieldData)) !== null && _a !== void 0 ? _a : fieldData;
+        itemLabel = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(fieldData)) !== null && _a !== void 0 ? _a : fieldData;
         gridProps = { ...getResp(singleRow) };
     }
-    else if (typeof field === 'object') {
+    else if (typeof field === "object") {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = 'default', ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
         gridProps = {
             ...rest,
             ...getResp(singleRow)
         };
         // Field data
-        if (typeof fieldData === 'function')
+        if (typeof fieldData === "function")
             itemData = fieldData(data);
         else if (dataType == null)
             itemData = formatItemData(data[fieldData]);
@@ -57,15 +59,15 @@ function getItemField(field, data) {
             itemData = GridDataFormat(data[fieldData], dataType, renderProps);
         // Field label
         itemLabel =
-            typeof fieldLabel === 'function'
+            typeof fieldLabel === "function"
                 ? fieldLabel()
                 : fieldLabel != null
-                    ? (_b = globalApp.get(fieldLabel)) !== null && _b !== void 0 ? _b : fieldLabel
+                    ? (_b = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(fieldLabel)) !== null && _b !== void 0 ? _b : fieldLabel
                     : fieldLabel;
     }
     else {
         itemData = formatItemData(data[field]);
-        itemLabel = (_c = globalApp.get(field)) !== null && _c !== void 0 ? _c : field;
+        itemLabel = (_c = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(field)) !== null && _c !== void 0 ? _c : field;
     }
     return [itemData, itemLabel, gridProps];
 }
@@ -81,7 +83,7 @@ export function ViewPage(props) {
     // Labels
     const labels = Labels.CommonPage;
     // Container
-    const pullContainer = '#page-container';
+    const pullContainer = "#page-container";
     // Load data
     const refresh = async () => {
         const result = await loadData();
@@ -91,28 +93,27 @@ export function ViewPage(props) {
     };
     return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, supportBack: supportBack }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", ref: gridRef, sx: {
-                '.MuiTypography-subtitle2': {
-                    fontWeight: 'bold'
+                ".MuiTypography-subtitle2": {
+                    fontWeight: "bold"
                 }
             } }, fields.map((field, index) => {
             // Get data
-            if (typeof field === 'function') {
+            if (typeof field === "function") {
                 // Most flexible way, do whatever you want
                 return field(data);
             }
             const [itemData, itemLabel, gridProps] = getItemField(field, data);
             // Some callback function may return '' instead of undefined
-            if (itemData == null || itemData === '')
+            if (itemData == null || itemData === "")
                 return undefined;
             // Layout
             return (React.createElement(Grid, { item: true, ...gridProps, key: index },
                 itemLabel != null && (React.createElement(Typography, { variant: "caption", component: "div" },
                     itemLabel,
                     ":")),
-                typeof itemData === 'object' ? (itemData) : (React.createElement(Typography, { variant: "subtitle2" }, itemData))));
+                typeof itemData === "object" ? (itemData) : (React.createElement(Typography, { variant: "subtitle2" }, itemData))));
         })),
-        React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings }, actions != null &&
-            Utils.getResult(actions, data, refresh)),
+        React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings }, actions != null && Utils.getResult(actions, data, refresh)),
         Utils.getResult(children, data, refresh),
         pullToRefresh && (React.createElement(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                 const container = document.querySelector(pullContainer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.39",
+  "version": "1.1.42",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,12 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.67",
+    "@etsoo/appscript": "^1.3.68",
     "@etsoo/notificationbase": "^1.1.24",
     "@etsoo/react": "^1.6.49",
     "@etsoo/shared": "^1.1.89",
     "@mui/icons-material": "^5.11.9",
     "@mui/material": "^5.11.10",
+    "@mui/x-data-grid": "^6.0.0-beta.5",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",

package/src/AuditDisplay.tsx

@@ -1,46 +1,46 @@
-import { AuditLineDto } from '@etsoo/appscript';
-import { Utils } from '@etsoo/shared';
-import { Button, Divider, Theme, Typography, useTheme } from '@mui/material';
-import React, { CSSProperties } from 'react';
-import { globalApp } from './app/ReactApp';
-import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
-import { ShowDataComparison } from './ShowDataComparison';
+import { AuditLineDto } from "@etsoo/appscript";
+import { Utils } from "@etsoo/shared";
+import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
+import React, { CSSProperties } from "react";
+import { globalApp } from "./app/ReactApp";
+import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
+import { ShowDataComparison } from "./ShowDataComparison";
 
 /**
  * Audit display props
  */
 export interface AuditDisplayProps
-    extends Omit<ListMoreDisplayProps<AuditLineDto>, 'children'> {
-    /**
-     * Get list item style callback
-     */
-    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+  extends Omit<ListMoreDisplayProps<AuditLineDto>, "children"> {
+  /**
+   * Get list item style callback
+   */
+  getItemStyle?: (index: number, theme: Theme) => CSSProperties;
 
-    /**
-     * Get column label
-     */
-    getColumnLabel?: (field: string) => string;
+  /**
+   * Get column label
+   */
+  getColumnLabel?: (field: string) => string;
 
-    /**
-     * Equal check
-     */
-    equalCheck?: boolean;
+  /**
+   * Equal check
+   */
+  equalCheck?: boolean;
 
-    /**
-     * Item/line renderer
-     */
-    itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
+  /**
+   * Item/line renderer
+   */
+  itemRenderer?: (data: AuditLineDto, index: number) => React.ReactNode;
 }
 
 // Get label
 const getLabel = (key: string) => {
-    return globalApp.get(Utils.formatInitial(key)) ?? key;
+  return globalApp?.get(Utils.formatInitial(key)) ?? key;
 };
 
 // Format date
 const formatDate = (date: Date) => {
-    if (typeof globalApp === 'undefined') return date.toUTCString();
-    return globalApp.formatDate(date, 'ds');
+  if (globalApp) return globalApp.formatDate(date, "ds");
+  return date.toUTCString();
 };
 
 /**
@@ -49,79 +49,72 @@ const formatDate = (date: Date) => {
  * @returns Component
  */
 export function AuditDisplay(props: AuditDisplayProps) {
-    // Theme
-    const theme = useTheme();
+  // Theme
+  const theme = useTheme();
 
-    // Title
-    var title = getLabel('dataComparison');
+  // Title
+  var title = getLabel("dataComparison");
 
-    // Destruct
-    const {
-        getItemStyle = (index, theme) => ({
-            padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
-            background:
-                index % 2 === 0
-                    ? theme.palette.grey[100]
-                    : theme.palette.grey[50]
-        }),
-        getColumnLabel,
-        equalCheck,
-        itemRenderer = (data) => {
-            const {
-                newData,
-                oldData,
-                changes = { newData: newData ?? {}, oldData: oldData ?? {} }
-            } = data;
-            return (
-                <React.Fragment>
-                    {changes != null && (
-                        <Button
-                            variant="outlined"
-                            size="small"
-                            onClick={() =>
-                                ShowDataComparison(
-                                    changes,
-                                    title,
-                                    getColumnLabel,
-                                    equalCheck
-                                )
-                            }
-                            sx={{
-                                marginLeft: theme.spacing(1),
-                                marginTop: theme.spacing(-0.5),
-                                float: 'right'
-                            }}
-                        >
-                            {title}
-                        </Button>
-                    )}
-                    <Typography>
-                        {formatDate(data.creation) +
-                            ', [' +
-                            getLabel(data.action) +
-                            '], ' +
-                            data.user}
-                    </Typography>
-                </React.Fragment>
-            );
-        },
-        headerTitle = (
-            <React.Fragment>
-                <Typography>{getLabel('audits')}</Typography>
-                <Divider />
-            </React.Fragment>
-        ),
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    getItemStyle = (index, theme) => ({
+      padding: [theme.spacing(1.5), theme.spacing(1)].join(" "),
+      background:
+        index % 2 === 0 ? theme.palette.grey[100] : theme.palette.grey[50]
+    }),
+    getColumnLabel,
+    equalCheck,
+    itemRenderer = (data) => {
+      const {
+        newData,
+        oldData,
+        changes = { newData: newData ?? {}, oldData: oldData ?? {} }
+      } = data;
+      return (
+        <React.Fragment>
+          {changes != null && (
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={() =>
+                ShowDataComparison(changes, title, getColumnLabel, equalCheck)
+              }
+              sx={{
+                marginLeft: theme.spacing(1),
+                marginTop: theme.spacing(-0.5),
+                float: "right"
+              }}
+            >
+              {title}
+            </Button>
+          )}
+          <Typography>
+            {formatDate(data.creation) +
+              ", [" +
+              getLabel(data.action) +
+              "], " +
+              data.user}
+          </Typography>
+        </React.Fragment>
+      );
+    },
+    headerTitle = (
+      <React.Fragment>
+        <Typography>{getLabel("audits")}</Typography>
+        <Divider />
+      </React.Fragment>
+    ),
+    ...rest
+  } = props;
 
-    // Layout
-    return (
-        <ListMoreDisplay<AuditLineDto> headerTitle={headerTitle} {...rest}>
-            {(data, index) => (
-                <div key={data.id} style={getItemStyle(index, theme)}>
-                    {itemRenderer(data, index)}
-                </div>
-            )}
-        </ListMoreDisplay>
-    );
+  // Layout
+  return (
+    <ListMoreDisplay<AuditLineDto> headerTitle={headerTitle} {...rest}>
+      {(data, index) => (
+        <div key={data.id} style={getItemStyle(index, theme)}>
+          {itemRenderer(data, index)}
+        </div>
+      )}
+    </ListMoreDisplay>
+  );
 }