@etsoo/react 1.4.80 → 1.4.84

package/lib/app/ReactApp.d.ts

@@ -30,6 +30,14 @@ export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IP
      * User state
      */
     readonly userState: UserState<D>;
+    /**
+     * Is screen size down 'sm'
+     */
+    smDown?: boolean;
+    /**
+     * Is screen size up 'md'
+     */
+    mdUp?: boolean;
     /**
      * Set page data
      * @param data Page data

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export * from './mu/pages/ViewPage';
 export * from './mu/texts/DateText';
 export * from './mu/texts/MoneyText';
 export * from './mu/texts/NumberText';
+export * from './mu/AuditDisplay';
 export * from './mu/ButtonLink';
 export * from './mu/ComboBox';
 export * from './mu/CountdownButton';
@@ -47,6 +48,7 @@ export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
+export * from './mu/ListMoreDisplay';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MobileListItemRenderer';

package/lib/index.js

@@ -33,6 +33,7 @@ export * from './mu/pages/ViewPage';
 export * from './mu/texts/DateText';
 export * from './mu/texts/MoneyText';
 export * from './mu/texts/NumberText';
+export * from './mu/AuditDisplay';
 export * from './mu/ButtonLink';
 export * from './mu/ComboBox';
 export * from './mu/CountdownButton';
@@ -50,6 +51,7 @@ export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
+export * from './mu/ListMoreDisplay';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MobileListItemRenderer';

package/lib/mu/AuditDisplay.d.ts

@@ -0,0 +1,39 @@
+import { Theme } from '@mui/material';
+import React, { CSSProperties } from 'react';
+import { ListMoreDisplayProps } from './ListMoreDisplay';
+/**
+ * Audit line update data model
+ */
+export interface AuditLineUpdateData {
+    oldData: Record<string, unknown>;
+    newData: Record<string, unknown>;
+}
+/**
+ * Audit line data model
+ */
+export interface AuditLine {
+    id: number;
+    creation: Date;
+    user: string;
+    action: string;
+    changes?: AuditLineUpdateData;
+}
+/**
+ * Audit display props
+ */
+export interface AuditDisplayProps extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+    /**
+     * Item/line renderer
+     */
+    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+}
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export declare function AuditDisplay(props: AuditDisplayProps): JSX.Element;

package/lib/mu/AuditDisplay.js

@@ -0,0 +1,84 @@
+import { Utils } from '@etsoo/shared';
+import { Button, Divider, Table, TableBody, TableCell, TableHead, TableRow, Typography, useTheme } from '@mui/material';
+import React from 'react';
+import { globalApp, NotificationMessageType } from '..';
+import { ListMoreDisplay } from './ListMoreDisplay';
+// Get label
+const getLabel = (key) => {
+    var _a;
+    if (typeof globalApp === 'undefined')
+        return key;
+    return (_a = globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+};
+// Format date
+const formatDate = (date) => {
+    if (typeof globalApp === 'undefined')
+        return date.toUTCString();
+    return globalApp.formatDate(date, 'ds');
+};
+// Format value
+const formatValue = (value) => {
+    if (value == null)
+        return '';
+    if (value instanceof Date && typeof globalApp !== 'undefined')
+        return globalApp.formatDate(value, 'ds');
+    return `${value}`;
+};
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export function AuditDisplay(props) {
+    // Theme
+    const theme = useTheme();
+    // Label
+    const dataComparisonLabel = getLabel('dataComparison');
+    // Show data comparison
+    const showDataComparison = (data) => {
+        if (typeof globalApp === 'undefined')
+            return;
+        const keys = new Set([
+            ...Object.keys(data.oldData),
+            ...Object.keys(data.newData)
+        ]);
+        const rows = Array.from(keys).map((field) => ({
+            field,
+            oldValue: data.oldData[field],
+            newValue: data.newData[field]
+        }));
+        const inputs = (React.createElement(Table, null,
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, null,
+                    React.createElement(TableCell, null, getLabel('field')),
+                    React.createElement(TableCell, { align: "right" }, getLabel('oldValue')),
+                    React.createElement(TableCell, { align: "right" }, getLabel('newValue')))),
+            React.createElement(TableBody, null, rows.map((row) => (React.createElement(TableRow, { key: row.field },
+                React.createElement(TableCell, null, getLabel(row.field)),
+                React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue)),
+                React.createElement(TableCell, { align: "right" }, formatValue(row.newValue))))))));
+        globalApp.notifier.alert([undefined, dataComparisonLabel], undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
+    };
+    // 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]
+    }), itemRenderer = (data) => {
+        return (React.createElement(React.Fragment, null,
+            data.changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => showDataComparison(data.changes), sx: {
+                    marginLeft: theme.spacing(1),
+                    float: 'right'
+                } }, dataComparisonLabel)),
+            React.createElement(Typography, null, formatDate(data.creation) +
+                ', [' +
+                getLabel(data.action) +
+                '], ' +
+                data.user)));
+    }, headerTitle = (React.createElement(React.Fragment, null,
+        getLabel('audits'),
+        React.createElement(Divider, null))), ...rest } = props;
+    // Layout
+    return (React.createElement(ListMoreDisplay, { headerTitle: headerTitle, ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));
+}

package/lib/mu/ListMoreDisplay.d.ts

@@ -0,0 +1,26 @@
+import { CardProps } from '@mui/material';
+import React from 'react';
+import { GridLoader } from '../components/GridLoader';
+/**
+ * ListMoreDisplay props
+ */
+export interface ListMoreDisplayProps<T> extends CardProps, GridLoader<T> {
+    /**
+     * Children to display the list
+     */
+    children: (data: T, index: number) => React.ReactNode;
+    /**
+     * More button label
+     */
+    moreLabel?: string;
+    /**
+     * Header title
+     */
+    headerTitle?: React.ReactNode;
+}
+/**
+ * ListMoreDisplay
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMoreDisplay<T extends {}>(props: ListMoreDisplayProps<T>): JSX.Element;

package/lib/mu/ListMoreDisplay.js

@@ -0,0 +1,85 @@
+import { Card, CardActions, CardContent, CardHeader, CircularProgress } from '@mui/material';
+import React from 'react';
+import { globalApp, LoadingButton } from '..';
+/**
+ * ListMoreDisplay
+ * @param props Props
+ * @returns Component
+ */
+export function ListMoreDisplay(props) {
+    // Destruct
+    const { autoLoad = true, children, defaultOrderBy, headerTitle, loadBatchSize, loadData, moreLabel = typeof globalApp === 'undefined'
+        ? undefined
+        : globalApp.get('more') + '...', threshold, ...rest } = props;
+    // Refs
+    const refs = React.useRef({
+        autoLoad,
+        currentPage: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        batchSize: 10,
+        loadedItems: 0,
+        selectedItems: []
+    });
+    const ref = refs.current;
+    // States
+    const [states, setStates] = React.useReducer((currentStates, newStates) => {
+        return { ...currentStates, ...newStates };
+    }, { completed: false });
+    // Load data
+    const loadDataLocal = async () => {
+        // Prevent multiple loadings
+        if (!ref.hasNextPage || ref.isNextPageLoading)
+            return;
+        // Update state
+        ref.isNextPageLoading = true;
+        // Parameters
+        const { currentPage, batchSize, orderBy, orderByAsc, data } = ref;
+        const loadProps = {
+            currentPage,
+            batchSize,
+            orderBy,
+            orderByAsc,
+            data
+        };
+        const items = await loadData(loadProps);
+        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;
+        // Update rows
+        if (states.items == null)
+            setStates({ items, completed: !hasNextPage });
+        else
+            setStates({
+                items: [...states.items, ...items],
+                completed: !hasNextPage
+            });
+    };
+    React.useEffect(() => {
+        if (autoLoad)
+            loadDataLocal();
+    }, [autoLoad]);
+    React.useEffect(() => {
+        return () => {
+            ref.isMounted = false;
+        };
+    }, []);
+    // Loading
+    if (states.items == null)
+        return React.createElement(CircularProgress, { size: 20 });
+    return (React.createElement(Card, { ...rest },
+        React.createElement(CardHeader, { title: headerTitle }),
+        React.createElement(CardContent, { sx: {
+                paddingTop: 0,
+                paddingBottom: states.completed ? 0 : 'inherit'
+            } }, states.items.map((item, index) => children(item, index))),
+        !states.completed && (React.createElement(CardActions, { sx: { justifyContent: 'flex-end' } },
+            React.createElement(LoadingButton, { onClick: async () => await loadDataLocal() }, moreLabel)))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.80",
+    "version": "1.4.84",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.29",
-        "@etsoo/notificationbase": "^1.1.0",
+        "@etsoo/appscript": "^1.2.33",
+        "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.9",
         "@mui/icons-material": "^5.3.1",
-        "@mui/material": "^5.3.1",
+        "@mui/material": "^5.4.0",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -72,7 +72,7 @@
         "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
-        "react-imask": "^6.2.2",
+        "react-imask": "^6.3.0",
         "react-window": "^1.8.6"
     },
     "devDependencies": {
@@ -83,8 +83,8 @@
         "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.10.1",
-        "@typescript-eslint/parser": "^5.10.1",
+        "@typescript-eslint/eslint-plugin": "^5.10.2",
+        "@typescript-eslint/parser": "^5.10.2",
         "eslint": "^8.8.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",

package/src/app/ReactApp.ts

@@ -96,6 +96,16 @@ export interface IReactApp<
      */
     readonly userState: UserState<D>;
 
+    /**
+     * Is screen size down 'sm'
+     */
+    smDown?: boolean;
+
+    /**
+     * Is screen size up 'md'
+     */
+    mdUp?: boolean;
+
     /**
      * Set page data
      * @param data Page data

package/src/index.ts

@@ -37,6 +37,7 @@ export * from './mu/texts/DateText';
 export * from './mu/texts/MoneyText';
 export * from './mu/texts/NumberText';
 
+export * from './mu/AuditDisplay';
 export * from './mu/ButtonLink';
 export * from './mu/ComboBox';
 export * from './mu/CountdownButton';
@@ -54,6 +55,7 @@ export * from './mu/IconButtonLink';
 export * from './mu/InputField';
 export * from './mu/ItemList';
 export * from './mu/ListItemRightIcon';
+export * from './mu/ListMoreDisplay';
 export * from './mu/LoadingButton';
 export * from './mu/MaskInput';
 export * from './mu/MobileListItemRenderer';

package/src/mu/AuditDisplay.tsx

@@ -0,0 +1,191 @@
+import { Utils } from '@etsoo/shared';
+import {
+    Button,
+    Divider,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Theme,
+    Typography,
+    useTheme
+} from '@mui/material';
+import React, { CSSProperties } from 'react';
+import { globalApp, NotificationMessageType } from '..';
+import { ListMoreDisplay, ListMoreDisplayProps } from './ListMoreDisplay';
+
+/**
+ * Audit line update data model
+ */
+export interface AuditLineUpdateData {
+    oldData: Record<string, unknown>;
+    newData: Record<string, unknown>;
+}
+
+/**
+ * Audit line data model
+ */
+export interface AuditLine {
+    id: number;
+    creation: Date;
+    user: string;
+    action: string;
+    changes?: AuditLineUpdateData;
+}
+
+/**
+ * Audit display props
+ */
+export interface AuditDisplayProps
+    extends Omit<ListMoreDisplayProps<AuditLine>, 'children'> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle?: (index: number, theme: Theme) => CSSProperties;
+
+    /**
+     * Item/line renderer
+     */
+    itemRenderer?: (data: AuditLine, index: number) => React.ReactNode;
+}
+
+// Get label
+const getLabel = (key: string) => {
+    if (typeof globalApp === 'undefined') return 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');
+};
+
+// Format value
+const formatValue = (value: unknown) => {
+    if (value == null) return '';
+    if (value instanceof Date && typeof globalApp !== 'undefined')
+        return globalApp.formatDate(value, 'ds');
+    return `${value}`;
+};
+
+/**
+ * Audit display
+ * @param props Props
+ * @returns Component
+ */
+export function AuditDisplay(props: AuditDisplayProps) {
+    // Theme
+    const theme = useTheme();
+
+    // Label
+    const dataComparisonLabel = getLabel('dataComparison');
+
+    // Show data comparison
+    const showDataComparison = (data: AuditLineUpdateData) => {
+        if (typeof globalApp === 'undefined') return;
+
+        const keys = new Set([
+            ...Object.keys(data.oldData),
+            ...Object.keys(data.newData)
+        ]);
+
+        const rows = Array.from(keys).map((field) => ({
+            field,
+            oldValue: data.oldData[field],
+            newValue: data.newData[field]
+        }));
+
+        const inputs = (
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>{getLabel('field')}</TableCell>
+                        <TableCell align="right">
+                            {getLabel('oldValue')}
+                        </TableCell>
+                        <TableCell align="right">
+                            {getLabel('newValue')}
+                        </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow key={row.field}>
+                            <TableCell>{getLabel(row.field)}</TableCell>
+                            <TableCell align="right">
+                                {formatValue(row.oldValue)}
+                            </TableCell>
+                            <TableCell align="right">
+                                {formatValue(row.newValue)}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        );
+
+        globalApp.notifier.alert(
+            [undefined, dataComparisonLabel],
+            undefined,
+            NotificationMessageType.Info,
+            { fullScreen: globalApp.smDown, inputs }
+        );
+    };
+
+    // 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]
+        }),
+        itemRenderer = (data) => {
+            return (
+                <React.Fragment>
+                    {data.changes != null && (
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            onClick={() => showDataComparison(data.changes!)}
+                            sx={{
+                                marginLeft: theme.spacing(1),
+                                float: 'right'
+                            }}
+                        >
+                            {dataComparisonLabel}
+                        </Button>
+                    )}
+                    <Typography>
+                        {formatDate(data.creation) +
+                            ', [' +
+                            getLabel(data.action) +
+                            '], ' +
+                            data.user}
+                    </Typography>
+                </React.Fragment>
+            );
+        },
+        headerTitle = (
+            <React.Fragment>
+                {getLabel('audits')}
+                <Divider />
+            </React.Fragment>
+        ),
+        ...rest
+    } = props;
+
+    // Layout
+    return (
+        <ListMoreDisplay headerTitle={headerTitle} {...rest}>
+            {(data, index) => (
+                <div key={data.id} style={getItemStyle(index, theme)}>
+                    {itemRenderer(data, index)}
+                </div>
+            )}
+        </ListMoreDisplay>
+    );
+}

package/src/mu/ListMoreDisplay.tsx

@@ -0,0 +1,157 @@
+import {
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    CardProps,
+    CircularProgress
+} from '@mui/material';
+import React from 'react';
+import { globalApp, LoadingButton } from '..';
+import {
+    GridLoadDataProps,
+    GridLoader,
+    GridLoaderStates
+} from '../components/GridLoader';
+
+/**
+ * ListMoreDisplay props
+ */
+export interface ListMoreDisplayProps<T> extends CardProps, GridLoader<T> {
+    /**
+     * Children to display the list
+     */
+    children: (data: T, index: number) => React.ReactNode;
+
+    /**
+     * More button label
+     */
+    moreLabel?: string;
+
+    /**
+     * Header title
+     */
+    headerTitle?: React.ReactNode;
+}
+
+type states<T> = {
+    items?: T[];
+    completed: boolean;
+};
+
+/**
+ * ListMoreDisplay
+ * @param props Props
+ * @returns Component
+ */
+export function ListMoreDisplay<T extends {}>(props: ListMoreDisplayProps<T>) {
+    // Destruct
+    const {
+        autoLoad = true,
+        children,
+        defaultOrderBy,
+        headerTitle,
+        loadBatchSize,
+        loadData,
+        moreLabel = typeof globalApp === 'undefined'
+            ? undefined
+            : globalApp.get('more') + '...',
+        threshold,
+        ...rest
+    } = props;
+
+    // Refs
+    const refs = React.useRef<GridLoaderStates<T>>({
+        autoLoad,
+        currentPage: 0,
+        hasNextPage: true,
+        isNextPageLoading: false,
+        orderBy: defaultOrderBy,
+        batchSize: 10,
+        loadedItems: 0,
+        selectedItems: []
+    });
+    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 () => {
+        // 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 items = await loadData(loadProps);
+        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;
+
+        // Update rows
+        if (states.items == null) setStates({ items, completed: !hasNextPage });
+        else
+            setStates({
+                items: [...states.items, ...items],
+                completed: !hasNextPage
+            });
+    };
+
+    React.useEffect(() => {
+        if (autoLoad) loadDataLocal();
+    }, [autoLoad]);
+
+    React.useEffect(() => {
+        return () => {
+            ref.isMounted = false;
+        };
+    }, []);
+
+    // Loading
+    if (states.items == null) return <CircularProgress size={20} />;
+
+    return (
+        <Card {...rest}>
+            <CardHeader title={headerTitle}></CardHeader>
+            <CardContent
+                sx={{
+                    paddingTop: 0,
+                    paddingBottom: states.completed ? 0 : 'inherit'
+                }}
+            >
+                {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>
+    );
+}