@etsoo/materialui 1.1.39 → 1.1.42

package/src/ListMoreDisplay.tsx

@@ -1,65 +1,65 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes } from "@etsoo/shared";
 import {
-    Card,
-    CardActions,
-    CardContent,
-    CardHeader,
-    CardProps,
-    CircularProgress
-} from '@mui/material';
-import React from 'react';
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardProps,
+  CircularProgress
+} from "@mui/material";
+import React from "react";
 import {
-    GridData,
-    GridDataGet,
-    GridLoadDataProps,
-    GridLoader,
-    GridLoaderStates
-} from '@etsoo/react';
-import { LoadingButton } from './LoadingButton';
-import { globalApp } from './app/ReactApp';
+  GridData,
+  GridDataGet,
+  GridLoadDataProps,
+  GridLoader,
+  GridLoaderStates
+} from "@etsoo/react";
+import { LoadingButton } from "./LoadingButton";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * ListMoreDisplay props
  */
 export interface ListMoreDisplayProps<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> extends Omit<CardProps, 'children'>,
-        GridLoader<T> {
-    /**
-     * Batch size to load
-     */
-    batchSize?: number;
-
-    /**
-     * Children to display the list
-     */
-    children: (data: T, index: number) => React.ReactNode;
-
-    /**
-     * Search field template
-     */
-    fieldTemplate?: F;
-
-    /**
-     * Header renderer
-     */
-    headerRenderer?: (reset: (data?: GridData) => void) => React.ReactNode;
-
-    /**
-     * Header title
-     */
-    headerTitle?: React.ReactNode;
-
-    /**
-     * More button label
-     */
-    moreLabel?: string;
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+> extends Omit<CardProps, "children">,
+    GridLoader<T> {
+  /**
+   * Batch size to load
+   */
+  batchSize?: number;
+
+  /**
+   * Children to display the list
+   */
+  children: (data: T, index: number) => React.ReactNode;
+
+  /**
+   * Search field template
+   */
+  fieldTemplate?: F;
+
+  /**
+   * Header renderer
+   */
+  headerRenderer?: (reset: (data?: GridData) => void) => React.ReactNode;
+
+  /**
+   * Header title
+   */
+  headerTitle?: React.ReactNode;
+
+  /**
+   * More button label
+   */
+  moreLabel?: string;
 }
 
 type states<T> = {
-    items?: T[];
-    completed: boolean;
+  items?: T[];
+  completed: boolean;
 };
 
 /**
@@ -68,146 +68,142 @@ type states<T> = {
  * @returns Component
  */
 export function ListMoreDisplay<
-    T extends object,
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+  T extends object,
+  F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
 >(props: ListMoreDisplayProps<T, F>) {
-    // Destruct
-    const {
-        batchSize = 6,
-        children,
-        defaultOrderBy,
-        headerRenderer,
-        autoLoad = headerRenderer == null,
-        headerTitle,
-        loadBatchSize,
-        loadData,
-        moreLabel = typeof globalApp === 'undefined'
-            ? undefined
-            : globalApp.get('more') + '...',
-        fieldTemplate,
-        threshold,
-        ...rest
-    } = props;
-
-    // Refs
-    const refs = React.useRef<GridLoaderStates<T>>({
-        autoLoad,
-        currentPage: 0,
-        hasNextPage: true,
-        isNextPageLoading: false,
-        orderBy: defaultOrderBy,
-        batchSize,
-        loadedItems: 0,
-        selectedItems: [],
-        idCache: {}
-    });
-    const ref = refs.current;
-
-    // States
-    const [states, setStates] = React.useReducer(
-        (currentStates: states<T>, newStates: Partial<states<T>>) => {
-            return { ...currentStates, ...newStates };
-        },
-        { completed: false }
-    );
-
-    // Load data
-    const loadDataLocal = async (reset: boolean = false) => {
-        // Prevent multiple loadings
-        if (!ref.hasNextPage || ref.isNextPageLoading) return;
-
-        // Update state
-        ref.isNextPageLoading = true;
-
-        // Parameters
-        const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
-
-        const loadProps: GridLoadDataProps = {
-            currentPage,
-            batchSize,
-            orderBy,
-            orderByAsc,
-            data
-        };
-
-        const mergedData = GridDataGet(loadProps, fieldTemplate);
-
-        const items = await loadData(mergedData);
-        if (items == null || ref.isMounted === false) {
-            return;
-        }
-        ref.isMounted = true;
-
-        const newItems = items.length;
-        const hasNextPage = newItems >= batchSize;
-        ref.lastLoadedItems = newItems;
-        ref.isNextPageLoading = false;
-        ref.hasNextPage = hasNextPage;
-
-        // Next page
-        ref.currentPage = currentPage + 1;
-
-        // Update rows
-        if (states.items == null || reset) {
-            setStates({ items, completed: !hasNextPage });
-        } else {
-            setStates({
-                items: [...states.items, ...items],
-                completed: !hasNextPage
-            });
-        }
+  // Destruct
+  const {
+    batchSize = 6,
+    children,
+    defaultOrderBy,
+    headerRenderer,
+    autoLoad = headerRenderer == null,
+    headerTitle,
+    loadBatchSize,
+    loadData,
+    moreLabel = globalApp ? globalApp.get("more") + "..." : undefined,
+    fieldTemplate,
+    threshold,
+    ...rest
+  } = props;
+
+  // Refs
+  const refs = React.useRef<GridLoaderStates<T>>({
+    autoLoad,
+    currentPage: 0,
+    hasNextPage: true,
+    isNextPageLoading: false,
+    orderBy: defaultOrderBy,
+    batchSize,
+    loadedItems: 0,
+    selectedItems: [],
+    idCache: {}
+  });
+  const ref = refs.current;
+
+  // States
+  const [states, setStates] = React.useReducer(
+    (currentStates: states<T>, newStates: Partial<states<T>>) => {
+      return { ...currentStates, ...newStates };
+    },
+    { completed: false }
+  );
+
+  // Load data
+  const loadDataLocal = async (reset: boolean = false) => {
+    // Prevent multiple loadings
+    if (!ref.hasNextPage || ref.isNextPageLoading) return;
+
+    // Update state
+    ref.isNextPageLoading = true;
+
+    // Parameters
+    const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
+
+    const loadProps: GridLoadDataProps = {
+      currentPage,
+      batchSize,
+      orderBy,
+      orderByAsc,
+      data
     };
 
-    const reset = (data?: GridData) => {
-        // Update the form data
-        ref.data = data;
+    const mergedData = GridDataGet(loadProps, fieldTemplate);
+
+    const items = await loadData(mergedData);
+    if (items == null || ref.isMounted === false) {
+      return;
+    }
+    ref.isMounted = true;
+
+    const newItems = items.length;
+    const hasNextPage = newItems >= batchSize;
+    ref.lastLoadedItems = newItems;
+    ref.isNextPageLoading = false;
+    ref.hasNextPage = hasNextPage;
+
+    // Next page
+    ref.currentPage = currentPage + 1;
+
+    // Update rows
+    if (states.items == null || reset) {
+      setStates({ items, completed: !hasNextPage });
+    } else {
+      setStates({
+        items: [...states.items, ...items],
+        completed: !hasNextPage
+      });
+    }
+  };
+
+  const reset = (data?: GridData) => {
+    // Update the form data
+    ref.data = data;
+
+    // Reset page number
+    ref.isNextPageLoading = false;
+    ref.currentPage = 0;
+    ref.hasNextPage = true;
 
-        // Reset page number
-        ref.isNextPageLoading = false;
-        ref.currentPage = 0;
-        ref.hasNextPage = true;
+    // Load data
+    loadDataLocal(true);
+  };
 
-        // Load data
-        loadDataLocal(true);
-    };
+  React.useEffect(() => {
+    if (autoLoad) loadDataLocal();
+  }, [autoLoad]);
 
-    React.useEffect(() => {
-        if (autoLoad) loadDataLocal();
-    }, [autoLoad]);
-
-    React.useEffect(() => {
-        return () => {
-            ref.isMounted = false;
-        };
-    }, []);
-
-    return (
-        <React.Fragment>
-            {headerRenderer && headerRenderer(reset)}
-            <Card {...rest}>
-                <CardHeader title={headerTitle}></CardHeader>
-                <CardContent
-                    sx={{
-                        paddingTop: 0,
-                        paddingBottom: states.completed ? 0 : 'inherit'
-                    }}
-                >
-                    {states.items == null ? (
-                        <CircularProgress size={20} />
-                    ) : (
-                        states.items.map((item, index) => children(item, index))
-                    )}
-                </CardContent>
-                {!states.completed && (
-                    <CardActions sx={{ justifyContent: 'flex-end' }}>
-                        <LoadingButton
-                            onClick={async () => await loadDataLocal()}
-                        >
-                            {moreLabel}
-                        </LoadingButton>
-                    </CardActions>
-                )}
-            </Card>
-        </React.Fragment>
-    );
+  React.useEffect(() => {
+    return () => {
+      ref.isMounted = false;
+    };
+  }, []);
+
+  return (
+    <React.Fragment>
+      {headerRenderer && headerRenderer(reset)}
+      <Card {...rest}>
+        <CardHeader title={headerTitle}></CardHeader>
+        <CardContent
+          sx={{
+            paddingTop: 0,
+            paddingBottom: states.completed ? 0 : "inherit"
+          }}
+        >
+          {states.items == null ? (
+            <CircularProgress size={20} />
+          ) : (
+            states.items.map((item, index) => children(item, index))
+          )}
+        </CardContent>
+        {!states.completed && (
+          <CardActions sx={{ justifyContent: "flex-end" }}>
+            <LoadingButton onClick={async () => await loadDataLocal()}>
+              {moreLabel}
+            </LoadingButton>
+          </CardActions>
+        )}
+      </Card>
+    </React.Fragment>
+  );
 }

package/src/OptionBool.tsx

@@ -18,7 +18,7 @@ export type OptionBoolProps = Omit<
  */
 export function OptionBool(props: OptionBoolProps) {
   // Options
-  const options = globalApp.getBools();
+  const options = globalApp?.getBools() ?? [];
 
   // Layout
   return (

package/src/SelectBool.tsx

@@ -21,7 +21,7 @@ export function SelectBool(props: SelectBoolProps) {
   const { search = true, autoAddBlankItem = search, ...rest } = props;
 
   // Options
-  const options = globalApp.getBools();
+  const options = globalApp?.getBools() ?? [];
 
   if (autoAddBlankItem) Utils.addBlankItem(options);
 

package/src/ShowDataComparison.tsx

@@ -1,15 +1,15 @@
-import { AuditLineChangesDto, IApp } from '@etsoo/appscript';
-import { NotificationMessageType } from '@etsoo/notificationbase';
-import { Utils } from '@etsoo/shared';
+import { AuditLineChangesDto, IApp } from "@etsoo/appscript";
+import { NotificationMessageType } from "@etsoo/notificationbase";
+import { Utils } from "@etsoo/shared";
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow
-} from '@mui/material';
-import React from 'react';
-import { globalApp } from './app/ReactApp';
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow
+} from "@mui/material";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * Check obj is instance of AuditLineChangesDto
@@ -17,20 +17,20 @@ import { globalApp } from './app/ReactApp';
  * @returns Result
  */
 export function IsAuditLineUpdateData(obj: any): obj is AuditLineChangesDto {
-    return (
-        typeof obj === 'object' &&
-        'oldData' in obj &&
-        typeof obj.oldData === 'object' &&
-        'newData' in obj &&
-        typeof obj.newData === 'object'
-    );
+  return (
+    typeof obj === "object" &&
+    "oldData" in obj &&
+    typeof obj.oldData === "object" &&
+    "newData" in obj &&
+    typeof obj.newData === "object"
+  );
 }
 
 // Format value
 const formatValue = (value: unknown, app: IApp) => {
-    if (value == null) return '';
-    if (value instanceof Date) return app.formatDate(value, 'ds');
-    return `${value}`;
+  if (value == null) return "";
+  if (value instanceof Date) return app.formatDate(value, "ds");
+  return `${value}`;
 };
 
 /**
@@ -41,65 +41,77 @@ const formatValue = (value: unknown, app: IApp) => {
  * @param equalCheck Equal check for properties
  */
 export const ShowDataComparison = (
-    data: AuditLineChangesDto,
-    modelTitle?: string,
-    getLabel?: (field: string) => string,
-    equalCheck: boolean = true
+  data: AuditLineChangesDto,
+  modelTitle?: string,
+  getLabel?: (field: string) => string,
+  equalCheck: boolean = true
 ) => {
-    modelTitle ??= globalApp.get<string>('dataComparison');
-    getLabel ??= (key) => {
-        return globalApp.get(Utils.formatInitial(key)) ?? key;
-    };
+  // Validate app
+  const app = globalApp;
+  if (app == null) {
+    throw new Error("No globalApp");
+  }
 
-    const keys = new Set([
-        ...Object.keys(data.oldData),
-        ...Object.keys(data.newData)
-    ]);
+  // Labels
+  const { dataComparison, field, newValue, oldValue } = app.getLabels(
+    "dataComparison",
+    "field",
+    "newValue",
+    "oldValue"
+  );
 
-    let rows = Array.from(keys).map((field) => ({
-        field,
-        oldValue: data.oldData[field],
-        newValue: data.newData[field]
-    }));
+  modelTitle ??= dataComparison;
+  getLabel ??= (key) => {
+    return app.get(Utils.formatInitial(key)) ?? key;
+  };
 
-    if (equalCheck)
-        rows = rows.filter(
-            (item) => !Utils.equals(item.oldValue, item.newValue)
-        );
+  const keys = new Set([
+    ...Object.keys(data.oldData),
+    ...Object.keys(data.newData)
+  ]);
 
-    const inputs = (
-        <Table>
-            <TableHead>
-                <TableRow>
-                    <TableCell width="18%">{globalApp.get('field')}</TableCell>
-                    <TableCell width="41%" align="right">
-                        {globalApp.get('oldValue')}
-                    </TableCell>
-                    <TableCell width="41%" align="right">
-                        {globalApp.get('newValue')}
-                    </TableCell>
-                </TableRow>
-            </TableHead>
-            <TableBody>
-                {rows.map((row) => (
-                    <TableRow key={row.field}>
-                        <TableCell>{getLabel!(row.field)}</TableCell>
-                        <TableCell align="right">
-                            {formatValue(row.oldValue, globalApp)}
-                        </TableCell>
-                        <TableCell align="right">
-                            {formatValue(row.newValue, globalApp)}
-                        </TableCell>
-                    </TableRow>
-                ))}
-            </TableBody>
-        </Table>
-    );
+  let rows = Array.from(keys).map((field) => ({
+    field,
+    oldValue: data.oldData[field],
+    newValue: data.newData[field]
+  }));
 
-    globalApp.notifier.alert(
-        [undefined, modelTitle],
-        undefined,
-        NotificationMessageType.Info,
-        { fullScreen: globalApp.smDown, inputs }
-    );
+  if (equalCheck)
+    rows = rows.filter((item) => !Utils.equals(item.oldValue, item.newValue));
+
+  const inputs = (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell width="18%">{field}</TableCell>
+          <TableCell width="41%" align="right">
+            {oldValue}
+          </TableCell>
+          <TableCell width="41%" align="right">
+            {newValue}
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row) => (
+          <TableRow key={row.field}>
+            <TableCell>{getLabel!(row.field)}</TableCell>
+            <TableCell align="right">
+              {formatValue(row.oldValue, app)}
+            </TableCell>
+            <TableCell align="right">
+              {formatValue(row.newValue, app)}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+
+  app.notifier.alert(
+    [undefined, modelTitle],
+    undefined,
+    NotificationMessageType.Info,
+    { fullScreen: app.smDown, inputs }
+  );
 };