@etsoo/materialui 1.5.70 → 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
@@ -263,7 +200,7 @@ export function ScrollerListEx<T extends object>(
   props: ScrollerListExProps<T>
 ) {
   // Selected item ref
-  const selectedItem = React.useRef<[HTMLDivElement, T]>();
+  const selectedItem = React.useRef<[HTMLDivElement, T]>(null);
 
   const onMouseDown = (div: HTMLDivElement, data: T) => {
     // Destruct
@@ -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/SelectEx.tsx

@@ -210,7 +210,7 @@ export function SelectEx<
 
   // Value state
   const [valueState, setValueStateBase] = React.useState<unknown>(valueSource);
-  const valueRef = React.useRef<unknown>();
+  const valueRef = React.useRef<unknown>(null);
   const setValueState = (newValue: unknown) => {
     valueRef.current = newValue;
     setValueStateBase(newValue);
@@ -268,7 +268,7 @@ export function SelectEx<
   };
 
   // Refs
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(null);
 
   // Refresh list data
   const refreshData = () => {

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/custom/CustomFieldUtils.tsx

@@ -96,7 +96,7 @@ export namespace CustomFieldUtils {
       const Creator = creator;
       const mref = React.createRef<CustomFieldRef<unknown>>();
 
-      let ui: JSX.Element | string = (
+      let ui: React.ReactNode = (
         <Creator
           field={field}
           mref={mref}

package/src/custom/FieldDateInput.tsx

@@ -16,7 +16,7 @@ export const FieldDateInput: ICustomFieldReact<Date> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () =>
     inputRef.current == null

package/src/custom/FieldInput.tsx

@@ -15,7 +15,7 @@ export const FieldInput: ICustomFieldReact<string> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => inputRef.current?.value;
 

package/src/custom/FieldJson.tsx

@@ -26,7 +26,7 @@ export const FieldJson: ICustomFieldReact<object> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => parseJson(inputRef.current?.value);
 

package/src/custom/FieldNumberInput.tsx

@@ -16,7 +16,7 @@ export const FieldNumberInput: ICustomFieldReact<number> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => {
     const value = inputRef.current?.valueAsNumber;

package/src/custom/FieldTexarea.tsx

@@ -15,7 +15,7 @@ export const FieldTexarea: ICustomFieldReact<string> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => inputRef.current?.value;
 

package/src/html/HtmlDiv.tsx

@@ -1,5 +1,6 @@
 import { Utils } from "@etsoo/shared";
 import { HTMLAttributes } from "react";
+import DOMPurify from "dompurify";
 
 class HtmlDivElement extends HTMLElement {
   static get observedAttributes() {
@@ -96,7 +97,7 @@ class HtmlDivElement extends HTMLElement {
     ) {
       wrapper.innerHTML = this.textContent;
     } else {
-      wrapper.innerHTML = html;
+      wrapper.innerHTML = DOMPurify.sanitize(html);
     }
 
     this.textContent = null; // Clear the textContent to avoid duplication
@@ -108,6 +109,17 @@ if (!customElements.get("html-div")) {
   customElements.define("html-div", HtmlDivElement);
 }
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "html-div": React.DetailedHTMLProps<
+        React.HTMLAttributes<HtmlDivElement>,
+        HtmlDivElement
+      >;
+    }
+  }
+}
+
 /**
  * Custom HTML element properties
  * 自定义 HTML 元素属性
@@ -120,14 +132,6 @@ export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
   displayStyle?: string;
 };
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "html-div": React.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容

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>();
-
   // 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>();
-
   // 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;