@etsoo/react 1.5.87 → 1.5.90

package/lib/components/GridLoader.d.ts

@@ -107,4 +107,8 @@ export declare type GridLoaderStates<T> = GridLoadDataProps & {
      * Selected items of id
      */
     selectedItems: T[];
+    /**
+     * Id cache
+     */
+    idCache: Record<any, null>;
 };

package/lib/components/ScrollerGrid.js

@@ -24,7 +24,8 @@ export const ScrollerGrid = (props) => {
         orderByAsc: defaultOrderByAsc,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = refs.current;
     const ref = React.useRef(null);
@@ -60,14 +61,26 @@ export const ScrollerGrid = (props) => {
                         .splice(rows.length - state.lastLoadedItems, state.lastLoadedItems)
                         .concat(result)
                     : result;
+                state.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField];
+                    state.idCache[id] = null;
+                }
                 // Update rows
                 setRows(newRows);
             }
             else {
                 // Set current page
                 state.currentPage = state.currentPage + pageAdd;
-                // Update rows
-                setRows([...rows, ...result]);
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+                for (const item of result) {
+                    const id = item[idField];
+                    if (state.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+                setRows(newRows);
             }
         });
     };

package/lib/components/ScrollerList.d.ts

@@ -1,3 +1,4 @@
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import React from 'react';
 import { Align, ListChildComponentProps, ListProps } from 'react-window';
 import { GridLoader } from './GridLoader';
@@ -5,7 +6,7 @@ import { GridMethodRef } from './GridMethodRef';
 /**
  * Scroller vertical list props
  */
-export interface ScrollerListProps<T extends object> extends GridLoader<T>, Omit<ListProps<T>, 'ref' | 'outerRef' | 'height' | 'width' | 'children' | 'itemCount'> {
+export interface ScrollerListProps<T extends object, D extends DataTypes.Keys<T>> extends GridLoader<T>, Omit<ListProps<T>, 'ref' | 'outerRef' | 'height' | 'width' | 'children' | 'itemCount'> {
     /**
      * Default order by asc/desc
      */
@@ -26,6 +27,10 @@ export interface ScrollerListProps<T extends object> extends GridLoader<T>, Omit
      * Width of the list
      */
     width?: number | string;
+    /**
+     * Id field
+     */
+    idField?: D;
     /**
      * Item renderer
      */
@@ -59,5 +64,5 @@ export interface ScrollerListForwardRef<T> extends GridMethodRef<T>, ScrollerLis
  * @param props Props
  * @returns Component
  */
-export declare const ScrollerList: <T extends object>(props: ScrollerListProps<T>) => JSX.Element;
+export declare const ScrollerList: <T extends object, D extends DataTypes.Keys<T, string | number> = IdDefaultType<T>>(props: ScrollerListProps<T, D>) => JSX.Element;
 export {};

package/lib/components/ScrollerList.js

@@ -1,4 +1,4 @@
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import React from 'react';
 import { FixedSizeList, VariableSizeList } from 'react-window';
 import { useCombinedRefs } from '../uses/useCombinedRefs';
@@ -15,7 +15,7 @@ const calculateBatchSize = (height, itemSize) => {
  */
 export const ScrollerList = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, defaultOrderByAsc, height = document.documentElement.clientHeight, width = '100%', mRef, oRef, style = {}, idField = 'id', itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, ...rest } = props;
     // Style
     Object.assign(style, {
         width: '100%',
@@ -42,7 +42,8 @@ export const ScrollerList = (props) => {
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
         batchSize: GridSizeGet(loadBatchSize, height),
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;
     // Load data
@@ -77,13 +78,25 @@ export const ScrollerList = (props) => {
                         .splice(rows.length - state.lastLoadedItems, state.lastLoadedItems)
                         .concat(result)
                     : result;
+                state.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField];
+                    state.idCache[id] = null;
+                }
                 // Update rows
                 setRows(newRows);
             }
             else {
                 state.currentPage = state.currentPage + pageAdd;
-                // Update rows
-                setRows([...rows, ...result]);
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+                for (const item of result) {
+                    const id = item[idField];
+                    if (state.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+                setRows(newRows);
             }
         });
     };
@@ -180,5 +193,5 @@ export const ScrollerList = (props) => {
     if (state.currentPage === 0 && state.autoLoad)
         loadDataLocal();
     // Layout
-    return typeof itemSize === 'function' ? (React.createElement(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal)) : (React.createElement(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal));
+    return typeof itemSize === 'function' ? (React.createElement(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal)) : (React.createElement(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest }, itemRendererLocal));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.87",
+    "version": "1.5.90",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.2.89",
+        "@etsoo/appscript": "^1.2.91",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/shared": "^1.1.52",
-        "@types/react": "^18.0.18",
+        "@etsoo/shared": "^1.1.55",
+        "@types/react": "^18.0.19",
         "@types/react-dom": "^18.0.6",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
@@ -69,16 +69,16 @@
         "@babel/runtime-corejs3": "^7.19.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.0.0",
+        "@types/jest": "^29.0.1",
         "@typescript-eslint/eslint-plugin": "^5.36.2",
         "@typescript-eslint/parser": "^5.36.2",
-        "eslint": "^8.23.0",
+        "eslint": "^8.23.1",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.7",
-        "jest": "^28.1.3",
-        "jest-environment-jsdom": "^28.1.3",
-        "ts-jest": "^28.0.8",
-        "typescript": "^4.8.2"
+        "eslint-plugin-react": "^7.31.8",
+        "jest": "^29.0.3",
+        "jest-environment-jsdom": "^29.0.3",
+        "ts-jest": "^29.0.0",
+        "typescript": "^4.8.3"
     }
 }

package/src/components/GridLoader.ts

@@ -150,4 +150,9 @@ export type GridLoaderStates<T> = GridLoadDataProps & {
      * Selected items of id
      */
     selectedItems: T[];
+
+    /**
+     * Id cache
+     */
+    idCache: Record<any, null>;
 };

package/src/components/ScrollerGrid.tsx

@@ -190,7 +190,8 @@ export const ScrollerGrid = <
         orderByAsc: defaultOrderByAsc,
         batchSize: 10,
         loadedItems: 0,
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = refs.current;
 
@@ -237,14 +238,29 @@ export const ScrollerGrid = <
                           .concat(result)
                     : result;
 
+                state.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField] as any;
+                    state.idCache[id] = null;
+                }
+
                 // Update rows
                 setRows(newRows);
             } else {
                 // Set current page
                 state.currentPage = state.currentPage + pageAdd;
 
-                // Update rows
-                setRows([...rows, ...result]);
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+
+                for (const item of result) {
+                    const id = item[idField] as any;
+                    if (state.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+
+                setRows(newRows);
             }
         });
     };

package/src/components/ScrollerList.tsx

@@ -1,4 +1,4 @@
-import { Utils } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
 import React from 'react';
 import {
     Align,
@@ -20,8 +20,10 @@ import { GridMethodRef } from './GridMethodRef';
 /**
  * Scroller vertical list props
  */
-export interface ScrollerListProps<T extends object>
-    extends GridLoader<T>,
+export interface ScrollerListProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> extends GridLoader<T>,
         Omit<
             ListProps<T>,
             'ref' | 'outerRef' | 'height' | 'width' | 'children' | 'itemCount'
@@ -51,6 +53,11 @@ export interface ScrollerListProps<T extends object>
      */
     width?: number | string;
 
+    /**
+     * Id field
+     */
+    idField?: D;
+
     /**
      * Item renderer
      */
@@ -100,7 +107,12 @@ const calculateBatchSize = (
  * @param props Props
  * @returns Component
  */
-export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
+export const ScrollerList = <
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(
+    props: ScrollerListProps<T, D>
+) => {
     // Destruct
     const {
         autoLoad = true,
@@ -111,6 +123,7 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
         mRef,
         oRef,
         style = {},
+        idField = 'id' as D,
         itemRenderer,
         itemSize,
         loadBatchSize = calculateBatchSize(height, itemSize),
@@ -150,7 +163,8 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
         orderBy: defaultOrderBy,
         orderByAsc: defaultOrderByAsc,
         batchSize: GridSizeGet(loadBatchSize, height),
-        selectedItems: []
+        selectedItems: [],
+        idCache: {}
     });
     const state = stateRefs.current;
 
@@ -195,13 +209,28 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
                           .concat(result)
                     : result;
 
+                state.idCache = {};
+                for (const row of newRows) {
+                    const id = row[idField] as any;
+                    state.idCache[id] = null;
+                }
+
                 // Update rows
                 setRows(newRows);
             } else {
                 state.currentPage = state.currentPage + pageAdd;
 
-                // Update rows
-                setRows([...rows, ...result]);
+                // Update rows, avoid duplicate items
+                const newRows = [...rows];
+
+                for (const item of result) {
+                    const id = item[idField] as any;
+                    if (state.idCache[id] === undefined) {
+                        newRows.push(item);
+                    }
+                }
+
+                setRows(newRows);
             }
         });
     };
@@ -327,6 +356,9 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
             height={height}
             width={width}
             itemCount={itemCount}
+            itemKey={(index, data) =>
+                DataTypes.getIdValue1(data, idField) ?? index
+            }
             itemSize={itemSize}
             outerRef={refs}
             ref={listRef}
@@ -341,6 +373,9 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
             height={height}
             width={width}
             itemCount={itemCount}
+            itemKey={(index, data) =>
+                DataTypes.getIdValue1(data, idField) ?? index
+            }
             itemSize={itemSize}
             outerRef={refs}
             ref={listRef}