@etsoo/materialui 1.0.8 → 1.0.9

package/lib/ListMoreDisplay.js

@@ -22,7 +22,8 @@ export function ListMoreDisplay(props) {
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
     // States
@@ -59,13 +60,15 @@ export function ListMoreDisplay(props) {
         // Next page
         ref.currentPage = currentPage + 1;
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        }
+        else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
     const reset = (data) => {
         // Update the form data

package/lib/ScrollerListEx.d.ts

@@ -34,7 +34,7 @@ export declare type ScrollerListExItemSize = ((index: number) => [number, number
 /**
  * Extended ScrollerList Props
  */
-export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -47,11 +47,6 @@ export declare type ScrollerListExProps<T extends object, D extends DataTypes.Ke
      * Item renderer
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
     /**
      * Item size, a function indicates its a variable size list
      */

package/lib/ScrollerListEx.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { ScrollerList } from '@etsoo/react';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { Utils } from '@etsoo/shared';
 import { useTheme } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
@@ -112,7 +112,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemRenderer = (itemProps) => {
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemRenderer = (itemProps) => {
         const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
         return defaultItemRenderer({
             itemHeight,
@@ -163,5 +163,5 @@ export function ScrollerListEx(props) {
         return size + space;
     };
     // Layout
-    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
 }

package/lib/TableEx.js

@@ -51,7 +51,8 @@ export function TableEx(props) {
             ? (_a = columns.find((column) => column.field === defaultOrderBy)) === null || _a === void 0 ? void 0 : _a.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;
     // Reset the state and load again

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/ListMoreDisplay.tsx

@@ -92,7 +92,8 @@ export function ListMoreDisplay<
         orderBy: defaultOrderBy,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const ref = refs.current;
 
@@ -141,13 +142,14 @@ export function ListMoreDisplay<
         ref.currentPage = currentPage + 1;
 
         // Update rows
-        if (states.items == null || reset)
+        if (states.items == null || reset) {
             setStates({ items, completed: !hasNextPage });
-        else
+        } else {
             setStates({
                 items: [...states.items, ...items],
                 completed: !hasNextPage
             });
+        }
     };
 
     const reset = (data?: GridData) => {

package/src/ScrollerListEx.tsx

@@ -120,7 +120,7 @@ export type ScrollerListExItemSize =
 export type ScrollerListExProps<
     T extends object,
     D extends DataTypes.Keys<T>
-> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+> = Omit<ScrollerListProps<T, D>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -138,12 +138,6 @@ export type ScrollerListExProps<
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
-    /**
-     * Id field
-     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
-     */
-    idField?: D;
-
     /**
      * Item size, a function indicates its a variable size list
      */
@@ -302,8 +296,6 @@ export function ScrollerListEx<
         idField = 'id' as D,
         innerItemRenderer,
         itemSize,
-        itemKey = (index: number, data: T) =>
-            DataTypes.getIdValue1(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const [itemHeight, space, margins] = calculateItemSize(
                 itemProps.index
@@ -372,13 +364,13 @@ export function ScrollerListEx<
 
     // Layout
     return (
-        <ScrollerList<T>
+        <ScrollerList<T, D>
             className={Utils.mergeClasses(
                 'ScrollerListEx-Body',
                 className,
                 createGridStyle(alternatingColors, selectedColor)
             )}
-            itemKey={itemKey}
+            idField={idField}
             itemRenderer={itemRenderer}
             itemSize={itemSizeLocal}
             {...rest}

package/src/TableEx.tsx

@@ -163,7 +163,8 @@ export function TableEx<
             ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
             : undefined,
         batchSize: rowsPerPageLocal,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;