@etsoo/materialui 1.5.72 → 1.5.74

package/lib/mjs/ScrollerListEx.js

@@ -4,7 +4,6 @@ import { ScrollerList } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import React from "react";
 import { MUGlobal } from "./MUGlobal";
-import { useTheme } from "@mui/material/styles";
 import { GridUtils } from "./GridUtils";
 import { useListCacheInitLoad } from "./uses/useListCacheInitLoad";
 import Box from "@mui/material/Box";
@@ -42,31 +41,12 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
-// Default margin
-// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
-const defaultMargin = (margin, horizon) => {
-    const half = MUGlobal.half(margin);
-    if (horizon == null) {
-        const half = MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    }
-    if ((typeof horizon === "number" && horizon >= 0) ||
-        (typeof horizon === "string" && /^-?\d+/.test(horizon))) {
-        return {
-            marginLeft: horizon,
-            marginRight: horizon,
-            marginTop: half,
-            marginBottom: half
-        };
-    }
+// Default margins
+const defaultMargins = () => {
+    const half = MUGlobal.half(MUGlobal.pagePaddings);
     return {
-        marginLeft: half,
-        marginRight: half,
+        marginLeft: 0,
+        marginRight: 0,
         marginTop: half,
         marginBottom: half
     };
@@ -98,35 +78,11 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemSize, itemRenderer = ({ data, itemHeight, margins }) => (_jsx(Box, { component: "pre", sx: {
-            height: itemHeight,
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, cellMargins = defaultMargins(), idField = "id", itemRenderer = ({ data, margins }) => (_jsx(Box, { component: "pre", sx: {
             ...margins
-        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
+        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = useListCacheInitLoad(cacheKey, cacheMinutes);
-    // Theme
-    const theme = useTheme();
-    // Cache calculation
-    const itemSizeResult = React.useMemo(() => {
-        if (typeof itemSize === "function")
-            return undefined;
-        const [size, spaces, h] = itemSize;
-        if (typeof spaces === "number")
-            return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
-        return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
-    }, [itemSize]);
-    // Calculate size
-    const calculateItemSize = (index) => {
-        // Callback function
-        if (typeof itemSize === "function") {
-            const result = itemSize(index);
-            if (result.length == 2)
-                return [...result, defaultMargin(MUGlobal.pagePaddings)];
-            return result;
-        }
-        // Calculation
-        return itemSizeResult;
-    };
     const onUpdateRowsHandler = React.useCallback((rows, state) => {
         GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
         onUpdateRows?.(rows, state);
@@ -134,24 +90,19 @@ export function ScrollerListEx(props) {
     // Layout
     return (_jsx(ScrollerList, { className: Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey
             ? (visibleRows) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleRows))
-            : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: ({ index, items, style }) => {
+            : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: (cellProps) => {
+            const { index, style, items } = cellProps;
             const data = items[index];
             const selected = isSelected(data);
             const rowClass = `ScrollerListEx-Row${index % 2}${selected ? ` ${selectedClassName}` : ""}`;
-            const [itemHeight, space, margins] = calculateItemSize(index);
             // Child
             const child = itemRenderer({
                 index,
                 data,
                 style,
                 selected,
-                itemHeight,
-                space,
-                margins
+                margins: cellMargins
             });
             return (_jsx("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
-        }, rowHeight: (index) => {
-            const [size, space] = calculateItemSize(index);
-            return size + space;
-        }, ...rest }));
+        }, rowHeight: rowHeight, ...rest }));
 }

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

@@ -1,12 +1,13 @@
 import React from "react";
+import { ResponsibleContainerProps } from "../ResponsibleContainer";
 import type { DataGridPageProps } from "./DataGridPageProps";
-import type { ScrollerListExItemSize, ScrollerListExProps } from "../ScrollerListEx";
+import type { ScrollerListExProps } from "../ScrollerListEx";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
+export type ResponsePageProps<T extends object, F> = Omit<DataGridPageProps<T, F>, "mRef" | "rowHeight"> & {
     /**
      *
      * @param height Current height
@@ -22,14 +23,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Item renderer
      */
     itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
     /**
      * Methods
      */
-    mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+    mRef?: React.RefObject<GridMethodRef<T> | undefined>;
     /**
      * Pull to refresh data
      */
@@ -42,6 +39,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Operation message handler
      */
     operationMessageHandler?: OperationMessageHandlerAll;
+    /**
+     * Row height
+     */
+    rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
 };
 /**
  * Fixed height list page

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.72",
+  "version": "1.5.74",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,11 +42,11 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.45",
     "@etsoo/notificationbase": "^1.1.64",
-    "@etsoo/react": "^1.8.58",
+    "@etsoo/react": "^1.8.59",
     "@etsoo/shared": "^1.2.76",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@mui/x-data-grid": "^8.13.1",
+    "@mui/x-data-grid": "^8.14.0",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.7",

package/src/DataGridEx.tsx

@@ -51,8 +51,9 @@ export type DataGridExProps<
   | "onClick"
   | "onDoubleClick"
   | "onInitLoad"
+  | "rowHeight"
   | "width"
-> & {
+> & Partial<Pick<ScrollerGridProps<T, P>, "rowHeight">> & {
   /**
    * Alternating colors for odd/even rows
    */
@@ -389,6 +390,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     onDataChange,
     onDoubleClick,
     onUpdateRows,
+    rowHeight = 53,
     selectable = true,
     selectedColor = "#edf4fb",
     width,
@@ -696,6 +698,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
         headerRenderer={headerRenderer}
         idField={idField}
         footerRenderer={hideFooter ? undefined : footerRenderer}
+        rowHeight={rowHeight}
         width={Math.max(width ?? 0, widthCalculator.total)}
         mRef={mRefLocal}
         {...rest}

package/src/MobileListItemRenderer.tsx

@@ -15,7 +15,7 @@ import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-  { data, itemHeight, margins }: ScrollerListExItemRendererProps<T>,
+  { data, margins }: ScrollerListExItemRendererProps<T>,
   renderer: (
     data: T
   ) => [
@@ -35,7 +35,6 @@ export function MobileListItemRenderer<T>(
   return (
     <Card
       sx={{
-        height: itemHeight,
         ...margins
       }}
     >
@@ -71,7 +70,7 @@ export function MobileListItemRenderer<T>(
         sx={{
           paddingTop: 0,
           paddingBottom:
-            cardActions == null ? Reflect.get(margins, "marginBottom") : 0
+            cardActions == null ? Reflect.get(margins, "marginBottom") ?? 0 : 0
         }}
       >
         {children}

package/src/ResponsibleContainer.tsx

@@ -13,11 +13,7 @@ import {
 import { DataGridEx, DataGridExProps } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
-import {
-  ScrollerListEx,
-  ScrollerListExItemSize,
-  ScrollerListExProps
-} from "./ScrollerListEx";
+import { ScrollerListEx, ScrollerListExProps } from "./ScrollerListEx";
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
 import { GridUtils } from "./GridUtils";
@@ -31,14 +27,7 @@ import Stack from "@mui/material/Stack";
  */
 export type ResponsibleContainerProps<T extends object, F> = Omit<
   DataGridExProps<T>,
-  | "height"
-  | "itemKey"
-  | "loadData"
-  | "mRef"
-  | "onScroll"
-  | "onItemsRendered"
-  | "onInitLoad"
-  | "onUpdateRows"
+  "height" | "loadData" | "mRef" | "onInitLoad" | "onUpdateRows" | "rowHeight"
 > & {
   /**
    * Height will be deducted
@@ -91,11 +80,6 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
    */
   itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
 
-  /**
-   * Item size, a function indicates its a variable size list
-   */
-  itemSize: ScrollerListExItemSize;
-
   /**
    * Load data callback
    */
@@ -107,7 +91,7 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
   /**
    * Methods
    */
-  mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+  mRef?: React.RefObject<GridMethodRef<T> | undefined>;
 
   /**
    * Element ready callback
@@ -129,6 +113,19 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
    */
   quickAction?: (data: T) => void;
 
+  /**
+   * Row height
+   * @param isGrid Is displaying as DataGrid
+   */
+  rowHeight?:
+    | number
+    | [number, number]
+    | (<B extends boolean>(
+        isGrid: B
+      ) => B extends true
+        ? DataGridExProps<T>["rowHeight"]
+        : ScrollerListExProps<T>["rowHeight"]);
+
   /**
    * Size ready to read miliseconds span
    */
@@ -196,6 +193,7 @@ export function ResponsibleContainer<T extends object, F>(
     paddings = MUGlobal.pagePaddings,
     pullToRefresh = true,
     quickAction,
+    rowHeight,
     sizeReadyMiliseconds = 0,
     searchBarHeight = 45.6,
     searchBarBottom = 8,
@@ -239,6 +237,17 @@ export function ResponsibleContainer<T extends object, F>(
     );
   };
 
+  const getRowHeight = React.useCallback(
+    <B extends boolean>(isGrid: B) => {
+      if (rowHeight == null) return undefined;
+      else if (typeof rowHeight === "number")
+        return isGrid ? undefined : rowHeight;
+      else if (Array.isArray(rowHeight)) return rowHeight[isGrid ? 0 : 1];
+      else return rowHeight<B>(isGrid);
+    },
+    [rowHeight]
+  );
+
   // Search data
   const searchData = useSearchParamsWithCache(cacheKey);
 
@@ -321,6 +330,7 @@ export function ResponsibleContainer<T extends object, F>(
             mRef={mRefs}
             onDoubleClick={(_, data) => quickAction && quickAction(data)}
             columns={columns}
+            rowHeight={getRowHeight(true)}
             {...gridProps}
           />
         </Box>
@@ -337,6 +347,7 @@ export function ResponsibleContainer<T extends object, F>(
       hideFooter,
       hoverColor,
       selectable,
+      onCellsRendered,
       ...listProps
     } = rest;
 
@@ -350,6 +361,7 @@ export function ResponsibleContainer<T extends object, F>(
           onClick={(event, data) =>
             quickAction && ReactUtils.isSafeClick(event) && quickAction(data)
           }
+          rowHeight={getRowHeight(false)}
           {...listProps}
         />
       </Box>

package/src/ScrollerListEx.tsx

@@ -7,7 +7,6 @@ import {
 import { DataTypes, Utils } from "@etsoo/shared";
 import React from "react";
 import { MouseEventWithDataHandler, MUGlobal } from "./MUGlobal";
-import { useTheme } from "@mui/material/styles";
 import { GridUtils } from "./GridUtils";
 import { useListCacheInitLoad } from "./uses/useListCacheInitLoad";
 import Box from "@mui/material/Box";
@@ -52,36 +51,13 @@ const createGridStyle = (
   });
 };
 
-// Default margin
-// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
-const defaultMargin = (margin: object, horizon?: number | string) => {
-  const half = MUGlobal.half(margin);
-
-  if (horizon == null) {
-    const half = MUGlobal.half(margin);
-    return {
-      marginLeft: margin,
-      marginRight: margin,
-      marginTop: half,
-      marginBottom: half
-    };
-  }
-
-  if (
-    (typeof horizon === "number" && horizon >= 0) ||
-    (typeof horizon === "string" && /^-?\d+/.test(horizon))
-  ) {
-    return {
-      marginLeft: horizon,
-      marginRight: horizon,
-      marginTop: half,
-      marginBottom: half
-    };
-  }
+// Default margins
+const defaultMargins = () => {
+  const half = MUGlobal.half(MUGlobal.pagePaddings);
 
   return {
-    marginLeft: half,
-    marginRight: half,
+    marginLeft: 0,
+    marginRight: 0,
     marginTop: half,
     marginBottom: half
   };
@@ -106,16 +82,6 @@ export type ScrollerListExItemRendererProps<T> = {
    */
   style: React.CSSProperties;
 
-  /**
-   * Item height
-   */
-  itemHeight: number;
-
-  /**
-   * Item space
-   */
-  space: number;
-
   /**
    * Default margins
    */
@@ -127,69 +93,61 @@ export type ScrollerListExItemRendererProps<T> = {
   selected: boolean;
 };
 
-/**
- * Extended ScrollerList ItemSize type
- * 1. Callback function
- * 2. Static sets
- * 3. Dynamic left & right margin calculation
- */
-export type ScrollerListExItemSize =
-  | ((index: number) => [number, number] | [number, number, object])
-  | [number, number]
-  | [number, object, (number | string)?];
-
 /**
  * Extended ScrollerList Props
  */
 export type ScrollerListExProps<T extends object> = Omit<
   ScrollerListProps<T>,
   "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"
-> & {
-  /**
-   * Alternating colors for odd/even rows
-   */
-  alternatingColors?: [string?, string?];
-
-  /**
-   * Cache key
-   */
-  cacheKey?: string;
-
-  /**
-   * Cache minutes
-   */
-  cacheMinutes?: number;
-
-  /**
-   * Item renderer
-   */
-  itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
-
-  /**
-   * Item size, a function indicates its a variable size list
-   */
-  itemSize: ScrollerListExItemSize;
-
-  /**
-   * Double click handler
-   */
-  onDoubleClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * Click handler
-   */
-  onClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * On items select change
-   */
-  onSelectChange?: (selectedItems: T[]) => void;
-
-  /**
-   * Selected color
-   */
-  selectedColor?: string;
-};
+> &
+  Partial<Pick<ScrollerListProps<T>, "rowHeight">> & {
+    /**
+     * Alternating colors for odd/even rows
+     */
+    alternatingColors?: [string?, string?];
+
+    /**
+     * Cache key
+     */
+    cacheKey?: string;
+
+    /**
+     * Cache minutes
+     */
+    cacheMinutes?: number;
+
+    /**
+     * Cell margins, default to half of MUGlobal.pagePaddings
+     */
+    cellMargins?: object;
+
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (
+      props: ScrollerListExItemRendererProps<T>
+    ) => React.ReactNode;
+
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * On items select change
+     */
+    onSelectChange?: (selectedItems: T[]) => void;
+
+    /**
+     * Selected color
+     */
+    selectedColor?: string;
+  };
 
 /**
  * Extended ScrollerList
@@ -232,13 +190,12 @@ export function ScrollerListEx<T extends object>(
     className,
     cacheKey,
     cacheMinutes = 15,
+    cellMargins = defaultMargins(),
     idField = "id" as DataTypes.Keys<T>,
-    itemSize,
-    itemRenderer = ({ data, itemHeight, margins }) => (
+    itemRenderer = ({ data, margins }) => (
       <Box
         component="pre"
         sx={{
-          height: itemHeight,
           ...margins
         }}
       >
@@ -249,6 +206,7 @@ export function ScrollerListEx<T extends object>(
     onDoubleClick,
     onUpdateRows,
     onSelectChange,
+    rowHeight = 116,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
@@ -256,35 +214,6 @@ export function ScrollerListEx<T extends object>(
   // Init handler
   const initHandler = useListCacheInitLoad<T>(cacheKey, cacheMinutes);
 
-  // Theme
-  const theme = useTheme();
-
-  // Cache calculation
-  const itemSizeResult = React.useMemo(():
-    | [number, number, object]
-    | undefined => {
-    if (typeof itemSize === "function") return undefined;
-    const [size, spaces, h] = itemSize;
-    if (typeof spaces === "number")
-      return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
-
-    return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
-  }, [itemSize]);
-
-  // Calculate size
-  const calculateItemSize = (index: number): [number, number, object] => {
-    // Callback function
-    if (typeof itemSize === "function") {
-      const result = itemSize(index);
-      if (result.length == 2)
-        return [...result, defaultMargin(MUGlobal.pagePaddings)];
-      return result;
-    }
-
-    // Calculation
-    return itemSizeResult!;
-  };
-
   const onUpdateRowsHandler = React.useCallback(
     (rows: T[], state: GridLoaderStates<T>) => {
       GridUtils.getUpdateRowsHandler<T>(cacheKey)?.(rows, state);
@@ -313,24 +242,21 @@ export function ScrollerListEx<T extends object>(
       }
       onInitLoad={initHandler}
       onUpdateRows={onUpdateRowsHandler}
-      rowComponent={({ index, items, style }) => {
+      rowComponent={(cellProps) => {
+        const { index, style, items } = cellProps;
         const data = items[index];
         const selected = isSelected(data);
         const rowClass = `ScrollerListEx-Row${index % 2}${
           selected ? ` ${selectedClassName}` : ""
         }`;
 
-        const [itemHeight, space, margins] = calculateItemSize(index);
-
         // Child
         const child = itemRenderer({
           index,
           data,
           style,
           selected,
-          itemHeight,
-          space,
-          margins
+          margins: cellMargins
         });
 
         return (
@@ -347,10 +273,7 @@ export function ScrollerListEx<T extends object>(
           </div>
         );
       }}
-      rowHeight={(index) => {
-        const [size, space] = calculateItemSize(index);
-        return size + space;
-      }}
+      rowHeight={rowHeight}
       {...rest}
     />
   );

package/src/pages/ResponsivePage.tsx

@@ -1,20 +1,23 @@
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
-import { ResponsibleContainer } from "../ResponsibleContainer";
+import {
+  ResponsibleContainer,
+  ResponsibleContainerProps
+} from "../ResponsibleContainer";
 import { CommonPage } from "./CommonPage";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 import type { DataGridPageProps } from "./DataGridPageProps";
-import type {
-  ScrollerListExItemSize,
-  ScrollerListExProps
-} from "../ScrollerListEx";
+import type { ScrollerListExProps } from "../ScrollerListEx";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
+export type ResponsePageProps<T extends object, F> = Omit<
+  DataGridPageProps<T, F>,
+  "mRef" | "rowHeight"
+> & {
   /**
    *
    * @param height Current height
@@ -33,15 +36,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
    */
   itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
 
-  /**
-   * Item size, a function indicates its a variable size list
-   */
-  itemSize: ScrollerListExItemSize;
-
   /**
    * Methods
    */
-  mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+  mRef?: React.RefObject<GridMethodRef<T> | undefined>;
 
   /**
    * Pull to refresh data
@@ -57,6 +55,11 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
    * Operation message handler
    */
   operationMessageHandler?: OperationMessageHandlerAll;
+
+  /**
+   * Row height
+   */
+  rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
 };
 
 /**