Merge pull request #7 from ShareChat/handle-window-resize

Handle window resize
ShareChat · Mar 21, 2022 · a654bbf · a654bbf
2 parents f05e7a6 + 05a4ff9
commit a654bbf
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/lib/SwipeableWrapper/index.jsx b/lib/SwipeableWrapper/index.jsx
@@ -9,8 +9,6 @@ import PropTypes from "prop-types";
 import { useDrag } from "@use-gesture/react";
 import { useLayoutEffect, useRaf } from "../helpers";
 
-const innerHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-
 const scrollToTop = () => {
   const isSmoothScrollSupported =
     "scrollBehavior" in document.documentElement.style;
@@ -60,9 +58,12 @@ const SwipeableWrapper = forwardRef(
         rAF(() => {
           onSlideChange(index.current);
           scrollToTop();
-          const height = innerHeight - elementRef.current.clientTop;
-          elementRef.current.children[prevIndex].style.height = `${height}px`;
-          elementRef.current.children[currIndex].style.height = "auto";
+          const { current: el = null } = elementRef;
+          if (el) {
+            const height = window.innerHeight - el.clientTop;
+            el.children[prevIndex].style.height = `${height}px`;
+            el.children[currIndex].style.height = "auto";
+          }
         });
         previousIndex.current = index.current;
       }
@@ -146,25 +147,38 @@ const SwipeableWrapper = forwardRef(
         pointer: { touch: true },
       },
     );
+
+    const recalculateStyles = useCallback(() => {
+      const { current: el = null } = elementRef;
+      if (el) {
+        totalWidth.current = Math.min(
+          el.parentElement.offsetWidth,
+          window.innerWidth,
+        );
+        const height = window.innerHeight - el.clientTop;
+        for (let i = 0; i < children.length; i += 1) {
+          el.children[i].style.height =
+            initialIndex === i ? "auto" : `${height}px`;
+        }
+      }
+    }, []);
+
     useLayoutEffect(() => {
       if (bottomBarRef?.current) {
         bottomBarRef.current.style.transition = "transform";
         bottomBarRef.current.style.transitionTimingFunction =
           transitionTimingFunction;
       }
       swipeToIndex(initialIndex, true);
-      const el = elementRef?.current;
+      recalculateStyles();
+      const { current: el = null } = elementRef;
       if (el) {
-        totalWidth.current = el.parentElement.offsetWidth;
-        const height = innerHeight - el.clientTop;
-        for (let i = 0; i < children.length; i += 1) {
-          el.children[i].style.height =
-            initialIndex === i ? "auto" : `${height}px`;
-        }
         el.ontransitionend = onRestFn;
       }
+      window.addEventListener("resize", recalculateStyles);
       return () => {
         el.ontransitionend = () => {};
+        window.removeEventListener("resize", recalculateStyles);
       };
     }, []);