@etsoo/react 1.6.63 → 1.6.64

package/lib/components/GridColumn.d.ts

@@ -81,7 +81,7 @@ export type GridCellRendererProps<T, P = any> = GridCellFormatterProps<T> & {
      * Set items for rerenderer
      * @param callback Callback
      */
-    setItems: (callback: (items: T[], ref?: React.Ref<ScrollerGridForwardRef<T>>) => T[] | undefined | void) => void;
+    setItems: (callback: ((items: T[]) => T[] | undefined | void) | ((items: T[], ref: ScrollerGridForwardRef<T>) => T[] | undefined | void)) => void;
 };
 /**
  * Grid header cell renderer props

package/lib/components/ScrollerGrid.d.ts

@@ -12,7 +12,7 @@ export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>,
      * Set items for rerenderer
      * @param callback Callback
      */
-    setItems: (callback: (items: T[], ref?: React.Ref<ScrollerGridForwardRef<T>>) => T[] | undefined | void) => void;
+    setItems: (callback: (items: T[], ref: ScrollerGridForwardRef<T>) => T[] | undefined | void) => void;
     /**
      * Data
      */

package/lib/components/ScrollerGrid.js

@@ -95,7 +95,7 @@ export const ScrollerGrid = (props) => {
             data,
             selectedItems: state.selectedItems,
             setItems: (callback) => {
-                const result = callback(rows, mRef);
+                const result = callback(rows, instance);
                 if (result == null)
                     return;
                 setRows(result);
@@ -131,7 +131,7 @@ export const ScrollerGrid = (props) => {
         if (state.isMounted !== false)
             setRows([]);
     };
-    React.useImperativeHandle(mRef, () => ({
+    const instance = {
         scrollTo(params) {
             var _a;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(params);
@@ -189,7 +189,8 @@ export const ScrollerGrid = (props) => {
             var _a;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.resetAfterRowIndex(index, shouldForceUpdate);
         }
-    }), [rows]);
+    };
+    React.useImperativeHandle(mRef, () => instance, [rows]);
     React.useEffect(() => {
         return () => {
             state.isMounted = false;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.6.63",
+    "version": "1.6.64",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/components/GridColumn.ts

@@ -121,10 +121,12 @@ export type GridCellRendererProps<T, P = any> = GridCellFormatterProps<T> & {
      * @param callback Callback
      */
     setItems: (
-        callback: (
-            items: T[],
-            ref?: React.Ref<ScrollerGridForwardRef<T>>
-        ) => T[] | undefined | void
+        callback:
+            | ((items: T[]) => T[] | undefined | void)
+            | ((
+                  items: T[],
+                  ref: ScrollerGridForwardRef<T>
+              ) => T[] | undefined | void)
     ) => void;
 };
 

package/src/components/ScrollerGrid.tsx

@@ -26,7 +26,7 @@ export type ScrollerGridItemRendererProps<T> = Omit<
     setItems: (
         callback: (
             items: T[],
-            ref?: React.Ref<ScrollerGridForwardRef<T>>
+            ref: ScrollerGridForwardRef<T>
         ) => T[] | undefined | void
     ) => void;
 
@@ -293,10 +293,10 @@ export const ScrollerGrid = <
             setItems: (
                 callback: (
                     items: T[],
-                    ref?: React.Ref<ScrollerGridForwardRef<T>>
+                    ref: ScrollerGridForwardRef<T>
                 ) => T[] | undefined | void
             ) => {
-                const result = callback(rows, mRef);
+                const result = callback(rows, instance);
                 if (result == null) return;
                 setRows(result);
             }
@@ -336,74 +336,72 @@ export const ScrollerGrid = <
         if (state.isMounted !== false) setRows([]);
     };
 
-    React.useImperativeHandle(
-        mRef,
-        () => ({
-            scrollTo(params: { scrollLeft: number; scrollTop: number }) {
-                ref.current?.scrollTo(params);
-            },
-            scrollToItem(params: {
-                align?: Align | undefined;
-                columnIndex?: number | undefined;
-                rowIndex?: number | undefined;
-            }) {
-                ref.current?.scrollToItem(params);
-            },
-            select(rowIndex: number) {
-                // Select only one item
-                const selectedItems = state.selectedItems;
-                selectedItems[0] = rows[rowIndex];
-
-                if (onSelectChange) onSelectChange(selectedItems);
-            },
-            selectAll(checked: boolean) {
-                const selectedItems = state.selectedItems;
-
-                rows.forEach((row) => {
-                    const index = selectedItems.findIndex(
-                        (selectedItem) => selectedItem[idField] === row[idField]
-                    );
-
-                    if (checked) {
-                        if (index === -1) selectedItems.push(row);
-                    } else if (index !== -1) {
-                        selectedItems.splice(index, 1);
-                    }
-                });
-
-                if (onSelectChange) onSelectChange(selectedItems);
-            },
-            selectItem(item: T, checked: boolean) {
-                const selectedItems = state.selectedItems;
+    const instance: ScrollerGridForwardRef<T> = {
+        scrollTo(params: { scrollLeft: number; scrollTop: number }) {
+            ref.current?.scrollTo(params);
+        },
+        scrollToItem(params: {
+            align?: Align | undefined;
+            columnIndex?: number | undefined;
+            rowIndex?: number | undefined;
+        }) {
+            ref.current?.scrollToItem(params);
+        },
+        select(rowIndex: number) {
+            // Select only one item
+            const selectedItems = state.selectedItems;
+            selectedItems[0] = rows[rowIndex];
+
+            if (onSelectChange) onSelectChange(selectedItems);
+        },
+        selectAll(checked: boolean) {
+            const selectedItems = state.selectedItems;
+
+            rows.forEach((row) => {
                 const index = selectedItems.findIndex(
-                    (selectedItem) => selectedItem[idField] === item[idField]
+                    (selectedItem) => selectedItem[idField] === row[idField]
                 );
 
                 if (checked) {
-                    if (index === -1) selectedItems.push(item);
-                } else {
-                    if (index !== -1) selectedItems.splice(index, 1);
+                    if (index === -1) selectedItems.push(row);
+                } else if (index !== -1) {
+                    selectedItems.splice(index, 1);
                 }
-
-                if (onSelectChange) onSelectChange(selectedItems);
-            },
-            reset,
-            resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean) {
-                ref.current?.resetAfterColumnIndex(index, shouldForceUpdate);
-            },
-            resetAfterIndices(params: {
-                columnIndex: number;
-                rowIndex: number;
-                shouldForceUpdate?: boolean | undefined;
-            }) {
-                ref.current?.resetAfterIndices(params);
-            },
-            resetAfterRowIndex(index: number, shouldForceUpdate?: boolean) {
-                ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
+            });
+
+            if (onSelectChange) onSelectChange(selectedItems);
+        },
+        selectItem(item: T, checked: boolean) {
+            const selectedItems = state.selectedItems;
+            const index = selectedItems.findIndex(
+                (selectedItem) => selectedItem[idField] === item[idField]
+            );
+
+            if (checked) {
+                if (index === -1) selectedItems.push(item);
+            } else {
+                if (index !== -1) selectedItems.splice(index, 1);
             }
-        }),
-        [rows]
-    );
+
+            if (onSelectChange) onSelectChange(selectedItems);
+        },
+        reset,
+        resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean) {
+            ref.current?.resetAfterColumnIndex(index, shouldForceUpdate);
+        },
+        resetAfterIndices(params: {
+            columnIndex: number;
+            rowIndex: number;
+            shouldForceUpdate?: boolean | undefined;
+        }) {
+            ref.current?.resetAfterIndices(params);
+        },
+        resetAfterRowIndex(index: number, shouldForceUpdate?: boolean) {
+            ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
+        }
+    };
+
+    React.useImperativeHandle(mRef, () => instance, [rows]);
 
     React.useEffect(() => {
         return () => {