@etsoo/react 1.8.78 → 1.8.80

package/lib/cjs/components/ScrollerList.js

@@ -158,7 +158,7 @@ const ScrollerList = (props) => {
                 localRef.current?.scrollToRow(param);
             }
         };
-    }, []);
+    }, [rows]);
     // When layout ready
     react_1.default.useEffect(() => {
         // Return clear function

package/lib/cjs/uses/useDimensions.d.ts

@@ -13,5 +13,6 @@ interface states {
 export declare function useDimensions(elements: number, updateCallback?: (target: Element, rect: DOMRect) => boolean | void, miliseconds?: number, equalCallback?: (d1?: DOMRect, d2?: DOMRect) => boolean): {
     dimensions: [React.RefCallback<Element>, Element?, DOMRect?][];
     state: states;
+    clear: () => void;
 };
 export {};

package/lib/cjs/uses/useDimensions.js

@@ -85,14 +85,15 @@ function useDimensions(elements, updateCallback, miliseconds = 50, equalCallback
             delayed.call(undefined, update);
         }
     });
+    // Clear the observer
+    const clear = () => {
+        resizeObserver.disconnect();
+        delayed.clear();
+    };
     // Layout ready
     react_1.default.useEffect(() => {
-        return () => {
-            // Clear the observer
-            resizeObserver.disconnect();
-            delayed.clear();
-        };
+        return clear;
     }, []);
     // Return
-    return { dimensions: dimensions.current, state };
+    return { dimensions: dimensions.current, state, clear };
 }

package/lib/mjs/components/ScrollerList.js

@@ -152,7 +152,7 @@ export const ScrollerList = (props) => {
                 localRef.current?.scrollToRow(param);
             }
         };
-    }, []);
+    }, [rows]);
     // When layout ready
     React.useEffect(() => {
         // Return clear function

package/lib/mjs/uses/useDimensions.d.ts

@@ -13,5 +13,6 @@ interface states {
 export declare function useDimensions(elements: number, updateCallback?: (target: Element, rect: DOMRect) => boolean | void, miliseconds?: number, equalCallback?: (d1?: DOMRect, d2?: DOMRect) => boolean): {
     dimensions: [React.RefCallback<Element>, Element?, DOMRect?][];
     state: states;
+    clear: () => void;
 };
 export {};

package/lib/mjs/uses/useDimensions.js

@@ -79,14 +79,15 @@ export function useDimensions(elements, updateCallback, miliseconds = 50, equalC
             delayed.call(undefined, update);
         }
     });
+    // Clear the observer
+    const clear = () => {
+        resizeObserver.disconnect();
+        delayed.clear();
+    };
     // Layout ready
     React.useEffect(() => {
-        return () => {
-            // Clear the observer
-            resizeObserver.disconnect();
-            delayed.clear();
-        };
+        return clear;
     }, []);
     // Return
-    return { dimensions: dimensions.current, state };
+    return { dimensions: dimensions.current, state, clear };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/react",
-  "version": "1.8.78",
+  "version": "1.8.80",
   "description": "TypeScript ReactJs UI Independent Framework",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/components/ScrollerList.tsx

@@ -231,40 +231,36 @@ export const ScrollerList = <T extends object>(props: ScrollerListProps<T>) => {
     if (stateRefs.current.isMounted !== false) setRows(items, true);
   };
 
-  React.useImperativeHandle(
-    mRef,
-    () => {
-      return {
-        get element() {
-          return localRef.current?.element;
-        },
-        delete(index) {
-          const item = rows.at(index);
-          if (item) {
-            const newRows = [...rows];
-            newRows.splice(index, 1);
-            setRows(newRows);
-          }
-          return item;
-        },
-        insert(item, start) {
+  React.useImperativeHandle(mRef, () => {
+    return {
+      get element() {
+        return localRef.current?.element;
+      },
+      delete(index) {
+        const item = rows.at(index);
+        if (item) {
           const newRows = [...rows];
-          newRows.splice(start, 0, item);
+          newRows.splice(index, 1);
           setRows(newRows);
-        },
-        refresh(): void {
-          loadDataLocal(0);
-        },
+        }
+        return item;
+      },
+      insert(item, start) {
+        const newRows = [...rows];
+        newRows.splice(start, 0, item);
+        setRows(newRows);
+      },
+      refresh(): void {
+        loadDataLocal(0);
+      },
 
-        reset,
+      reset,
 
-        scrollToRow(param: ScrollToRowParam): void {
-          localRef.current?.scrollToRow(param);
-        }
-      };
-    },
-    []
-  );
+      scrollToRow(param: ScrollToRowParam): void {
+        localRef.current?.scrollToRow(param);
+      }
+    };
+  }, [rows]);
 
   // When layout ready
   React.useEffect(() => {

package/src/uses/useDimensions.ts

@@ -25,6 +25,7 @@ export function useDimensions(
 ): {
   dimensions: [React.RefCallback<Element>, Element?, DOMRect?][];
   state: states;
+  clear: () => void;
 } {
   // State
   const [state, setState] = React.useState<states>({
@@ -111,15 +112,17 @@ export function useDimensions(
     }
   });
 
+  // Clear the observer
+  const clear = () => {
+    resizeObserver.disconnect();
+    delayed.clear();
+  };
+
   // Layout ready
   React.useEffect(() => {
-    return () => {
-      // Clear the observer
-      resizeObserver.disconnect();
-      delayed.clear();
-    };
+    return clear;
   }, []);
 
   // Return
-  return { dimensions: dimensions.current, state };
+  return { dimensions: dimensions.current, state, clear };
 }