@etsoo/materialui 1.4.90 → 1.4.92

package/lib/cjs/index.d.ts

@@ -112,6 +112,7 @@ export * from "./TiplistPro";
 export * from "./TagList";
 export * from "./TagListPro";
 export * from "./TwoFieldInput";
+export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";

package/lib/cjs/index.js

@@ -128,6 +128,7 @@ __exportStar(require("./TiplistPro"), exports);
 __exportStar(require("./TagList"), exports);
 __exportStar(require("./TagListPro"), exports);
 __exportStar(require("./TwoFieldInput"), exports);
+__exportStar(require("./useCurrentBreakpoint"), exports);
 __exportStar(require("./TooltipClick"), exports);
 __exportStar(require("./UserAvatar"), exports);
 __exportStar(require("./UserAvatarEditor"), exports);

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

@@ -1,9 +1,25 @@
 import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
-import { Grid2Props } from "@mui/material";
+import { Breakpoint, Grid2Props } from "@mui/material";
 import React from "react";
 import { CommonPageProps } from "./CommonPage";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
+/**
+ * View page item size
+ */
+export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+/**
+ * View page grid item size
+ */
+export declare namespace ViewPageSize {
+    const medium: ViewPageItemSize;
+    const line: ViewPageItemSize;
+    const small: ViewPageItemSize;
+    const smallLine: ViewPageItemSize;
+    function matchSize(size: ViewPageItemSize): {
+        [k: string]: number | undefined;
+    };
+}
 /**
  * View page grid item properties
  */
@@ -21,7 +37,7 @@ export declare function ViewPageGridItem(props: ViewPageGridItemProps): import("
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | ViewPageItemSize;
 /**
  * View page display field
  */
@@ -51,7 +67,7 @@ type ViewPageFieldTypeNarrow<T extends object> = (string & keyof T) | [string &
 /**
  * View page field type
  */
-export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode);
+export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode | [React.ReactNode, ViewPageItemSize]);
 /**
  * View page props
  */
@@ -95,6 +111,26 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
         id: number;
         types: string[];
     };
+    /**
+     * Title bar
+     * @param data Data to render
+     * @returns
+     */
+    titleBar?: (data: T) => React.ReactNode;
+    /**
+     * Left container
+     */
+    leftContainer?: (data: T) => React.ReactNode;
+    /**
+     * Left container height in lines
+     */
+    leftContainerLines?: number;
+    /**
+     * Left container properties
+     */
+    leftContainerProps?: Omit<Grid2Props, "size"> & {
+        size?: ViewPageItemSize;
+    };
 }
 /**
  * View page

package/lib/cjs/pages/ViewPage.js

@@ -3,6 +3,7 @@ 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");
@@ -19,6 +20,43 @@ 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.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
@@ -51,33 +89,32 @@ function getResp(singleRow) {
     const size = typeof singleRow === "object"
         ? singleRow
         : singleRow === "medium"
-            ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+            ? ViewPageSize.medium
             : singleRow === true
-                ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
-                : {
-                    xs: singleRow === false ? 12 : 6,
-                    sm: 6,
-                    md: 4,
-                    lg: 3,
-                    xl: 2
-                };
-    return { size };
+                ? ViewPageSize.line
+                : singleRow === false
+                    ? ViewPageSize.smallLine
+                    : ViewPageSize.small;
+    return size;
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {};
+    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;
-        gridProps = { ...getResp(singleRow) };
+        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,
-            ...getResp(singleRow)
+            size
         };
         // Field data
         if (typeof fieldData === "function")
@@ -102,8 +139,22 @@ function getItemField(app, field, data) {
         // 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 [itemData, itemLabel, gridProps];
+    return 12;
 }
 /**
  * View page
@@ -113,19 +164,80 @@ 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), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(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)();
     // Data
     const [data, setData] = react_3.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 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(() => {
         const refreshHandler = async () => {
             await refresh();
@@ -135,29 +247,18 @@ function ViewPage(props) {
             MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...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
+    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
                         ? [
                             operationMessageHandler.types,
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
-                        ".MuiTypography-subtitle2": {
-                            fontWeight: "bold"
-                        }
-                    }, children: fields.map((field, index) => {
-                        // Get data
-                        if (typeof field === "function") {
-                            // Most flexible way, do whatever you want
-                            return field(data, refresh);
-                        }
-                        const [itemData, itemLabel, gridProps] = getItemField(app, field, data);
-                        // Some callback function may return '' instead of undefined
-                        if (itemData == null || itemData === "")
-                            return undefined;
-                        // Layout
-                        return ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: index, data: itemData, label: itemLabel }));
-                    }) }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, 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.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: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, 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, {})] })) }));

package/lib/cjs/useCurrentBreakpoint.d.ts

@@ -0,0 +1,6 @@
+import { Breakpoint } from "@mui/material";
+/**
+ * Hook to get the current breakpoint
+ * @returns The current breakpoint
+ */
+export declare function useCurrentBreakpoint(): Breakpoint;

package/lib/cjs/useCurrentBreakpoint.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentBreakpoint = useCurrentBreakpoint;
+const material_1 = require("@mui/material");
+/**
+ * Hook to get the current breakpoint
+ * @returns The current breakpoint
+ */
+function useCurrentBreakpoint() {
+    const theme = (0, material_1.useTheme)();
+    const items = [
+        (0, material_1.useMediaQuery)(theme.breakpoints.down("xs")) ? "xs" : null,
+        (0, material_1.useMediaQuery)(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
+        (0, material_1.useMediaQuery)(theme.breakpoints.between("sm", "md")) ? "md" : null,
+        (0, material_1.useMediaQuery)(theme.breakpoints.between("md", "lg")) ? "lg" : null,
+        (0, material_1.useMediaQuery)(theme.breakpoints.up("lg")) ? "xl" : null
+    ];
+    return items.find((item) => item != null) ?? "lg";
+}

package/lib/mjs/index.d.ts

@@ -112,6 +112,7 @@ export * from "./TiplistPro";
 export * from "./TagList";
 export * from "./TagListPro";
 export * from "./TwoFieldInput";
+export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";

package/lib/mjs/index.js

@@ -112,6 +112,7 @@ export * from "./TiplistPro";
 export * from "./TagList";
 export * from "./TagListPro";
 export * from "./TwoFieldInput";
+export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";

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

@@ -1,9 +1,25 @@
 import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
-import { Grid2Props } from "@mui/material";
+import { Breakpoint, Grid2Props } from "@mui/material";
 import React from "react";
 import { CommonPageProps } from "./CommonPage";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
+/**
+ * View page item size
+ */
+export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+/**
+ * View page grid item size
+ */
+export declare namespace ViewPageSize {
+    const medium: ViewPageItemSize;
+    const line: ViewPageItemSize;
+    const small: ViewPageItemSize;
+    const smallLine: ViewPageItemSize;
+    function matchSize(size: ViewPageItemSize): {
+        [k: string]: number | undefined;
+    };
+}
 /**
  * View page grid item properties
  */
@@ -21,7 +37,7 @@ export declare function ViewPageGridItem(props: ViewPageGridItemProps): import("
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
+export type ViewPageRowType = boolean | "default" | "small" | "medium" | ViewPageItemSize;
 /**
  * View page display field
  */
@@ -51,7 +67,7 @@ type ViewPageFieldTypeNarrow<T extends object> = (string & keyof T) | [string &
 /**
  * View page field type
  */
-export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode);
+export type ViewPageFieldType<T extends object> = ViewPageFieldTypeNarrow<T> | ((data: T, refresh: () => Promise<void>) => React.ReactNode | [React.ReactNode, ViewPageItemSize]);
 /**
  * View page props
  */
@@ -95,6 +111,26 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
         id: number;
         types: string[];
     };
+    /**
+     * Title bar
+     * @param data Data to render
+     * @returns
+     */
+    titleBar?: (data: T) => React.ReactNode;
+    /**
+     * Left container
+     */
+    leftContainer?: (data: T) => React.ReactNode;
+    /**
+     * Left container height in lines
+     */
+    leftContainerLines?: number;
+    /**
+     * Left container properties
+     */
+    leftContainerProps?: Omit<Grid2Props, "size"> & {
+        size?: ViewPageItemSize;
+    };
 }
 /**
  * View page

package/lib/mjs/pages/ViewPage.js

@@ -12,6 +12,43 @@ import { CommonPage } from "./CommonPage";
 import { MessageUtils } from "../messages/MessageUtils";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 import { useRequiredAppContext } from "../app/ReactApp";
+import { useCurrentBreakpoint } from "../useCurrentBreakpoint";
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+/**
+ * View page grid item size
+ */
+export var ViewPageSize;
+(function (ViewPageSize) {
+    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
@@ -44,33 +81,32 @@ function getResp(singleRow) {
     const size = typeof singleRow === "object"
         ? singleRow
         : singleRow === "medium"
-            ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+            ? ViewPageSize.medium
             : singleRow === true
-                ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
-                : {
-                    xs: singleRow === false ? 12 : 6,
-                    sm: 6,
-                    md: 4,
-                    lg: 3,
-                    xl: 2
-                };
-    return { size };
+                ? ViewPageSize.line
+                : singleRow === false
+                    ? ViewPageSize.smallLine
+                    : ViewPageSize.small;
+    return size;
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {};
+    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;
-        gridProps = { ...getResp(singleRow) };
+        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,
-            ...getResp(singleRow)
+            size
         };
         // Field data
         if (typeof fieldData === "function")
@@ -95,8 +131,22 @@ function getItemField(app, field, data) {
         // 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 [itemData, itemLabel, gridProps];
+    return 12;
 }
 /**
  * View page
@@ -106,19 +156,80 @@ export function ViewPage(props) {
     // Global app
     const app = useRequiredAppContext();
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(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 = useCurrentBreakpoint();
     // Data
     const [data, setData] = React.useState();
     // Labels
     const labels = Labels.CommonPage;
     // Container
     const pullContainer = "#page-container";
+    // Left container
+    const { size = ViewPageSize.smallLine, ...leftContainerPropsRest } = leftContainerProps;
     // Load data
     const refresh = React.useCallback(async () => {
         const result = await loadData();
         // When failed or no data returned, show the loading bar
         setData(result);
     }, [loadData]);
+    // 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, refresh, fields, data, bp]);
     React.useEffect(() => {
         const refreshHandler = async () => {
             await refresh();
@@ -128,29 +239,18 @@ export function ViewPage(props) {
             MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    return (_jsx(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
+    let leftResult;
+    return (_jsx(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 ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), _jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, className: "ET-ViewPage", ref: gridRef, sx: {
-                        ".MuiTypography-subtitle2": {
-                            fontWeight: "bold"
-                        }
-                    }, children: fields.map((field, index) => {
-                        // Get data
-                        if (typeof field === "function") {
-                            // Most flexible way, do whatever you want
-                            return field(data, refresh);
-                        }
-                        const [itemData, itemLabel, gridProps] = getItemField(app, field, data);
-                        // Some callback function may return '' instead of undefined
-                        if (itemData == null || itemData === "")
-                            return undefined;
-                        // Layout
-                        return (_createElement(ViewPageGridItem, { ...gridProps, key: index, data: itemData, label: itemLabel }));
-                    }) }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        : operationMessageHandler })), titleBar && titleBar(data), _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)] }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(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;
                     } })), _jsx(ScrollRestoration, {})] })) }));

package/lib/mjs/useCurrentBreakpoint.d.ts

@@ -0,0 +1,6 @@
+import { Breakpoint } from "@mui/material";
+/**
+ * Hook to get the current breakpoint
+ * @returns The current breakpoint
+ */
+export declare function useCurrentBreakpoint(): Breakpoint;

package/lib/mjs/useCurrentBreakpoint.js

@@ -0,0 +1,16 @@
+import { useMediaQuery, useTheme } from "@mui/material";
+/**
+ * Hook to get the current breakpoint
+ * @returns The current breakpoint
+ */
+export function useCurrentBreakpoint() {
+    const theme = useTheme();
+    const items = [
+        useMediaQuery(theme.breakpoints.down("xs")) ? "xs" : null,
+        useMediaQuery(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
+        useMediaQuery(theme.breakpoints.between("sm", "md")) ? "md" : null,
+        useMediaQuery(theme.breakpoints.between("md", "lg")) ? "lg" : null,
+        useMediaQuery(theme.breakpoints.up("lg")) ? "xl" : null
+    ];
+    return items.find((item) => item != null) ?? "lg";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.90",
+  "version": "1.4.92",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/app/ReactApp.ts

@@ -28,7 +28,6 @@ import {
   NotificationReactCallProps,
   UserAction,
   UserActionType,
-  UserCalls,
   useRequiredContext,
   UserState
 } from "@etsoo/react";

package/src/index.ts

@@ -117,6 +117,7 @@ export * from "./TiplistPro";
 export * from "./TagList";
 export * from "./TagListPro";
 export * from "./TwoFieldInput";
+export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";

package/src/pages/ViewPage.tsx

@@ -5,6 +5,7 @@ import {
 } from "@etsoo/react";
 import { DataTypes, Utils } from "@etsoo/shared";
 import {
+  Breakpoint,
   Grid2,
   Grid2Props,
   LinearProgress,
@@ -22,6 +23,50 @@ import { MessageUtils } from "../messages/MessageUtils";
 import type { RefreshHandler } from "../messages/RefreshHandler";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 import { ReactAppType, useRequiredAppContext } from "../app/ReactApp";
+import { useCurrentBreakpoint } from "../useCurrentBreakpoint";
+
+/**
+ * View page item size
+ */
+export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+
+const breakpoints: Breakpoint[] = ["xs", "sm", "md", "lg", "xl"];
+
+/**
+ * View page grid item size
+ */
+export namespace ViewPageSize {
+  export const medium: ViewPageItemSize = {
+    xs: 12,
+    sm: 12,
+    md: 6,
+    lg: 4,
+    xl: 3
+  };
+  export const line: ViewPageItemSize = {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12
+  };
+  export const small: ViewPageItemSize = { xs: 6, sm: 6, md: 4, lg: 3, xl: 2 };
+  export const smallLine: ViewPageItemSize = {
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2
+  };
+  export function matchSize(size: ViewPageItemSize) {
+    return Object.fromEntries(
+      Object.entries(size).map(([key, value]) => [
+        key,
+        value == null ? undefined : value === 12 ? 12 : 12 - value
+      ])
+    );
+  }
+}
 
 /**
  * View page grid item properties
@@ -69,7 +114,12 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
 /**
  * View page row width type
  */
-export type ViewPageRowType = boolean | "default" | "small" | "medium" | object;
+export type ViewPageRowType =
+  | boolean
+  | "default"
+  | "small"
+  | "medium"
+  | ViewPageItemSize;
 
 /**
  * View page display field
@@ -111,7 +161,10 @@ type ViewPageFieldTypeNarrow<T extends object> =
  */
 export type ViewPageFieldType<T extends object> =
   | ViewPageFieldTypeNarrow<T>
-  | ((data: T, refresh: () => Promise<void>) => React.ReactNode);
+  | ((
+      data: T,
+      refresh: () => Promise<void>
+    ) => React.ReactNode | [React.ReactNode, ViewPageItemSize]);
 
 /**
  * View page props
@@ -168,6 +221,28 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
   operationMessageHandler?:
     | OperationMessageHandlerAll
     | { id: number; types: string[] };
+
+  /**
+   * Title bar
+   * @param data Data to render
+   * @returns
+   */
+  titleBar?: (data: T) => React.ReactNode;
+
+  /**
+   * Left container
+   */
+  leftContainer?: (data: T) => React.ReactNode;
+
+  /**
+   * Left container height in lines
+   */
+  leftContainerLines?: number;
+
+  /**
+   * Left container properties
+   */
+  leftContainerProps?: Omit<Grid2Props, "size"> & { size?: ViewPageItemSize };
 }
 
 function formatItemData(
@@ -185,34 +260,32 @@ function getResp(singleRow: ViewPageRowType) {
     typeof singleRow === "object"
       ? singleRow
       : singleRow === "medium"
-      ? { xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }
+      ? ViewPageSize.medium
       : singleRow === true
-      ? { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
-      : {
-          xs: singleRow === false ? 12 : 6,
-          sm: 6,
-          md: 4,
-          lg: 3,
-          xl: 2
-        };
-  return { size };
+      ? ViewPageSize.line
+      : singleRow === false
+      ? ViewPageSize.smallLine
+      : ViewPageSize.small;
+  return size;
 }
 
 function getItemField<T extends object>(
   app: ReactAppType,
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, Grid2Props] {
+): [React.ReactNode, React.ReactNode, Grid2Props, ViewPageItemSize] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
-    gridProps: Grid2Props = {};
+    gridProps: Grid2Props = {},
+    size: ViewPageItemSize;
 
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
     itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
     itemLabel = app.get<string>(fieldData) ?? fieldData;
-    gridProps = { ...getResp(singleRow) };
+    size = getResp(singleRow);
+    gridProps = { size };
   } else if (typeof field === "object") {
     // Destruct
     const {
@@ -224,9 +297,12 @@ function getItemField<T extends object>(
       ...rest
     } = field;
 
+    // Size
+    size = getResp(singleRow);
+
     gridProps = {
       ...rest,
-      ...getResp(singleRow)
+      size
     };
 
     // Field data
@@ -249,9 +325,24 @@ function getItemField<T extends object>(
     // Single field format
     itemData = formatItemData(app, data[field]);
     itemLabel = app.get<string>(field) ?? field;
+    size = ViewPageSize.small;
+    gridProps = { size };
+  }
+
+  return [itemData, itemLabel, gridProps, size];
+}
+
+function getItemSize(bp: Breakpoint, size: ViewPageItemSize) {
+  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 [itemData, itemLabel, gridProps];
+  return 12;
 }
 
 /**
@@ -279,9 +370,16 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     pullToRefresh = true,
     gridRef,
     operationMessageHandler,
+    titleBar,
+    leftContainer,
+    leftContainerLines = 3,
+    leftContainerProps = {},
     ...rest
   } = props;
 
+  // Current breakpoint
+  const bp = useCurrentBreakpoint();
+
   // Data
   const [data, setData] = React.useState<T>();
 
@@ -291,6 +389,10 @@ export function ViewPage<T extends DataTypes.StringRecord>(
   // Container
   const pullContainer = "#page-container";
 
+  // Left container
+  const { size = ViewPageSize.smallLine, ...leftContainerPropsRest } =
+    leftContainerProps;
+
   // Load data
   const refresh = React.useCallback(async () => {
     const result = await loadData();
@@ -298,6 +400,76 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     setData(result);
   }, [loadData]);
 
+  // Create fields
+  const fieldIndexRef = React.useRef(0);
+  const createFields = React.useCallback(
+    (data: T, maxItems: number = 0) => {
+      let validItems = 0;
+      const items: React.ReactNode[] = [];
+      let i: number = fieldIndexRef.current;
+      for (; i < fields.length; i++) {
+        const field = fields[i];
+        let oneSize: ViewPageItemSize;
+        let oneItem: React.ReactNode;
+        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 = (
+            <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.useEffect(() => {
     const refreshHandler: RefreshHandler = async () => {
       await refresh();
@@ -309,11 +481,18 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     };
   }, [refresh]);
 
+  let leftResult: React.ReactNode;
+
   return (
     <CommonPage
       paddings={paddings}
       onRefresh={supportRefresh ? refresh : undefined}
       onUpdate={supportRefresh ? undefined : refresh}
+      sx={{
+        ".MuiTypography-subtitle2": {
+          fontWeight: "bold"
+        }
+      }}
       {...rest}
       scrollContainer={globalThis}
       fabColumnDirection={fabColumnDirection}
@@ -337,44 +516,39 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               }
             />
           )}
+          {titleBar && titleBar(data)}
           <Grid2
             container
             justifyContent="left"
-            spacing={spacing}
             className="ET-ViewPage"
             ref={gridRef}
-            sx={{
-              ".MuiTypography-subtitle2": {
-                fontWeight: "bold"
-              }
-            }}
+            spacing={spacing}
           >
-            {fields.map((field, index) => {
-              // Get data
-              if (typeof field === "function") {
-                // Most flexible way, do whatever you want
-                return field(data, refresh);
-              }
-
-              const [itemData, itemLabel, gridProps] = getItemField(
-                app,
-                field,
-                data
-              );
-
-              // Some callback function may return '' instead of undefined
-              if (itemData == null || itemData === "") return undefined;
-
-              // Layout
-              return (
-                <ViewPageGridItem
-                  {...gridProps}
-                  key={index}
-                  data={itemData}
-                  label={itemLabel}
-                />
-              );
-            })}
+            {leftContainer && (leftResult = leftContainer(data)) != null && (
+              <React.Fragment>
+                <Grid2
+                  container
+                  className="ET-ViewPage-LeftContainer"
+                  spacing={spacing}
+                  size={size}
+                  {...leftContainerPropsRest}
+                >
+                  {leftResult}
+                </Grid2>
+                <Grid2
+                  container
+                  className="ET-ViewPage-LeftOthers"
+                  spacing={spacing}
+                  size={ViewPageSize.matchSize(size)}
+                >
+                  {createFields(
+                    data,
+                    leftContainerLines * (12 - getItemSize(bp, size))
+                  )}
+                </Grid2>
+              </React.Fragment>
+            )}
+            {createFields(data)}
           </Grid2>
           {actions !== null && (
             <Stack

package/src/useCurrentBreakpoint.ts

@@ -0,0 +1,17 @@
+import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";
+
+/**
+ * Hook to get the current breakpoint
+ * @returns The current breakpoint
+ */
+export function useCurrentBreakpoint(): Breakpoint {
+  const theme = useTheme();
+  const items: (Breakpoint | null)[] = [
+    useMediaQuery(theme.breakpoints.down("xs")) ? "xs" : null,
+    useMediaQuery(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
+    useMediaQuery(theme.breakpoints.between("sm", "md")) ? "md" : null,
+    useMediaQuery(theme.breakpoints.between("md", "lg")) ? "lg" : null,
+    useMediaQuery(theme.breakpoints.up("lg")) ? "xl" : null
+  ];
+  return items.find((item) => item != null) ?? "lg";
+}