@etsoo/materialui 1.4.98 → 1.5.0

package/lib/cjs/pages/ViewPage.js

@@ -3,251 +3,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewPageSize = void 0;
-exports.ViewPageGridItem = ViewPageGridItem;
 exports.ViewPage = ViewPage;
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("@etsoo/react");
+const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
 const material_1 = require("@mui/material");
-const react_3 = __importDefault(require("react"));
+const react_2 = __importDefault(require("react"));
 const Labels_1 = require("../app/Labels");
-const GridDataFormat_1 = require("../GridDataFormat");
 const MUGlobal_1 = require("../MUGlobal");
 const PullToRefreshUI_1 = require("../PullToRefreshUI");
 const CommonPage_1 = require("./CommonPage");
 const MessageUtils_1 = require("../messages/MessageUtils");
 const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
-const ReactApp_1 = require("../app/ReactApp");
-const useCurrentBreakpoint_1 = require("../useCurrentBreakpoint");
-const breakpoints = ["xs", "sm", "md", "lg", "xl"];
-/**
- * View page grid item size
- */
-var ViewPageSize;
-(function (ViewPageSize) {
-    ViewPageSize.large = {
-        xs: 12,
-        sm: 12,
-        md: 9,
-        lg: 6,
-        xl: 4
-    };
-    ViewPageSize.medium = {
-        xs: 12,
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3
-    };
-    ViewPageSize.line = {
-        xs: 12,
-        sm: 12,
-        md: 12,
-        lg: 12,
-        xl: 12
-    };
-    ViewPageSize.small = { xs: 6, sm: 6, md: 4, lg: 3, xl: 2 };
-    ViewPageSize.smallLine = {
-        xs: 12,
-        sm: 6,
-        md: 4,
-        lg: 3,
-        xl: 2
-    };
-    function matchSize(size) {
-        return Object.fromEntries(Object.entries(size).map(([key, value]) => [
-            key,
-            value == null ? undefined : value === 12 ? 12 : 12 - value
-        ]));
-    }
-    ViewPageSize.matchSize = matchSize;
-})(ViewPageSize || (exports.ViewPageSize = ViewPageSize = {}));
-/**
- * View page grid item
- * @param props Props
- * @returns Result
- */
-function ViewPageGridItem(props) {
-    // Destruct
-    const { data, label, singleRow, ...gridProps } = props;
-    // Default options
-    let options = {};
-    if (gridProps.size == null) {
-        options = getResp(singleRow ?? "small");
-    }
-    else if (singleRow != null) {
-        options = getResp(singleRow ?? "small");
-    }
-    // Layout
-    return ((0, jsx_runtime_1.jsxs)(material_1.Grid2, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: data }))] }));
-}
-function formatItemData(app, fieldData) {
-    if (fieldData == null)
-        return undefined;
-    if (typeof fieldData === "string")
-        return fieldData;
-    if (fieldData instanceof Date)
-        return app.formatDate(fieldData, "d");
-    return `${fieldData}`;
-}
-function getResp(singleRow) {
-    const size = typeof singleRow === "object"
-        ? singleRow
-        : singleRow === "medium"
-            ? ViewPageSize.medium
-            : singleRow === "large"
-                ? ViewPageSize.large
-                : singleRow === true
-                    ? ViewPageSize.line
-                    : singleRow === false
-                        ? ViewPageSize.smallLine
-                        : ViewPageSize.small;
-    return size;
-}
-function getItemField(app, field, data) {
-    // Item data and label
-    let itemData, itemLabel, gridProps = {}, size;
-    if (Array.isArray(field)) {
-        const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
-        itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
-        itemLabel = app.get(fieldData) ?? fieldData;
-        size = getResp(singleRow);
-        gridProps = { size };
-    }
-    else if (typeof field === "object") {
-        // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
-        // Size
-        size = getResp(singleRow);
-        gridProps = {
-            ...rest,
-            size
-        };
-        // Field data
-        if (typeof fieldData === "function")
-            itemData = fieldData(data);
-        else if (dataType == null)
-            itemData = formatItemData(app, data[fieldData]);
-        else
-            itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], dataType, renderProps);
-        // Field label
-        itemLabel =
-            fieldLabel === ""
-                ? undefined
-                : fieldLabel == null && typeof fieldData === "string"
-                    ? app.get(fieldData) ?? fieldData
-                    : typeof fieldLabel === "function"
-                        ? fieldLabel(data)
-                        : fieldLabel != null
-                            ? app.get(fieldLabel) ?? fieldLabel
-                            : undefined;
-    }
-    else {
-        // Single field format
-        itemData = formatItemData(app, data[field]);
-        itemLabel = app.get(field) ?? field;
-        size = ViewPageSize.small;
-        gridProps = { size };
-    }
-    return [itemData, itemLabel, gridProps, size];
-}
-function getItemSize(bp, size) {
-    const v = size[bp];
-    if (v != null)
-        return v;
-    const index = breakpoints.indexOf(bp);
-    for (let i = index; i >= 0; i--) {
-        const v = size[breakpoints[i]];
-        if (v != null)
-            return v;
-    }
-    return 12;
-}
+const ViewContainer_1 = require("../ViewContainer");
 /**
  * View page
  * @param props Props
  */
 function ViewPage(props) {
-    // Global app
-    const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines = 3, leftContainerProps = {}, ...rest } = props;
-    // Current breakpoint
-    const bp = (0, useCurrentBreakpoint_1.useCurrentBreakpoint)();
+    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing, actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines, leftContainerProps, ...rest } = props;
     // Data
-    const [data, setData] = react_3.default.useState();
+    const [data, setData] = react_2.default.useState();
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Container
     const pullContainer = "#page-container";
-    // Left container
-    const { size = ViewPageSize.smallLine, ...leftContainerPropsRest } = leftContainerProps;
     // Load data
-    const refresh = react_3.default.useCallback(async () => {
+    const refresh = react_2.default.useCallback(async () => {
         const result = await loadData();
         // When failed or no data returned, show the loading bar
         setData(result);
     }, [loadData]);
-    // Create fields
-    const fieldIndexRef = react_3.default.useRef(0);
-    const createFields = react_3.default.useCallback((data, maxItems = 0) => {
-        let validItems = 0;
-        const items = [];
-        let i = fieldIndexRef.current;
-        for (; i < fields.length; i++) {
-            const field = fields[i];
-            let oneSize;
-            let oneItem;
-            if (typeof field === "function") {
-                // Most flexible way, do whatever you want
-                const createdResult = field(data, refresh);
-                if (createdResult == null || createdResult === "")
-                    continue;
-                if (Array.isArray(createdResult)) {
-                    const [created, size] = createdResult;
-                    oneSize = size;
-                    oneItem = created;
-                }
-                else {
-                    oneSize = ViewPageSize.line;
-                    oneItem = createdResult;
-                }
-            }
-            else {
-                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
-                // Some callback function may return '' instead of undefined
-                if (itemData == null || itemData === "")
-                    continue;
-                oneSize = size;
-                oneItem = ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
-            }
-            // Max lines
-            if (maxItems > 0) {
-                const itemSize = getItemSize(bp, oneSize);
-                if (maxItems < validItems + itemSize) {
-                    fieldIndexRef.current = i;
-                    break;
-                }
-                else {
-                    items.push(oneItem);
-                    validItems += itemSize;
-                }
-            }
-            else {
-                items.push(oneItem);
-            }
-        }
-        if (maxItems === 0) {
-            fieldIndexRef.current = 0;
-        }
-        else {
-            fieldIndexRef.current = i;
-        }
-        return items;
-    }, [app, refresh, fields, data, bp]);
-    react_3.default.useEffect(() => {
+    react_2.default.useEffect(() => {
         const refreshHandler = async () => {
             await refresh();
         };
@@ -256,19 +44,18 @@ function ViewPage(props) {
             MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    let leftResult;
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, sx: {
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
-        }, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
+        }, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
-                    } })), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {})] })) }));
+                    } })), (0, jsx_runtime_1.jsx)(react_1.ScrollRestoration, {})] })) }));
 }

package/lib/mjs/ErrorAlert.d.ts

@@ -0,0 +1,16 @@
+import { AlertProps } from "@mui/material";
+/**
+ * Error alert props
+ */
+export type ErrorAlertProps = AlertProps & {
+    /**
+     * Message to display
+     */
+    message?: React.ReactNode;
+};
+/**
+ * Error alert component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ErrorAlert(props: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/ErrorAlert.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "@mui/material";
+import { useAppContext } from "./app/ReactApp";
+/**
+ * Error alert component
+ * @param props Props
+ * @returns Component
+ */
+export function ErrorAlert(props) {
+    // Global app
+    const app = useAppContext();
+    // Destruct
+    const { message = app?.get("idError"), ...alertProps } = props;
+    // Layout
+    return (_jsx(Alert, { severity: "error", ...alertProps, children: message }));
+}

package/lib/mjs/ViewContainer.d.ts

@@ -0,0 +1,107 @@
+import { Breakpoint, Grid2Props } from "@mui/material";
+import React from "react";
+import { DataTypes } from "@etsoo/shared";
+import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
+/**
+ * View page item size
+ */
+export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+/**
+ * View page grid item size
+ */
+export declare namespace ViewPageSize {
+    const large: ViewPageItemSize;
+    const medium: ViewPageItemSize;
+    const line: ViewPageItemSize;
+    const small: ViewPageItemSize;
+    const smallLine: ViewPageItemSize;
+    function matchSize(size: ViewPageItemSize): {
+        [k: string]: number | undefined;
+    };
+}
+/**
+ * View page row width type
+ */
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | "large" | ViewPageItemSize;
+/**
+ * View page grid item properties
+ */
+export type ViewPageGridItemProps = Grid2Props & {
+    data: React.ReactNode;
+    label?: React.ReactNode;
+    singleRow?: ViewPageRowType;
+};
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export declare function ViewPageGridItem(props: ViewPageGridItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * View page display field
+ */
+export interface ViewPageField<T extends object> extends Grid2Props {
+    /**
+     * Data field
+     */
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
+    /**
+     * Data type
+     */
+    dataType?: GridDataType;
+    /**
+     * Label field
+     */
+    label?: string | ((item: T) => React.ReactNode);
+    /**
+     * Display as single row
+     */
+    singleRow?: ViewPageRowType;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
+}
+type ViewPageFieldTypeNarrow<T extends object> = (string & keyof T) | [string & keyof T, GridDataType, GridColumnRenderProps?, ViewPageRowType?] | ViewPageField<T>;
+/**
+ * View page field type
+ */
+export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode | [React.ReactNode, ViewPageItemSize]);
+export type ViewContainerProps<T extends DataTypes.StringRecord> = {
+    /**
+     * Data
+     */
+    data: T;
+    /**
+     * Fields to display
+     */
+    fields: ViewPageFieldType<T>[];
+    /**
+     * Grid container reference
+     */
+    gridRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Left container
+     */
+    leftContainer?: (data: T) => React.ReactNode;
+    /**
+     * Left container height in lines
+     */
+    leftContainerLines?: number;
+    /**
+     * Left container properties
+     */
+    leftContainerProps?: Omit<Grid2Props, "size"> & {
+        size?: ViewPageItemSize;
+    };
+    /**
+     * Refresh function
+     */
+    refresh: () => Promise<void>;
+    /**
+     * Grid spacing
+     */
+    spacing?: Record<string, string | number>;
+};
+export declare function ViewContainer<T extends DataTypes.StringRecord>(props: ViewContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/ViewContainer.js

@@ -0,0 +1,222 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Grid2, Typography } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { useCurrentBreakpoint } from "./useCurrentBreakpoint";
+import { GridDataFormat } from "./GridDataFormat";
+import { useRequiredAppContext } from "./app/ReactApp";
+function formatItemData(app, fieldData) {
+    if (fieldData == null)
+        return undefined;
+    if (typeof fieldData === "string")
+        return fieldData;
+    if (fieldData instanceof Date)
+        return app.formatDate(fieldData, "d");
+    return `${fieldData}`;
+}
+function getResp(singleRow) {
+    const size = typeof singleRow === "object"
+        ? singleRow
+        : singleRow === "medium"
+            ? ViewPageSize.medium
+            : singleRow === "large"
+                ? ViewPageSize.large
+                : singleRow === true
+                    ? ViewPageSize.line
+                    : singleRow === false
+                        ? ViewPageSize.smallLine
+                        : ViewPageSize.small;
+    return size;
+}
+function getItemField(app, field, data) {
+    // Item data and label
+    let itemData, itemLabel, gridProps = {}, size;
+    if (Array.isArray(field)) {
+        const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
+        itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
+        itemLabel = app.get(fieldData) ?? fieldData;
+        size = getResp(singleRow);
+        gridProps = { size };
+    }
+    else if (typeof field === "object") {
+        // Destruct
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        // Size
+        size = getResp(singleRow);
+        gridProps = {
+            ...rest,
+            size
+        };
+        // Field data
+        if (typeof fieldData === "function")
+            itemData = fieldData(data);
+        else if (dataType == null)
+            itemData = formatItemData(app, data[fieldData]);
+        else
+            itemData = GridDataFormat(data[fieldData], dataType, renderProps);
+        // Field label
+        itemLabel =
+            fieldLabel === ""
+                ? undefined
+                : fieldLabel == null && typeof fieldData === "string"
+                    ? app.get(fieldData) ?? fieldData
+                    : typeof fieldLabel === "function"
+                        ? fieldLabel(data)
+                        : fieldLabel != null
+                            ? app.get(fieldLabel) ?? fieldLabel
+                            : undefined;
+    }
+    else {
+        // Single field format
+        itemData = formatItemData(app, data[field]);
+        itemLabel = app.get(field) ?? field;
+        size = ViewPageSize.small;
+        gridProps = { size };
+    }
+    return [itemData, itemLabel, gridProps, size];
+}
+function getItemSize(bp, size) {
+    const v = size[bp];
+    if (v != null)
+        return v;
+    const index = breakpoints.indexOf(bp);
+    for (let i = index; i >= 0; i--) {
+        const v = size[breakpoints[i]];
+        if (v != null)
+            return v;
+    }
+    return 12;
+}
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+/**
+ * View page grid item size
+ */
+export var ViewPageSize;
+(function (ViewPageSize) {
+    ViewPageSize.large = {
+        xs: 12,
+        sm: 12,
+        md: 9,
+        lg: 6,
+        xl: 4
+    };
+    ViewPageSize.medium = {
+        xs: 12,
+        sm: 12,
+        md: 6,
+        lg: 4,
+        xl: 3
+    };
+    ViewPageSize.line = {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 12
+    };
+    ViewPageSize.small = { xs: 6, sm: 6, md: 4, lg: 3, xl: 2 };
+    ViewPageSize.smallLine = {
+        xs: 12,
+        sm: 6,
+        md: 4,
+        lg: 3,
+        xl: 2
+    };
+    function matchSize(size) {
+        return Object.fromEntries(Object.entries(size).map(([key, value]) => [
+            key,
+            value == null ? undefined : value === 12 ? 12 : 12 - value
+        ]));
+    }
+    ViewPageSize.matchSize = matchSize;
+})(ViewPageSize || (ViewPageSize = {}));
+/**
+ * View page grid item
+ * @param props Props
+ * @returns Result
+ */
+export function ViewPageGridItem(props) {
+    // Destruct
+    const { data, label, singleRow, ...gridProps } = props;
+    // Default options
+    let options = {};
+    if (gridProps.size == null) {
+        options = getResp(singleRow ?? "small");
+    }
+    else if (singleRow != null) {
+        options = getResp(singleRow ?? "small");
+    }
+    // Layout
+    return (_jsxs(Grid2, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+}
+export function ViewContainer(props) {
+    // Global app
+    const app = useRequiredAppContext();
+    // Destruct
+    const { data, fields, gridRef, leftContainer, leftContainerLines = 3, leftContainerProps = {}, refresh, spacing = MUGlobal.half(MUGlobal.pagePaddings), ...rest } = props;
+    // Left container
+    const { size = ViewPageSize.smallLine, ...leftContainerPropsRest } = leftContainerProps;
+    // Current breakpoint
+    const bp = useCurrentBreakpoint();
+    // Create fields
+    const fieldIndexRef = React.useRef(0);
+    const createFields = React.useCallback((data, maxItems = 0) => {
+        let validItems = 0;
+        const items = [];
+        let i = fieldIndexRef.current;
+        for (; i < fields.length; i++) {
+            const field = fields[i];
+            let oneSize;
+            let oneItem;
+            if (typeof field === "function") {
+                // Most flexible way, do whatever you want
+                const createdResult = field(data, refresh);
+                if (createdResult == null || createdResult === "")
+                    continue;
+                if (Array.isArray(createdResult)) {
+                    const [created, size] = createdResult;
+                    oneSize = size;
+                    oneItem = created;
+                }
+                else {
+                    oneSize = ViewPageSize.line;
+                    oneItem = createdResult;
+                }
+            }
+            else {
+                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
+                // Some callback function may return '' instead of undefined
+                if (itemData == null || itemData === "")
+                    continue;
+                oneSize = size;
+                oneItem = (_createElement(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
+            }
+            // Max lines
+            if (maxItems > 0) {
+                const itemSize = getItemSize(bp, oneSize);
+                if (maxItems < validItems + itemSize) {
+                    fieldIndexRef.current = i;
+                    break;
+                }
+                else {
+                    items.push(oneItem);
+                    validItems += itemSize;
+                }
+            }
+            else {
+                items.push(oneItem);
+            }
+        }
+        if (maxItems === 0) {
+            fieldIndexRef.current = 0;
+        }
+        else {
+            fieldIndexRef.current = i;
+        }
+        return items;
+    }, [app, fields, data, bp]);
+    let leftResult;
+    // Layout
+    return (_jsxs(Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && (_jsxs(React.Fragment, { children: [_jsx(Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), _jsx(Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
+}

package/lib/mjs/index.d.ts

@@ -53,6 +53,7 @@ export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
+export * from "./ErrorAlert";
 export * from "./FabBox";
 export * from "./FieldSetEx";
 export * from "./FileUploadButton";
@@ -116,3 +117,4 @@ export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
+export * from "./ViewContainer";

package/lib/mjs/index.js

@@ -53,6 +53,7 @@ export * from "./DialogButton";
 export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
+export * from "./ErrorAlert";
 export * from "./FabBox";
 export * from "./FieldSetEx";
 export * from "./FileUploadButton";
@@ -116,3 +117,4 @@ export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
+export * from "./ViewContainer";