@etsoo/react 1.5.85 → 1.5.88

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/lib/index.d.ts

@@ -21,6 +21,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/lib/index.js

@@ -26,6 +26,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/lib/uses/useSearchParamsEx.d.ts

@@ -0,0 +1,6 @@
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export declare function useSearchParamsEx<T extends DataTypes.BasicTemplate>(template: T): DataTypes.BasicTemplateType<T>;

package/lib/uses/useSearchParamsEx.js

@@ -0,0 +1,16 @@
+import { DomUtils } from '@etsoo/shared';
+import { useSearchParams } from 'react-router-dom';
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export function useSearchParamsEx(template) {
+    // Get parameters
+    const [sp] = useSearchParams();
+    const paras = Object.fromEntries(Object.keys(template).map((key) => {
+        const type = template[key];
+        return [key, type.endsWith('[]') ? sp.getAll(key) : sp.get(key)];
+    }));
+    // Return
+    return DomUtils.dataAs(paras, template, false);
+}

package/lib/uses/useWindowScroll.js

@@ -6,8 +6,8 @@ import React from 'react';
 export const useWindowScroll = () => {
     // State
     const [pos, setPos] = React.useState({
-        x: window.pageXOffset,
-        y: window.pageYOffset
+        x: window.scrollX,
+        y: window.scrollY
     });
     React.useEffect(() => {
         let ticking = false;
@@ -15,8 +15,8 @@ export const useWindowScroll = () => {
         let requestAnimationFrameSeed = 0;
         const scrollHandler = () => {
             lastPos = {
-                x: window.pageXOffset,
-                y: window.pageYOffset
+                x: window.scrollX,
+                y: window.scrollY
             };
             if (!ticking) {
                 requestAnimationFrameSeed = window.requestAnimationFrame(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.85",
+    "version": "1.5.88",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -48,12 +48,12 @@
         "@dnd-kit/core": "^6.0.5",
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/css": "^11.10.0",
-        "@emotion/react": "^11.10.0",
-        "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.88",
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
+        "@etsoo/appscript": "^1.2.89",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/shared": "^1.1.51",
-        "@types/react": "^18.0.17",
+        "@etsoo/shared": "^1.1.52",
+        "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
         "@types/react-window": "^1.8.5",
         "react": "^18.2.0",
@@ -63,19 +63,19 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.13",
+        "@babel/core": "^7.19.0",
         "@babel/plugin-transform-runtime": "^7.18.10",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/runtime-corejs3": "^7.18.9",
+        "@babel/preset-env": "^7.19.0",
+        "@babel/runtime-corejs3": "^7.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.3.0",
-        "@types/jest": "^28.1.8",
-        "@typescript-eslint/eslint-plugin": "^5.35.1",
-        "@typescript-eslint/parser": "^5.35.1",
+        "@testing-library/react": "^13.4.0",
+        "@types/jest": "^29.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.36.2",
+        "@typescript-eslint/parser": "^5.36.2",
         "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.1",
+        "eslint-plugin-react": "^7.31.7",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
         "ts-jest": "^28.0.8",

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}

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
+export * from './uses/useSearchParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/src/uses/useSearchParamsEx.ts

@@ -0,0 +1,22 @@
+import { DataTypes, DomUtils } from '@etsoo/shared';
+import { useSearchParams } from 'react-router-dom';
+
+/**
+ * Extended useSearchParams of react-router-dom
+ * Provide exact type data
+ */
+export function useSearchParamsEx<T extends DataTypes.BasicTemplate>(
+    template: T
+) {
+    // Get parameters
+    const [sp] = useSearchParams();
+    const paras = Object.fromEntries(
+        Object.keys(template).map((key) => {
+            const type = template[key];
+            return [key, type.endsWith('[]') ? sp.getAll(key) : sp.get(key)];
+        })
+    );
+
+    // Return
+    return DomUtils.dataAs(paras, template, false);
+}

package/src/uses/useWindowScroll.ts

@@ -12,8 +12,8 @@ interface IScrollPos {
 export const useWindowScroll = () => {
     // State
     const [pos, setPos] = React.useState<IScrollPos>({
-        x: window.pageXOffset,
-        y: window.pageYOffset
+        x: window.scrollX,
+        y: window.scrollY
     });
 
     React.useEffect(() => {
@@ -23,8 +23,8 @@ export const useWindowScroll = () => {
 
         const scrollHandler = () => {
             lastPos = {
-                x: window.pageXOffset,
-                y: window.pageYOffset
+                x: window.scrollX,
+                y: window.scrollY
             };
 
             if (!ticking) {