@etsoo/materialui 1.5.71 → 1.5.72

package/src/ScrollerListEx.tsx

@@ -1,10 +1,16 @@
 import { css } from "@emotion/css";
-import { ScrollerList, ScrollerListProps } from "@etsoo/react";
+import {
+  GridLoaderStates,
+  ScrollerList,
+  ScrollerListProps
+} from "@etsoo/react";
 import { DataTypes, Utils } from "@etsoo/shared";
 import React from "react";
-import { ListChildComponentProps } from "react-window";
 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";
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -84,12 +90,21 @@ const defaultMargin = (margin: object, horizon?: number | string) => {
 /**
  * Extended ScrollerList inner item renderer props
  */
-export interface ScrollerListExInnerItemRendererProps<T>
-  extends ListChildComponentProps<T> {
+export type ScrollerListExItemRendererProps<T> = {
   /**
-   * Item selected
+   * Row index
    */
-  selected: boolean;
+  index: number;
+
+  /**
+   * Row data
+   */
+  data: T;
+
+  /**
+   * Style
+   */
+  style: React.CSSProperties;
 
   /**
    * Item height
@@ -105,7 +120,12 @@ export interface ScrollerListExInnerItemRendererProps<T>
    * Default margins
    */
   margins: object;
-}
+
+  /**
+   * Item selected
+   */
+  selected: boolean;
+};
 
 /**
  * Extended ScrollerList ItemSize type
@@ -123,7 +143,7 @@ export type ScrollerListExItemSize =
  */
 export type ScrollerListExProps<T extends object> = Omit<
   ScrollerListProps<T>,
-  "itemRenderer" | "itemSize"
+  "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"
 > & {
   /**
    * Alternating colors for odd/even rows
@@ -131,16 +151,19 @@ export type ScrollerListExProps<T extends object> = Omit<
   alternatingColors?: [string?, string?];
 
   /**
-   * Inner item renderer
+   * Cache key
+   */
+  cacheKey?: string;
+
+  /**
+   * Cache minutes
    */
-  innerItemRenderer: (
-    props: ScrollerListExInnerItemRendererProps<T>
-  ) => React.ReactNode;
+  cacheMinutes?: number;
 
   /**
    * Item renderer
    */
-  itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+  itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
 
   /**
    * Item size, a function indicates its a variable size list
@@ -168,92 +191,6 @@ export type ScrollerListExProps<T extends object> = Omit<
   selectedColor?: string;
 };
 
-interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
-  /**
-   * onMouseDown callback
-   */
-  onMouseDown: (div: HTMLDivElement, data: T) => void;
-
-  /**
-   * Inner item renderer
-   */
-  innerItemRenderer: (
-    props: ScrollerListExInnerItemRendererProps<T>
-  ) => React.ReactNode;
-
-  /**
-   * Item height
-   */
-  itemHeight: number;
-
-  /**
-   * Double click handler
-   */
-  onDoubleClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * Click handler
-   */
-  onClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * Item space
-   */
-  space: number;
-
-  /**
-   * Default margins
-   */
-  margins: object;
-
-  /**
-   * Item selected
-   */
-  selected: boolean;
-}
-
-// Default itemRenderer
-function defaultItemRenderer<T>({
-  index,
-  innerItemRenderer,
-  data,
-  onMouseDown,
-  selected,
-  style,
-  itemHeight,
-  onClick,
-  onDoubleClick,
-  space,
-  margins
-}: defaultItemRendererProps<T>) {
-  // Child
-  const child = innerItemRenderer({
-    index,
-    data,
-    style,
-    selected,
-    itemHeight,
-    space,
-    margins
-  });
-
-  let rowClass = `ScrollerListEx-Row${index % 2}`;
-  if (selected) rowClass += ` ${selectedClassName}`;
-
-  // Layout
-  return (
-    <div
-      className={rowClass}
-      style={style}
-      onMouseDown={(event) => onMouseDown(event.currentTarget, data)}
-      onClick={(event) => onClick && onClick(event, data)}
-      onDoubleClick={(event) => onDoubleClick && onDoubleClick(event, data)}
-    >
-      {child}
-    </div>
-  );
-}
-
 /**
  * Extended ScrollerList
  * @param props Props
@@ -293,30 +230,32 @@ export function ScrollerListEx<T extends object>(
   const {
     alternatingColors = [undefined, undefined],
     className,
+    cacheKey,
+    cacheMinutes = 15,
     idField = "id" as DataTypes.Keys<T>,
-    innerItemRenderer,
     itemSize,
-    itemRenderer = (itemProps) => {
-      const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
-      return defaultItemRenderer({
-        itemHeight,
-        innerItemRenderer,
-        onMouseDown,
-        onClick,
-        onDoubleClick,
-        space,
-        margins,
-        selected: isSelected(itemProps.data),
-        ...itemProps
-      });
-    },
+    itemRenderer = ({ data, itemHeight, margins }) => (
+      <Box
+        component="pre"
+        sx={{
+          height: itemHeight,
+          ...margins
+        }}
+      >
+        {JSON.stringify(data)}
+      </Box>
+    ),
     onClick,
     onDoubleClick,
+    onUpdateRows,
     onSelectChange,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
 
+  // Init handler
+  const initHandler = useListCacheInitLoad<T>(cacheKey, cacheMinutes);
+
   // Theme
   const theme = useTheme();
 
@@ -346,11 +285,13 @@ export function ScrollerListEx<T extends object>(
     return itemSizeResult!;
   };
 
-  // Local item size
-  const itemSizeLocal = (index: number) => {
-    const [size, space] = calculateItemSize(index);
-    return size + space;
-  };
+  const onUpdateRowsHandler = React.useCallback(
+    (rows: T[], state: GridLoaderStates<T>) => {
+      GridUtils.getUpdateRowsHandler<T>(cacheKey)?.(rows, state);
+      onUpdateRows?.(rows, state);
+    },
+    [onUpdateRows, cacheKey]
+  );
 
   // Layout
   return (
@@ -361,8 +302,55 @@ export function ScrollerListEx<T extends object>(
         createGridStyle(alternatingColors, selectedColor)
       )}
       idField={idField}
-      itemRenderer={itemRenderer}
-      itemSize={itemSizeLocal}
+      onRowsRendered={
+        cacheKey
+          ? (visibleRows) =>
+              sessionStorage.setItem(
+                `${cacheKey}-scroll`,
+                JSON.stringify(visibleRows)
+              )
+          : undefined
+      }
+      onInitLoad={initHandler}
+      onUpdateRows={onUpdateRowsHandler}
+      rowComponent={({ index, items, style }) => {
+        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
+        });
+
+        return (
+          <div
+            className={rowClass}
+            style={style}
+            onMouseDown={(event) => onMouseDown(event.currentTarget, data)}
+            onClick={(event) => onClick && onClick(event, data)}
+            onDoubleClick={(event) =>
+              onDoubleClick && onDoubleClick(event, data)
+            }
+          >
+            {child}
+          </div>
+        );
+      }}
+      rowHeight={(index) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+      }}
       {...rest}
     />
   );

package/src/TableEx.tsx

@@ -7,7 +7,8 @@ import {
   GridLoaderPartialStates,
   GridLoaderStates,
   GridMethodRef,
-  GridSizeGet
+  GridSizeGet,
+  ScrollToRowParam
 } from "@etsoo/react";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import React from "react";
@@ -77,6 +78,14 @@ export type TableExProps<
      */
     mRef?: React.Ref<TableExMethodRef<T>>;
 
+    /**
+     * Data change handler
+     * @param rows Rows
+     * @param rowIndex Row index
+     * @param columnIndex Column index
+     */
+    onDataChange?: (rows: T[], rowIndex: number, columnIndex: number) => void;
+
     /**
      * On items select change
      */
@@ -117,6 +126,7 @@ export function TableEx<
     loadData,
     maxHeight,
     mRef,
+    onDataChange,
     onSelectChange,
     rowHeight = 53,
     otherHeight = 110,
@@ -183,6 +193,10 @@ export function TableEx<
   React.useImperativeHandle(
     mRef,
     () => ({
+      get element() {
+        return null;
+      },
+
       delete(index) {
         const item = rows.at(index);
         if (item) {
@@ -192,27 +206,20 @@ export function TableEx<
         }
         return item;
       },
+
       insert(item, start) {
         const newRows = [...rows];
         newRows.splice(start, 0, item);
         setRows(newRows);
       },
-      /**
-       * Refresh data
-       */
+
       refresh(): void {
         loadDataLocal();
       },
 
-      /**
-       * Reset
-       */
       reset,
-      scrollToRef(scrollOffset: number): void {
-        // Not implemented
-      },
 
-      scrollToItemRef(index: number): void {
+      scrollToRow(param: ScrollToRowParam): void {
         // Not implemented
       }
     }),
@@ -513,7 +520,8 @@ export function TableEx<
                           rowIndex,
                           columnIndex,
                           cellProps,
-                          setItems
+                          triggerChange: () =>
+                            onDataChange?.(rows, rowIndex, columnIndex)
                         })
                       ) : (
                         <React.Fragment>&nbsp;</React.Fragment>

package/src/pages/DataGridPage.tsx

@@ -1,9 +1,6 @@
 import {
   GridLoadDataProps,
-  GridLoaderStates,
-  GridOnScrollProps,
   ScrollerGridForwardRef,
-  VariableSizeGrid,
   useCombinedRefs,
   useDimensions,
   useSearchParamsWithCache
@@ -66,12 +63,13 @@ export function DataGridPage<T extends object, F>(
     (ref: ScrollerGridForwardRef<T> | null | undefined) => {
       if (ref == null) return;
       states.ref = ref;
+
+      if (ref.element) setStates({ element: ref.element });
+
       //setStates({ ref });
     }
   );
 
-  const initLoadedRef = React.useRef<boolean>(null);
-
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {
     setStates({ data });
@@ -87,44 +85,6 @@ export function DataGridPage<T extends object, F>(
   // Search data
   const searchData = useSearchParamsWithCache(cacheKey);
 
-  const onInitLoad = (
-    ref: VariableSizeGrid<T>
-  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
-    // Avoid repeatedly load from cache
-    if (initLoadedRef.current || !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) {
-        const { scrollLeft, scrollTop } = JSON.parse(
-          scrollData
-        ) as GridOnScrollProps;
-
-        globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
-      }
-
-      // Update flag value
-      initLoadedRef.current = true;
-
-      // Return cached rows and state
-      return [rows, state];
-    }
-
-    return undefined;
-  };
-
-  const onGridScroll = (props: GridOnScrollProps) => {
-    if (!cacheKey || !initLoadedRef.current) return;
-    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-  };
-
   // Watch container
   const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
   const rect = dimensions[0][2];
@@ -159,12 +119,6 @@ export function DataGridPage<T extends object, F>(
         height={gridHeight}
         loadData={localLoadData}
         mRef={refs}
-        onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
-        onInitLoad={onInitLoad}
-        onScroll={onGridScroll}
-        outerRef={(element?: HTMLDivElement) => {
-          if (element != null) setStates({ element });
-        }}
         {...rest}
       />
     );

package/src/pages/FixedListPage.tsx

@@ -1,9 +1,6 @@
 import {
   GridLoadDataProps,
-  GridLoaderStates,
-  ListOnScrollProps,
   ScrollerListForwardRef,
-  ScrollerListRef,
   useCombinedRefs,
   useDimensions,
   useSearchParamsWithCache
@@ -56,8 +53,6 @@ export function FixedListPage<T extends object, F>(
     ref?: ScrollerListForwardRef<T>;
   }>({});
 
-  const initLoadedRef = React.useRef<boolean>(null);
-
   // Scroll container
   const [scrollContainer, updateScrollContainer] = React.useState<
     HTMLElement | undefined
@@ -72,6 +67,8 @@ export function FixedListPage<T extends object, F>(
 
       states.ref = ref;
 
+      if (ref.element) updateScrollContainer(ref.element);
+
       if (first) reset();
     }
   );
@@ -94,44 +91,6 @@ export function FixedListPage<T extends object, F>(
     );
   };
 
-  // Search data
-  const searchData = useSearchParamsWithCache(cacheKey);
-
-  const onInitLoad = (
-    ref: ScrollerListRef
-  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
-    // Avoid repeatedly load from cache
-    if (initLoadedRef.current || !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) {
-        const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
-        globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-      }
-
-      // Update flag value
-      initLoadedRef.current = true;
-
-      // Return cached rows and state
-      return [rows, state];
-    }
-
-    return undefined;
-  };
-
-  const onListScroll = (props: ListOnScrollProps) => {
-    if (!cacheKey || !initLoadedRef.current) return;
-    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-  };
-
   // Watch container
   const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
   const rect = dimensions[0][2];
@@ -159,12 +118,6 @@ export function FixedListPage<T extends object, F>(
             height={height}
             loadData={localLoadData}
             mRef={refs}
-            onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
-            onInitLoad={onInitLoad}
-            onScroll={onListScroll}
-            oRef={(element) => {
-              if (element != null) updateScrollContainer(element);
-            }}
             {...rest}
           />
         </Box>
@@ -172,6 +125,9 @@ export function FixedListPage<T extends object, F>(
     }
   }, [rect]);
 
+  // Search data
+  const searchData = useSearchParamsWithCache(cacheKey);
+
   const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
 
   const { paddings, ...pageRest } = pageProps;

package/src/pages/ListPage.tsx

@@ -1,9 +1,6 @@
 import {
   GridLoadDataProps,
-  GridLoaderStates,
-  ListOnScrollProps,
   ScrollerListForwardRef,
-  ScrollerListRef,
   useCombinedRefs,
   useDimensions,
   useSearchParamsWithCache
@@ -62,8 +59,6 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     if (first) reset();
   });
 
-  const initLoadedRef = React.useRef<boolean>(null);
-
   const reset = () => {
     if (states.data == null || states.ref == null) return;
     states.ref.reset({ data: states.data });
@@ -89,41 +84,6 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
   // Search data
   const searchData = useSearchParamsWithCache(cacheKey);
 
-  const onInitLoad = (
-    ref: ScrollerListRef
-  ): [T[], Partial<GridLoaderStates<T>>?] | null | undefined => {
-    // Avoid repeatedly load from cache
-    if (initLoadedRef.current || !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) {
-        const { scrollOffset } = JSON.parse(scrollData) as ListOnScrollProps;
-        globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-      }
-
-      // Update flag value
-      initLoadedRef.current = true;
-
-      // Return cached rows and state
-      return [rows, state];
-    }
-
-    return undefined;
-  };
-
-  const onListScroll = (props: ListOnScrollProps) => {
-    if (!cacheKey || !initLoadedRef.current) return;
-    sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-  };
-
   const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
 
   // Layout
@@ -148,9 +108,6 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
         <ScrollerListEx<T>
           autoLoad={false}
           loadData={localLoadData}
-          onUpdateRows={GridUtils.getUpdateRowsHandler<T>(cacheKey)}
-          onInitLoad={onInitLoad}
-          onScroll={onListScroll}
           mRef={refs}
           {...rest}
         />

package/src/pages/ResponsivePage.tsx

@@ -5,10 +5,9 @@ import { CommonPage } from "./CommonPage";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 import type { DataGridPageProps } from "./DataGridPageProps";
 import type {
-  ScrollerListExInnerItemRendererProps,
-  ScrollerListExItemSize
+  ScrollerListExItemSize,
+  ScrollerListExProps
 } from "../ScrollerListEx";
-import { ListChildComponentProps } from "react-window";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 
@@ -29,17 +28,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
    */
   dataGridMinWidth?: number;
 
-  /**
-   * Inner item renderer
-   */
-  innerItemRenderer: (
-    props: ScrollerListExInnerItemRendererProps<T>
-  ) => React.ReactNode;
-
   /**
    * Item renderer
    */
-  itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+  itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
 
   /**
    * Item size, a function indicates its a variable size list