@etsoo/materialui 1.1.39 → 1.1.41

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.41",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
     "@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",

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>
+  );
 }

package/src/BridgeCloseButton.tsx

@@ -1,23 +1,23 @@
-import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, BoxProps, IconButton, IconButtonProps } from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
+import { BridgeUtils, IBridgeHost } from "@etsoo/appscript";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, BoxProps, IconButton, IconButtonProps } from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * Bridge close button props
  */
 export interface BridgeCloseButtonProps extends IconButtonProps {
-    /**
-     * Box props
-     */
-    boxProps?: BoxProps;
+  /**
+   * Box props
+   */
+  boxProps?: BoxProps;
 
-    /**
-     * Validate the host
-     * @param host Host
-     */
-    validate?(host: IBridgeHost): boolean;
+  /**
+   * Validate the host
+   * @param host Host
+   */
+  validate?(host: IBridgeHost): boolean;
 }
 
 /**
@@ -26,44 +26,42 @@ export interface BridgeCloseButtonProps extends IconButtonProps {
  * @returns Component
  */
 export function BridgeCloseButton(props: BridgeCloseButtonProps) {
-    // Destruct
-    const {
-        boxProps,
-        onClick,
-        title = typeof globalApp === 'undefined'
-            ? 'Close'
-            : globalApp.get('close'),
-        validate,
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    boxProps,
+    onClick,
+    title = globalApp?.get("close") ?? "Close",
+    validate,
+    ...rest
+  } = props;
 
-    // Host
-    const host = BridgeUtils.host;
+  // Host
+  const host = BridgeUtils.host;
 
-    if (
-        host == null ||
-        !host.closable() ||
-        (validate && validate(host) === false)
-    ) {
-        return <React.Fragment />;
-    }
+  if (
+    host == null ||
+    !host.closable() ||
+    (validate && validate(host) === false)
+  ) {
+    return <React.Fragment />;
+  }
 
-    // Click handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (onClick) onClick(event);
-        host.exit();
-    };
+  // Click handler
+  const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+    host.exit();
+  };
 
-    return (
-        <Box {...boxProps}>
-            <IconButton
-                aria-label="close"
-                onClick={onClickLocal}
-                title={title}
-                {...rest}
-            >
-                <CloseIcon />
-            </IconButton>
-        </Box>
-    );
+  return (
+    <Box {...boxProps}>
+      <IconButton
+        aria-label="close"
+        onClick={onClickLocal}
+        title={title}
+        {...rest}
+      >
+        <CloseIcon />
+      </IconButton>
+    </Box>
+  );
 }