@etsoo/materialui 1.5.71 → 1.5.73

package/src/DataGridEx.tsx

@@ -11,7 +11,6 @@ import {
   GridLoaderStates,
   ScrollerGrid,
   ScrollerGridForwardRef,
-  ScrollerGridItemRendererProps,
   ScrollerGridProps,
   useCombinedRefs
 } from "@etsoo/react";
@@ -24,6 +23,8 @@ import Box, { BoxProps } from "@mui/material/Box";
 import TableSortLabel from "@mui/material/TableSortLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Paper from "@mui/material/Paper";
+import { GridUtils } from "./GridUtils";
+import { useGridCacheInitLoad } from "./uses/useGridCacheInitLoad";
 
 /**
  * Footer item renderer props
@@ -44,8 +45,15 @@ export type DataGridExProps<
   P extends GridJsonData = GridLoadDataProps
 > = Omit<
   ScrollerGridProps<T, P>,
-  "itemRenderer" | "columnCount" | "columnWidth" | "width"
-> & {
+  | "cellComponent"
+  | "columnCount"
+  | "columnWidth"
+  | "onClick"
+  | "onDoubleClick"
+  | "onInitLoad"
+  | "rowHeight"
+  | "width"
+> & Partial<Pick<ScrollerGridProps<T, P>, "rowHeight">> & {
   /**
    * Alternating colors for odd/even rows
    */
@@ -117,6 +125,14 @@ export type DataGridExProps<
    */
   onClick?: MouseEventWithDataHandler<T>;
 
+  /**
+   * Data change handler
+   * @param rows Rows
+   * @param rowIndex Row index
+   * @param columnIndex Column index
+   */
+  onDataChange?: (rows: T[], rowIndex: number, columnIndex: number) => void;
+
   /**
    * Selectable to support hover over and out effect and row clickable
    * @default true
@@ -355,6 +371,8 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     alternatingColors = [theme.palette.grey[100], undefined],
     borderRowsCount,
     bottomHeight = 53,
+    cacheKey,
+    cacheMinutes = 15,
     checkable = false,
     className,
     columns,
@@ -369,7 +387,10 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     idField = "id" as DataTypes.Keys<T>,
     mRef = React.createRef(),
     onClick,
+    onDataChange,
     onDoubleClick,
+    onUpdateRows,
+    rowHeight = 53,
     selectable = true,
     selectedColor = "#edf4fb",
     width,
@@ -433,6 +454,9 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     }
   }
 
+  // Init handler
+  const initHandler = useGridCacheInitLoad<T>(cacheKey, cacheMinutes);
+
   const refs = React.useRef<{ ref?: ScrollerGridForwardRef<T> }>({});
 
   const mRefLocal = useCombinedRefs(mRef, (ref: ScrollerGridForwardRef<T>) => {
@@ -501,107 +525,6 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     });
   };
 
-  /**
-   * Item renderer
-   */
-  const itemRenderer = ({
-    columnIndex,
-    rowIndex,
-    style,
-    data,
-    selectedItems,
-    setItems
-  }: ScrollerGridItemRendererProps<T>) => {
-    // Column
-    const {
-      align,
-      cellRenderer = DataGridRenderers.defaultCellRenderer,
-      cellBoxStyle,
-      field,
-      type,
-      valueFormatter,
-      renderProps
-    } = columns[columnIndex];
-
-    // Props
-    const formatProps: GridCellFormatterProps<T> = {
-      data,
-      field,
-      rowIndex,
-      columnIndex
-    };
-
-    let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
-    if (
-      borderRowsCount != null &&
-      borderRowsCount > 0 &&
-      (rowIndex + 1) % borderRowsCount === 0
-    ) {
-      rowClass += ` DataGridEx-Cell-Border`;
-    }
-
-    // Selected
-    const selected =
-      data != null &&
-      (selectedRowIndex.current === rowIndex ||
-        selectedItems.some(
-          (selectedItem) =>
-            selectedItem != null && selectedItem[idField] === data[idField]
-        ));
-
-    if (selected) {
-      rowClass += ` DataGridEx-Selected`;
-    }
-
-    // Box style
-    const boxStyle =
-      data == null || cellBoxStyle == null
-        ? undefined
-        : typeof cellBoxStyle === "function"
-        ? cellBoxStyle(data)
-        : cellBoxStyle;
-
-    const cellProps: BoxProps = {
-      className: "DataGridEx-Cell",
-      textAlign: GridAlignGet(align, type),
-      sx: { ...boxStyle }
-    };
-
-    const child = cellRenderer({
-      data,
-      field,
-      formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
-      selected,
-      type,
-      rowIndex,
-      columnIndex,
-      cellProps,
-      renderProps:
-        typeof renderProps === "function" ? renderProps(data) : renderProps,
-      setItems
-    });
-
-    return (
-      <div
-        className={rowClass}
-        style={style}
-        data-row={rowIndex}
-        data-column={columnIndex}
-        onMouseDown={selectable && !checkable ? handleMouseDown : undefined}
-        onMouseOver={selectable ? handleMouseOver : undefined}
-        onMouseOut={selectable ? handleMouseOut : undefined}
-        onClick={(event) => onClick && data != null && onClick(event, data)}
-        onDoubleClick={(event) =>
-          onDoubleClick && data != null && onDoubleClick(event, data)
-        }
-      >
-        <Box {...cellProps} onMouseEnter={handleMouseEnter}>
-          {child}
-        </Box>
-      </div>
-    );
-  };
-
   // Column width calculator
   const widthCalculator = React.useMemo(
     () => DataGridExCalColumns(columns),
@@ -630,6 +553,14 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     [columns, width]
   );
 
+  const onUpdateRowsHandler = React.useCallback(
+    (rows: T[], state: GridLoaderStates<T>) => {
+      GridUtils.getUpdateRowsHandler<T>(cacheKey)?.(rows, state);
+      onUpdateRows?.(rows, state);
+    },
+    [onUpdateRows, cacheKey]
+  );
+
   // Table
   const table = React.useMemo(() => {
     return (
@@ -640,19 +571,134 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           className,
           createGridStyle(alternatingColors, selectedColor, hoverColor)
         )}
+        onCellsRendered={
+          cacheKey
+            ? (visibleCells) =>
+                sessionStorage.setItem(
+                  `${cacheKey}-scroll`,
+                  JSON.stringify(visibleCells)
+                )
+            : undefined
+        }
+        onInitLoad={initHandler}
+        onUpdateRows={onUpdateRowsHandler}
+        cellComponent={({ rowIndex, columnIndex, style, rows, states }) => {
+          // Column
+          const {
+            align,
+            cellRenderer = DataGridRenderers.defaultCellRenderer,
+            cellBoxStyle,
+            field,
+            type,
+            valueFormatter,
+            renderProps
+          } = columns[columnIndex];
+
+          // Data
+          const data = rows[rowIndex];
+
+          // Props
+          const formatProps: GridCellFormatterProps<T> = {
+            data,
+            field,
+            rowIndex,
+            columnIndex
+          };
+
+          let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+          if (
+            borderRowsCount != null &&
+            borderRowsCount > 0 &&
+            (rowIndex + 1) % borderRowsCount === 0
+          ) {
+            rowClass += ` DataGridEx-Cell-Border`;
+          }
+
+          // Selected
+          const selected =
+            data != null &&
+            (selectedRowIndex.current === rowIndex ||
+              states.selectedItems.some(
+                (selectedItem) =>
+                  selectedItem != null &&
+                  selectedItem[idField] === data[idField]
+              ));
+
+          if (selected) {
+            rowClass += ` DataGridEx-Selected`;
+          }
+
+          // Box style
+          const boxStyle =
+            data == null || cellBoxStyle == null
+              ? undefined
+              : typeof cellBoxStyle === "function"
+              ? cellBoxStyle(data)
+              : cellBoxStyle;
+
+          const cellProps: BoxProps = {
+            className: "DataGridEx-Cell",
+            textAlign: GridAlignGet(align, type),
+            sx: { ...boxStyle }
+          };
+
+          const child = cellRenderer({
+            data,
+            field,
+            formattedValue: valueFormatter
+              ? valueFormatter(formatProps)
+              : undefined,
+            selected,
+            type,
+            rowIndex,
+            columnIndex,
+            cellProps,
+            renderProps:
+              typeof renderProps === "function"
+                ? renderProps(data)
+                : renderProps,
+            triggerChange: () => onDataChange?.(rows, rowIndex, columnIndex)
+          });
+
+          return (
+            <div
+              className={rowClass}
+              style={style}
+              data-row={rowIndex}
+              data-column={columnIndex}
+              onMouseDown={
+                selectable && !checkable ? handleMouseDown : undefined
+              }
+              onMouseOver={selectable ? handleMouseOver : undefined}
+              onMouseOut={selectable ? handleMouseOut : undefined}
+              onClick={(event) =>
+                onClick && data != null && onClick(event, data)
+              }
+              onDoubleClick={(event) =>
+                onDoubleClick && data != null && onDoubleClick(event, data)
+              }
+            >
+              <Box {...cellProps} onMouseEnter={handleMouseEnter}>
+                {child}
+              </Box>
+            </div>
+          );
+        }}
         columnCount={columns.length}
         columnWidth={columnWidth}
         defaultOrderBy={defaultOrderBy}
         height={
-          height -
-          headerHeight -
-          (hideFooter ? 0 : bottomHeight + 1) -
-          scrollbarSize
+          typeof height === "number"
+            ? height -
+              headerHeight -
+              (hideFooter ? 0 : bottomHeight + 1) -
+              scrollbarSize
+            : height
         }
         headerRenderer={headerRenderer}
         idField={idField}
-        itemRenderer={itemRenderer}
         footerRenderer={hideFooter ? undefined : footerRenderer}
+        rowHeight={rowHeight}
         width={Math.max(width ?? 0, widthCalculator.total)}
         mRef={mRefLocal}
         {...rest}

package/src/DataGridRenderers.tsx

@@ -23,7 +23,8 @@ export namespace DataGridRenderers {
     formattedValue,
     columnIndex,
     type,
-    renderProps
+    renderProps,
+    triggerChange
   }: GridCellRendererProps<T>): React.ReactNode {
     // Is loading
     if (data == null) {

package/src/MUUtils.ts

@@ -1,5 +1,3 @@
-import { QueryRQ } from "@etsoo/appscript";
-import { IdType } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/internals";
 
 /**
@@ -33,35 +31,4 @@ export namespace MUUtils {
     }
     return items;
   }
-
-  /**
-   * Setup paging keysets
-   * @param data Paging data
-   * @param lastItem Last item of the query
-   * @param idField Id field
-   */
-  export function setupPagingKeysets<T, K extends IdType = number>(
-    data: QueryRQ<K>,
-    lastItem: T | undefined,
-    idField: keyof T & string
-  ) {
-    // If the id field is not set for ordering, add it with descending
-    if (typeof data.queryPaging === "object") {
-      const orderBy = (data.queryPaging.orderBy ??= []);
-      const idUpper = idField.toUpperCase();
-      if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
-        orderBy.push({ field: idField, desc: true, unique: true });
-      }
-
-      // Set the paging keysets
-      if (lastItem) {
-        const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
-        data.queryPaging.keysets = keysets;
-      } else {
-        data.queryPaging.keysets = undefined;
-      }
-    }
-
-    return data;
-  }
 }

package/src/MobileListItemRenderer.tsx

@@ -1,11 +1,11 @@
 import { ListItemReact } from "@etsoo/react";
 import React from "react";
 import { MoreFab } from "./MoreFab";
-import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
 import LinearProgress from "@mui/material/LinearProgress";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
+import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
 
 /**
  * Default mobile list item renderer
@@ -15,7 +15,7 @@ import CardContent from "@mui/material/CardContent";
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-  { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
+  { data, margins, style }: ScrollerListExItemRendererProps<T>,
   renderer: (
     data: T
   ) => [
@@ -35,9 +35,9 @@ export function MobileListItemRenderer<T>(
   return (
     <Card
       sx={{
-        height: itemHeight,
         ...margins
       }}
+      style={style}
     >
       <CardHeader
         sx={{ paddingBottom: 0.5 }}
@@ -71,7 +71,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

@@ -1,19 +1,11 @@
 import React from "react";
-import {
-  GridOnScrollProps,
-  ListChildComponentProps,
-  ListOnScrollProps,
-  VariableSizeGrid
-} from "react-window";
 import {
   GridColumn,
   GridJsonData,
   GridLoadDataProps,
-  GridLoaderStates,
   GridMethodRef,
   GridTemplateType,
   ReactUtils,
-  ScrollerListRef,
   useCombinedRefs,
   useDimensions,
   useSearchParamsWithCache
@@ -21,11 +13,7 @@ import {
 import { DataGridEx, DataGridExProps } from "./DataGridEx";
 import { MUGlobal } from "./MUGlobal";
 import { PullToRefreshUI } from "./PullToRefreshUI";
-import {
-  ScrollerListEx,
-  ScrollerListExInnerItemRendererProps,
-  ScrollerListExItemSize
-} from "./ScrollerListEx";
+import { ScrollerListEx, ScrollerListExProps } from "./ScrollerListEx";
 import { SearchBar } from "./SearchBar";
 import { Labels } from "./app/Labels";
 import { GridUtils } from "./GridUtils";
@@ -39,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
@@ -94,22 +75,10 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<
    */
   height?: number;
 
-  /**
-   * Inner item renderer
-   */
-  innerItemRenderer: (
-    props: ScrollerListExInnerItemRendererProps<T>
-  ) => React.ReactNode;
-
   /**
    * Item renderer
    */
-  itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-
-  /**
-   * Item size, a function indicates its a variable size list
-   */
-  itemSize: ScrollerListExItemSize;
+  itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
 
   /**
    * Load data callback
@@ -122,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
@@ -144,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
    */
@@ -211,6 +193,7 @@ export function ResponsibleContainer<T extends object, F>(
     paddings = MUGlobal.pagePaddings,
     pullToRefresh = true,
     quickAction,
+    rowHeight,
     sizeReadyMiliseconds = 0,
     searchBarHeight = 45.6,
     searchBarBottom = 8,
@@ -228,6 +211,8 @@ export function ResponsibleContainer<T extends object, F>(
   const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef<T>) => {
     if (ref == null) return;
     state.ref = ref;
+
+    if (ref.element && elementReady) elementReady(ref.element, true);
   });
 
   // Screen size detection
@@ -252,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);
 
@@ -289,57 +285,6 @@ export function ResponsibleContainer<T extends object, F>(
     }
   );
 
-  const onInitLoad = (
-    ref: VariableSizeGrid<T> | ScrollerListRef
-  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
-    // Avoid repeatedly load from cache
-    if (refs.current.initLoaded || !cacheKey) return undefined;
-
-    // Cache data
-    const cacheData = GridUtils.getCacheData<T>(cacheKey, cacheMinutes);
-    if (cacheData) {
-      const { rows, state } = cacheData;
-
-      GridUtils.mergeSearchData(state, searchData);
-
-      // Scroll position
-      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-      if (scrollData) {
-        if ("resetAfterColumnIndex" in ref) {
-          const { scrollLeft, scrollTop } = JSON.parse(
-            scrollData
-          ) as GridOnScrollProps;
-
-          globalThis.setTimeout(
-            () => ref.scrollTo({ scrollLeft, scrollTop }),
-            0
-          );
-        } else {
-          const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
-
-          globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-        }
-      }
-
-      // Update flag value
-      refs.current.initLoaded = true;
-
-      // Return cached rows and state
-      return [rows, state];
-    }
-
-    return undefined;
-  };
-
-  const onListScroll = (props: ListOnScrollProps) => {
-    if (!cacheKey || !refs.current.initLoaded) return;
-    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-  };
-  const onGridScroll = (props: GridOnScrollProps) => {
-    if (!cacheKey || !refs.current.initLoaded) return;
-    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-  };
-
   // Rect
   const rect = dimensions[0][2];
 
@@ -372,8 +317,8 @@ export function ResponsibleContainer<T extends object, F>(
       heightLocal = adjustFabHeight(heightLocal, showDataGrid);
 
     if (showDataGrid) {
-      // Delete
-      delete rest.itemRenderer;
+      // Remove useless props
+      const { itemRenderer, ...gridProps } = rest;
 
       return (
         <Box className="DataGridBox">
@@ -384,28 +329,27 @@ export function ResponsibleContainer<T extends object, F>(
             loadData={localLoadData}
             mRef={mRefs}
             onDoubleClick={(_, data) => quickAction && quickAction(data)}
-            outerRef={(element?: HTMLDivElement) => {
-              if (element != null && elementReady) elementReady(element, true);
-            }}
-            onScroll={onGridScroll}
             columns={columns}
-            onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
-            onInitLoad={onInitLoad}
-            {...rest}
+            rowHeight={getRowHeight(true)}
+            {...gridProps}
           />
         </Box>
       );
     }
 
-    // Delete
-    delete rest.checkable;
-    delete rest.borderRowsCount;
-    delete rest.bottomHeight;
-    delete rest.footerItemRenderer;
-    delete rest.headerHeight;
-    delete rest.hideFooter;
-    delete rest.hoverColor;
-    delete rest.selectable;
+    // Remove useless props
+    const {
+      checkable,
+      borderRowsCount,
+      bottomHeight,
+      footerItemRenderer,
+      headerHeight,
+      hideFooter,
+      hoverColor,
+      selectable,
+      onCellsRendered,
+      ...listProps
+    } = rest;
 
     return (
       <Box className="ListBox" sx={{ height: heightLocal }}>
@@ -413,17 +357,12 @@ export function ResponsibleContainer<T extends object, F>(
           autoLoad={!hasFields}
           height={heightLocal}
           loadData={localLoadData}
-          onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
-          onInitLoad={onInitLoad}
           mRef={mRefs}
           onClick={(event, data) =>
             quickAction && ReactUtils.isSafeClick(event) && quickAction(data)
           }
-          oRef={(element) => {
-            if (element != null && elementReady) elementReady(element, false);
-          }}
-          onScroll={onListScroll}
-          {...rest}
+          rowHeight={getRowHeight(false)}
+          {...listProps}
         />
       </Box>
     );