feat: new onResize event

wellyshen · May 27, 2021 · 919144d · 919144d
1 parent 71b89d0
commit 919144d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/small-frogs-leave.md b/.changeset/small-frogs-leave.md
@@ -0,0 +1,5 @@
+---
+"react-cool-virtual": patch
+---
+
+feat: new `onResize` event
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -48,6 +48,10 @@ export interface OnScroll {
   }): void;
 }
 
+export interface OnResize {
+  (event: { width: number; height: number }): void;
+}
+
 export interface Item {
   readonly key?: string;
   readonly index: number;
@@ -99,6 +103,7 @@ export interface Options {
   isItemLoaded?: IsItemLoaded;
   loadMore?: LoadMore;
   onScroll?: OnScroll;
+  onResize?: OnResize;
 }
 
 export interface Return<O, I> {

diff --git a/src/types/react-cool-virtual.d.ts b/src/types/react-cool-virtual.d.ts
@@ -45,6 +45,15 @@ declare module "react-cool-virtual" {
     (event: OnScrollEvent): void;
   }
 
+  export interface OnResizeEvent {
+    width: number;
+    height: number;
+  }
+
+  export interface OnResize {
+    (event: OnResizeEvent): void;
+  }
+
   export interface MeasureRef {
     (el: HTMLElement | null): void;
   }
@@ -99,6 +108,7 @@ declare module "react-cool-virtual" {
     isItemLoaded?: IsItemLoaded;
     loadMore?: LoadMore;
     onScroll?: OnScroll;
+    onResize?: OnResize;
   }
 
   export interface Return<

diff --git a/src/useVirtual.ts b/src/useVirtual.ts
@@ -9,6 +9,7 @@ import {
   LoadMore,
   Measure,
   OnScroll,
+  OnResize,
   Options,
   Return,
   ScrollEasingFunction,
@@ -73,10 +74,11 @@ export default <
   scrollDuration = 500,
   scrollEasingFunction = easeInOutCubic,
   keyExtractor,
-  onScroll,
   loadMoreThreshold = 15,
   isItemLoaded,
   loadMore,
+  onScroll,
+  onResize,
 }: Options): Return<O, I> => {
   const [items, setItems] = useState<Item[]>(() =>
     getInitItems(ssrItemCount, keyExtractor)
@@ -96,9 +98,10 @@ export default <
   const easingFnRef = useLatest<ScrollEasingFunction>(scrollEasingFunction);
   const keyExtractorRef = useLatest<KeyExtractor | undefined>(keyExtractor);
   const itemSizeRef = useLatest<ItemSize>(itemSize);
-  const onScrollRef = useLatest<OnScroll | undefined>(onScroll);
   const isItemLoadedRef = useRef<IsItemLoaded | undefined>(isItemLoaded);
   const loadMoreRef = useLatest<LoadMore | undefined>(loadMore);
+  const onScrollRef = useLatest<OnScroll | undefined>(onScroll);
+  const onResizeRef = useLatest<OnResize | undefined>(onResize);
   const sizeKey = !horizontal ? "height" : "width";
   const itemSizeKey = !horizontal ? "blockSize" : "inlineSize";
   const marginKey = !horizontal ? "marginTop" : "marginLeft";
@@ -431,6 +434,8 @@ export default <
 
       handleScroll(scrollOffsetRef.current);
 
+      if (onResizeRef.current) onResizeRef.current(rect);
+
       const { current: msData } = msDataRef;
       const ratio =
         !isSameWidth &&