@etsoo/react 1.4.77 → 1.4.81

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,77 @@
+import { Utils } from '@etsoo/shared';
+import { Button, Table, TableBody, TableCell, TableHead, TableRow, 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();
+    // 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, undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
+    };
+    // Destruct
+    const { getItemStyle = (index, theme) => ({
+        padding: theme.spacing(1),
+        background: index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+    }), itemRenderer = (data) => {
+        return (React.createElement(React.Fragment, null,
+            formatDate(data.creation) +
+                ', [' +
+                getLabel(data.action) +
+                '], ' +
+                data.user,
+            data.changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => showDataComparison(data.changes), sx: { marginLeft: theme.spacing(1) } }, getLabel('dataComparison')))));
+    }, ...rest } = props;
+    // Layout
+    return (React.createElement(ListMoreDisplay, { ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));
+}

package/lib/mu/ComboBox.js

@@ -2,6 +2,7 @@ import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
+import { Utils as SharedUtils } from '@etsoo/shared';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
 /**
@@ -81,6 +82,9 @@ export function ComboBox(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
+                if (search) {
+                    SharedUtils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }

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/lib/mu/SelectBool.js

@@ -1,3 +1,4 @@
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx } from './SelectEx';
@@ -15,7 +16,7 @@ export function SelectBool(props) {
         { id: 'true', label: globalApp.get('yes') }
     ];
     if (search)
-        options.unshift({ id: '', label: '---' });
+        Utils.addBlankItem(options);
     // Layout
     return React.createElement(SelectEx, { options: options, search: search, ...rest });
 }

package/lib/mu/SelectEx.js

@@ -3,6 +3,7 @@ import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInpu
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
+import { Utils } from '@etsoo/shared';
 /**
  * Extended select component
  * @param props Props
@@ -68,6 +69,16 @@ export function SelectEx(props) {
             }
         }
     };
+    // Get option id
+    const getId = (option) => {
+        return Reflect.get(option, idField);
+    };
+    // Get option label
+    const getLabel = (option) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
     // Refs
     const divRef = React.useRef();
     // When layout ready
@@ -86,6 +97,9 @@ export function SelectEx(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
+                if (search) {
+                    Utils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }
@@ -107,18 +121,19 @@ export function SelectEx(props) {
             }, renderValue: (selected) => {
                 // The text shows up
                 return localOptions
-                    .filter((option) => Array.isArray(selected)
-                    ? selected.indexOf(option.id) !== -1
-                    : selected === option.id)
-                    .map((option) => option.label)
+                    .filter((option) => {
+                    const id = getId(option);
+                    return Array.isArray(selected)
+                        ? selected.indexOf(id) !== -1
+                        : selected === id;
+                })
+                    .map((option) => getLabel(option))
                     .join(', ');
             }, sx: { minWidth: '150px' }, ...rest }, localOptions.map((option) => {
             // Option id
-            const id = option[idField];
+            const id = getId(option);
             // Option label
-            const label = typeof labelField === 'function'
-                ? labelField(option)
-                : option[labelField];
+            const label = getLabel(option);
             // Option
             return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
                     if (onItemClick) {

package/lib/mu/pages/ViewPage.d.ts

@@ -35,11 +35,11 @@ export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'c
     /**
      * Actions
      */
-    actions?: React.ReactNode | ((data: T) => React.ReactNode);
+    actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
     /**
      * Children
      */
-    children?: React.ReactNode | ((data: T) => React.ReactNode);
+    children?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
     /**
      * Fields to display
      */

package/lib/mu/pages/ViewPage.js

@@ -63,13 +63,13 @@ export function ViewPage(props) {
     // Data
     const [data, setData] = React.useState();
     // Load data
-    const onRefresh = async () => {
+    const refresh = async () => {
         const result = await loadData();
         if (result == null)
             return;
         setData(result);
     };
-    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? onRefresh : undefined, onUpdate: supportRefresh ? undefined : onRefresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
+    return (React.createElement(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: global }, data == null ? (React.createElement(LinearProgress, null)) : (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, className: "ET-ViewPage", sx: {
                 '.MuiTypography-subtitle2': {
                     fontWeight: 'bold'
@@ -77,7 +77,8 @@ export function ViewPage(props) {
             } }, fields.map((field, index) => {
             // Get data
             const [itemData, itemLabel, gridProps] = getItemField(field, data);
-            if (itemData == null)
+            // Some callback function may return '' instead of undefined
+            if (itemData == null || itemData === '')
                 return undefined;
             // Layout
             return (React.createElement(Grid, { item: true, ...gridProps, key: index },
@@ -86,6 +87,6 @@ export function ViewPage(props) {
                     ":"),
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
-        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
-        Utils.getResult(children, data)))));
+        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data, refresh))),
+        Utils.getResult(children, data, refresh)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.77",
+    "version": "1.4.81",
     "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.28",
+        "@etsoo/appscript": "^1.2.31",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.6",
+        "@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,9 +83,9 @@
         "@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",
-        "eslint": "^8.7.0",
+        "@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",
         "eslint-plugin-react": "^7.28.0",

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,176 @@
+import { Utils } from '@etsoo/shared';
+import { HelpOutline } from '@mui/icons-material';
+import {
+    Button,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Theme,
+    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();
+
+    // 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,
+            undefined,
+            NotificationMessageType.Info,
+            { fullScreen: globalApp.smDown, inputs }
+        );
+    };
+
+    // Destruct
+    const {
+        getItemStyle = (index, theme) => ({
+            padding: theme.spacing(1),
+            background:
+                index % 2 === 0
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[50]
+        }),
+        itemRenderer = (data) => {
+            return (
+                <React.Fragment>
+                    {formatDate(data.creation) +
+                        ', [' +
+                        getLabel(data.action) +
+                        '], ' +
+                        data.user}
+                    {data.changes != null && (
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            onClick={() => showDataComparison(data.changes!)}
+                            sx={{ marginLeft: theme.spacing(1) }}
+                        >
+                            {getLabel('dataComparison')}
+                        </Button>
+                    )}
+                </React.Fragment>
+            );
+        },
+        ...rest
+    } = props;
+
+    // Layout
+    return (
+        <ListMoreDisplay {...rest}>
+            {(data, index) => (
+                <div key={data.id} style={getItemStyle(index, theme)}>
+                    {itemRenderer(data, index)}
+                </div>
+            )}
+        </ListMoreDisplay>
+    );
+}

package/src/mu/ComboBox.tsx

@@ -3,6 +3,7 @@ import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
+import { Utils as SharedUtils } from '@etsoo/shared';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
@@ -155,6 +156,9 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
+                if (search) {
+                    SharedUtils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }

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

package/src/mu/SelectBool.tsx

@@ -1,4 +1,5 @@
 import { IdLabelDto } from '@etsoo/appscript';
+import { Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx, SelectExProps } from './SelectEx';
@@ -24,7 +25,7 @@ export function SelectBool(props: SelectBoolProps) {
         { id: 'true', label: globalApp.get('yes')! }
     ];
 
-    if (search) options.unshift({ id: '', label: '---' });
+    if (search) Utils.addBlankItem(options);
 
     // Layout
     return <SelectEx options={options} search={search} {...rest} />;

package/src/mu/SelectEx.tsx

@@ -14,6 +14,7 @@ import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
+import { Utils } from '@etsoo/shared';
 
 /**
  * Extended select component props
@@ -143,6 +144,18 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
         }
     };
 
+    // Get option id
+    const getId = (option: T) => {
+        return Reflect.get(option, idField);
+    };
+
+    // Get option label
+    const getLabel = (option: T) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : Reflect.get(option, labelField);
+    };
+
     // Refs
     const divRef = React.useRef<HTMLDivElement>();
 
@@ -159,6 +172,9 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
+                if (search) {
+                    Utils.addBlankItem(result, idField, labelField);
+                }
                 setOptions(result);
             });
         }
@@ -198,26 +214,24 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
                 renderValue={(selected) => {
                     // The text shows up
                     return localOptions
-                        .filter((option: any) =>
-                            Array.isArray(selected)
-                                ? selected.indexOf(option.id) !== -1
-                                : selected === option.id
-                        )
-                        .map((option: any) => option.label)
+                        .filter((option) => {
+                            const id = getId(option);
+                            return Array.isArray(selected)
+                                ? selected.indexOf(id) !== -1
+                                : selected === id;
+                        })
+                        .map((option) => getLabel(option))
                         .join(', ');
                 }}
                 sx={{ minWidth: '150px' }}
                 {...rest}
             >
-                {localOptions.map((option: any) => {
+                {localOptions.map((option) => {
                     // Option id
-                    const id = option[idField];
+                    const id = getId(option);
 
                     // Option label
-                    const label =
-                        typeof labelField === 'function'
-                            ? labelField(option)
-                            : option[labelField];
+                    const label = getLabel(option);
 
                     // Option
                     return (

package/src/mu/pages/ViewPage.tsx

@@ -60,12 +60,16 @@ export interface ViewPageProps<T extends {}>
     /**
      * Actions
      */
-    actions?: React.ReactNode | ((data: T) => React.ReactNode);
+    actions?:
+        | React.ReactNode
+        | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
 
     /**
      * Children
      */
-    children?: React.ReactNode | ((data: T) => React.ReactNode);
+    children?:
+        | React.ReactNode
+        | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
 
     /**
      * Fields to display
@@ -164,7 +168,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     const [data, setData] = React.useState<T>();
 
     // Load data
-    const onRefresh = async () => {
+    const refresh = async () => {
         const result = await loadData();
         if (result == null) return;
         setData(result);
@@ -173,8 +177,8 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
     return (
         <CommonPage
             paddings={paddings}
-            onRefresh={supportRefresh ? onRefresh : undefined}
-            onUpdate={supportRefresh ? undefined : onRefresh}
+            onRefresh={supportRefresh ? refresh : undefined}
+            onUpdate={supportRefresh ? undefined : refresh}
             {...rest}
             scrollContainer={global}
         >
@@ -198,7 +202,9 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             const [itemData, itemLabel, gridProps] =
                                 getItemField(field, data);
 
-                            if (itemData == null) return undefined;
+                            // Some callback function may return '' instead of undefined
+                            if (itemData == null || itemData === '')
+                                return undefined;
 
                             // Layout
                             return (
@@ -227,10 +233,10 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             paddingBottom={paddings}
                             gap={paddings}
                         >
-                            {Utils.getResult(actions, data)}
+                            {Utils.getResult(actions, data, refresh)}
                         </Stack>
                     )}
-                    {Utils.getResult(children, data)}
+                    {Utils.getResult(children, data, refresh)}
                 </React.Fragment>
             )}
         </CommonPage>