react-modal-sheet 1.3.2 → 1.5.0

package/src/index.tsx

@@ -1,3 +1,5 @@
+import { MotionValue } from 'framer-motion';
+
 import Sheet from './sheet';
 import SheetContainer from './SheetContainer';
 import SheetContent from './SheetContent';
@@ -5,6 +7,7 @@ import SheetHeader from './SheetHeader';
 import SheetBackdrop from './SheetBackdrop';
 
 export type SheetRef = {
+  y: MotionValue<number>;
   snapTo: (index: number) => void;
 };
 

package/src/sheet.tsx

@@ -4,12 +4,12 @@ import * as ReactDOM from 'react-dom';
 import {
   animate,
   useMotionValue,
-  AnimatePresence,
   PanInfo,
+  AnimatePresence,
 } from 'framer-motion';
 
-import { SheetProps } from './types';
-import { getClosest, isBrowser } from './utils';
+import { SheetContextType, SheetProps } from './types';
+import { getClosest, inDescendingOrder, isSSR, useWindowHeight } from './utils';
 import { SheetContext } from './context';
 import { useModalEffect } from './hooks';
 import styles from './styles';
@@ -34,12 +34,28 @@ const Sheet = React.forwardRef<any, SheetProps>(
     },
     ref
   ) => {
-    const [mounted, setMounted] = React.useState(false);
     const sheetRef = React.useRef<any>(null);
     const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore
     const indicatorRotation = useMotionValue(0);
-    const y = useMotionValue(isBrowser ? window.innerHeight : 0);
-    const pointerEvents = isOpen ? 'auto' : 'none';
+    const windowHeight = useWindowHeight();
+
+    // NOTE: the inital value for `y` doesn't matter since it is overwritten by
+    // the value driven by the `AnimatePresence` component when the sheet is opened
+    // and after that it is driven by the gestures and/or snapping
+    const y = useMotionValue(0);
+
+    if (snapPoints) {
+      // Convert negative / percentage snap points to absolute values
+      snapPoints = snapPoints.map(point => {
+        if (point > 0 && point <= 1) return point * windowHeight; // percentage values e.g. between 0.0 and 1.0
+        return point < 0 ? windowHeight + point : point; // negative values
+      });
+
+      console.assert(
+        inDescendingOrder(snapPoints) || windowHeight === 0,
+        `Snap points need to be in descending order got: [${snapPoints}]`
+      );
+    }
 
     const handleDrag = React.useCallback((_, { delta }: PanInfo) => {
       // Update drag indicator rotation based on drag velocity
@@ -89,18 +105,15 @@ const Sheet = React.forwardRef<any, SheetProps>(
       callbacks.current = { onOpenStart, onOpenEnd, onCloseStart, onCloseEnd };
     });
 
-    React.useEffect(() => {
-      setMounted(true);
-    }, []);
-
     // Trigger onSnap callback when sheet is opened or closed
     React.useEffect(() => {
-      if (!snapPoints || !onSnap || !mounted) return;
+      if (!snapPoints || !onSnap) return;
       const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
       onSnap(snapIndex);
-    }, [isOpen]);
+    }, [isOpen]); // eslint-disable-line
 
     React.useImperativeHandle(ref, () => ({
+      y,
       snapTo: (snapIndex: number) => {
         if (snapPoints && snapPoints[snapIndex] !== undefined) {
           const sheetEl = sheetRef.current as HTMLDivElement;
@@ -127,7 +140,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
           onDragEnd: handleDragEnd,
         };
 
-    const context = {
+    const context: SheetContextType = {
       y,
       sheetRef,
       isOpen,
@@ -136,38 +149,34 @@ const Sheet = React.forwardRef<any, SheetProps>(
       indicatorRotation,
       callbacks,
       dragProps,
+      windowHeight,
+      springConfig,
     };
 
     const wrapperProps = {
       ...rest,
       ref,
-      style: {
-        ...styles.wrapper,
-        pointerEvents,
-      } as any,
+      style: styles.wrapper,
     };
 
-    return mounted ? (
-      ReactDOM.createPortal(
-        <SheetContext.Provider value={context}>
-          <div {...wrapperProps}>
-            <AnimatePresence>
-              {/* NOTE: AnimatePresence requires us to set keys to children */}
-              {isOpen
-                ? React.Children.map(children, (child: any, i) =>
-                    React.cloneElement(child, { key: `sheet-child-${i}` })
-                  )
-                : null}
-            </AnimatePresence>
-          </div>
-        </SheetContext.Provider>,
-        document.body
-      )
-    ) : (
-      // NOTE: return the wrapper div so that SSR frameworks don't get confused
-      // with the HTML structure ("Expected server HTML to contain a matching <div>...")
-      <div {...wrapperProps} />
+    const sheet = (
+      <SheetContext.Provider value={context}>
+        <div {...wrapperProps}>
+          <AnimatePresence>
+            {/* NOTE: AnimatePresence requires us to set keys to children */}
+            {isOpen
+              ? React.Children.map(children, (child: any, i) =>
+                  React.cloneElement(child, { key: `sheet-child-${i}` })
+                )
+              : null}
+          </AnimatePresence>
+        </div>
+      </SheetContext.Provider>
     );
+
+    if (isSSR) return sheet;
+
+    return ReactDOM.createPortal(sheet, document.body);
   }
 );
 

package/src/styles.ts

@@ -9,6 +9,7 @@ const styles: { [key: string]: CSS.Properties } = {
     right: 0,
     zIndex: 9999999,
     overflow: 'hidden',
+    pointerEvents: 'none',
   },
   backdrop: {
     zIndex: 1,
@@ -32,6 +33,7 @@ const styles: { [key: string]: CSS.Properties } = {
     boxShadow: '0px -2px 16px rgba(0, 0, 0, 0.3)',
     display: 'flex',
     flexDirection: 'column',
+    pointerEvents: 'auto',
   },
   headerWrapper: {
     width: '100%',

package/src/types.tsx

@@ -65,4 +65,6 @@ export type SheetContextType = {
   indicatorRotation: MotionValue<number>;
   callbacks: React.MutableRefObject<SheetEvents>;
   dragProps: SheetDragProps;
+  windowHeight: number;
+  springConfig: Parameters<typeof useSpring>[1];
 };

package/src/utils.ts

@@ -1,4 +1,6 @@
-export const isBrowser = typeof window !== 'undefined';
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+export const isSSR = typeof window === 'undefined';
 
 export const getClosest = (nums: number[], goal: number) => {
   return nums.reduce((prev, curr) => {
@@ -67,3 +69,26 @@ export function cleanupRootStyles(rootId: string) {
     root.addEventListener('transitionend', onTransitionEnd);
   }
 }
+
+const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+
+export function useWindowHeight() {
+  const [windowHeight, setWindowHeight] = useState(0);
+
+  useIsomorphicLayoutEffect(() => {
+    const updateHeight = () => setWindowHeight(window.innerHeight);
+    window.addEventListener('resize', updateHeight);
+    updateHeight();
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
+
+  return windowHeight;
+}
+
+export const inDescendingOrder = (arr: number[]) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i + 1] > arr[i]) return false;
+  }
+
+  return true;
+};