@etsoo/materialui 1.5.71 → 1.5.73

package/src/ScrollerListEx.tsx

@@ -1,10 +1,15 @@
 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;
@@ -46,32 +51,9 @@ 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,
@@ -84,175 +66,88 @@ 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;
 
   /**
-   * Item height
+   * Row data
    */
-  itemHeight: number;
+  data: T;
 
   /**
-   * Item space
+   * Style
    */
-  space: number;
+  style: React.CSSProperties;
 
   /**
    * Default margins
    */
   margins: object;
-}
 
-/**
- * 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)?];
+  /**
+   * Item selected
+   */
+  selected: boolean;
+};
 
 /**
  * Extended ScrollerList Props
  */
 export type ScrollerListExProps<T extends object> = Omit<
   ScrollerListProps<T>,
-  "itemRenderer" | "itemSize"
-> & {
-  /**
-   * Alternating colors for odd/even rows
-   */
-  alternatingColors?: [string?, string?];
-
-  /**
-   * 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;
-
-  /**
-   * Double click handler
-   */
-  onDoubleClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * Click handler
-   */
-  onClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * On items select change
-   */
-  onSelectChange?: (selectedItems: T[]) => void;
-
-  /**
-   * Selected color
-   */
-  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>
-  );
-}
+  "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"
+> &
+  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
@@ -293,64 +188,40 @@ export function ScrollerListEx<T extends object>(
   const {
     alternatingColors = [undefined, undefined],
     className,
+    cacheKey,
+    cacheMinutes = 15,
+    cellMargins = defaultMargins(),
     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, margins, style }) => (
+      <Box
+        component="pre"
+        sx={{
+          ...margins
+        }}
+        style={style}
+      >
+        {JSON.stringify(data)}
+      </Box>
+    ),
     onClick,
     onDoubleClick,
+    onUpdateRows,
     onSelectChange,
+    rowHeight = 116,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
 
-  // 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!;
-  };
+  // Init handler
+  const initHandler = useListCacheInitLoad<T>(cacheKey, cacheMinutes);
 
-  // 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 +232,49 @@ 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={(cellProps) => {
+        const { index, style, items } = cellProps;
+        const data = items[index];
+        const selected = isSelected(data);
+        const rowClass = `ScrollerListEx-Row${index % 2}${
+          selected ? ` ${selectedClassName}` : ""
+        }`;
+
+        // Child
+        const child = itemRenderer({
+          index,
+          data,
+          style,
+          selected,
+          margins: cellMargins
+        });
+
+        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={rowHeight}
       {...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;