@etsoo/materialui 1.4.99 → 1.5.0

package/lib/cjs/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/cjs/ViewContainer.js

@@ -0,0 +1,230 @@
+"use strict";
+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.ViewContainer = ViewContainer;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const MUGlobal_1 = require("./MUGlobal");
+const useCurrentBreakpoint_1 = require("./useCurrentBreakpoint");
+const GridDataFormat_1 = require("./GridDataFormat");
+const ReactApp_1 = require("./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 = (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 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 ViewContainer(props) {
+    // Global app
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Destruct
+    const { data, fields, gridRef, leftContainer, leftContainerLines = 3, leftContainerProps = {}, refresh, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), ...rest } = props;
+    // Left container
+    const { size = ViewPageSize.smallLine, ...leftContainerPropsRest } = leftContainerProps;
+    // Current breakpoint
+    const bp = (0, useCurrentBreakpoint_1.useCurrentBreakpoint)();
+    // Create fields
+    const fieldIndexRef = react_2.default.useRef(0);
+    const createFields = react_2.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, fields, data, bp]);
+    let leftResult;
+    // Layout
+    return ((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_2.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)] }));
+}

package/lib/cjs/index.d.ts

@@ -117,3 +117,4 @@ export * from "./useCurrentBreakpoint";
 export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
+export * from "./ViewContainer";

package/lib/cjs/index.js

@@ -133,3 +133,4 @@ __exportStar(require("./useCurrentBreakpoint"), exports);
 __exportStar(require("./TooltipClick"), exports);
 __exportStar(require("./UserAvatar"), exports);
 __exportStar(require("./UserAvatarEditor"), exports);
+__exportStar(require("./ViewContainer"), exports);

package/lib/cjs/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 {};