@etsoo/materialui 1.4.99 → 1.5.0

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

@@ -1,78 +1,12 @@
-import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
 import { DataTypes } from "@etsoo/shared";
-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 large: ViewPageItemSize;
-    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
- */
-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 row width type
- */
-export type ViewPageRowType = boolean | "default" | "small" | "medium" | "large" | ViewPageItemSize;
-/**
- * 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]);
+import { ViewContainerProps } from "../ViewContainer";
 /**
  * View page props
  */
-export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, "children"> {
+export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<CommonPageProps, "children">, Omit<ViewContainerProps<T>, "data"> {
     /**
      * Actions
      */
@@ -85,10 +19,6 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * Children
      */
     children?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
-    /**
-     * Fields to display
-     */
-    fields: ViewPageFieldType<T>[];
     /**
      * Load data
      */
@@ -97,18 +27,10 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
-    /**
-     * Grid spacing
-     */
-    spacing?: Record<string, string | number>;
     /**
      * Support refresh
      */
     supportRefresh?: boolean;
-    /**
-     * Grid container reference
-     */
-    gridRef?: React.Ref<HTMLDivElement>;
     /**
      * Operation message handler
      */
@@ -122,24 +44,9 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * @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
  * @param props Props
  */
 export declare function ViewPage<T extends DataTypes.StringRecord>(props: ViewPageProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/mjs/pages/ViewPage.js

@@ -1,244 +1,34 @@
-import { createElement as _createElement } from "react";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollRestoration } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { Grid2, LinearProgress, Stack, Typography } from "@mui/material";
+import { LinearProgress, Stack } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
-import { GridDataFormat } from "../GridDataFormat";
 import { MUGlobal } from "../MUGlobal";
 import { PullToRefreshUI } from "../PullToRefreshUI";
 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.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 }))] }));
-}
-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;
-}
+import { ViewContainer } from "../ViewContainer";
 /**
  * View page
  * @param props Props
  */
 export function ViewPage(props) {
-    // Global app
-    const app = useRequiredAppContext();
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), actionPaddings = 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();
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing, actionPaddings = 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.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();
@@ -248,7 +38,6 @@ export function ViewPage(props) {
             MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    let leftResult;
     return (_jsx(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, sx: {
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
@@ -259,7 +48,7 @@ export function ViewPage(props) {
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : 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: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, 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), _jsx(ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && (_jsx(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 && 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.99",
+  "version": "1.5.0",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,7 +43,7 @@
     "@etsoo/appscript": "^1.6.19",
     "@etsoo/notificationbase": "^1.1.59",
     "@etsoo/react": "^1.8.33",
-    "@etsoo/shared": "^1.2.62",
+    "@etsoo/shared": "^1.2.63",
     "@mui/icons-material": "^6.4.8",
     "@mui/material": "^6.4.8",
     "@mui/x-data-grid": "^7.28.0",
@@ -75,7 +75,7 @@
     "@testing-library/react": "^16.2.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.18",
+    "@types/react": "^18.3.19",
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^18.3.5",
     "@types/react-input-mask": "^3.0.6",