react-modal-sheet 1.3.1 → 1.4.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.1",
+  "version": "1.4.2",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",
@@ -32,7 +32,7 @@
     "release": "np"
   },
   "peerDependencies": {
-    "framer-motion": "2.x || 3.x || 4.x",
+    "framer-motion": "2.x || 3.x || 4.x || 5.x",
     "react": ">=16"
   },
   "husky": {
@@ -50,18 +50,18 @@
     "yarn": true
   },
   "devDependencies": {
-    "@types/react": "16.9.35",
-    "@types/react-dom": "16.9.8",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.7",
     "csstype": "3.0.6",
-    "framer-motion": "4.1.3",
+    "framer-motion": "5.4.4",
     "husky": "4.2.5",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "styled-components": "5.2.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "styled-components": "5.3.3",
     "tsdx": "0.14.1",
     "tslib": "2.1.0",
-    "typescript": "4.1.5"
+    "typescript": "4.5.2"
   },
   "dependencies": {
     "react-merge-refs": "1.1.0"

package/src/SheetBackdrop.tsx

@@ -9,13 +9,14 @@ const isClickable = (props: any) => !!props.onClick || !!props.onTap;
 const SheetBackdrop = React.forwardRef<any, SheetBackdropProps>(
   ({ style = {}, ...rest }, ref) => {
     const Comp = isClickable(rest) ? motion.button : motion.div;
+    const pointerEvents = isClickable(rest) ? 'auto' : 'none';
 
     return (
       <Comp
         {...rest}
         ref={ref}
         className="react-modal-sheet-backdrop"
-        style={{ ...styles.backdrop, ...style }}
+        style={{ ...styles.backdrop, ...style, pointerEvents }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}

package/src/SheetContainer.tsx

@@ -18,6 +18,8 @@ const SheetContainer = React.forwardRef<any, SheetContainerProps>(
       snapPoints,
       initialSnap = 0,
       sheetRef,
+      windowHeight,
+      springConfig,
     } = useSheetContext();
 
     const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);
@@ -31,9 +33,12 @@ const SheetContainer = React.forwardRef<any, SheetContainerProps>(
         ref={mergeRefs([sheetRef, ref])}
         className="react-modal-sheet-container"
         style={{ ...styles.container, height: sheetHeight, ...style, y }}
-        initial={{ y: window.innerHeight }}
-        animate={{ y: initialY, transition: { type: 'tween' } }}
-        exit={{ y: window.innerHeight }}
+        initial={{ y: windowHeight }}
+        animate={{
+          y: initialY,
+          transition: { type: 'spring', ...springConfig },
+        }}
+        exit={{ y: windowHeight }}
         onAnimationComplete={handleAnimationComplete}
       >
         {children}

package/src/sheet.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import {
-  useSpring,
+  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,30 +34,33 @@ const Sheet = React.forwardRef<any, SheetProps>(
     },
     ref
   ) => {
-    const [mounted, setMounted] = React.useState(false);
-    const [isDragging, setDragging] = React.useState(false);
     const sheetRef = React.useRef<any>(null);
     const callbacks = React.useRef({ onOpenStart, onOpenEnd, onCloseStart, onCloseEnd }); // prettier-ignore
     const indicatorRotation = useMotionValue(0);
-    const sheetDragY = useMotionValue(isBrowser ? window.innerHeight : 0);
-    const sheetSpringY = useSpring(sheetDragY, springConfig);
-    const y = isDragging ? sheetDragY : sheetSpringY;
-    const pointerEvents = isOpen ? 'auto' : 'none';
+    const windowHeight = useWindowHeight();
+    const y = useMotionValue(isOpen ? windowHeight : 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
-      const velocity = sheetDragY.getVelocity();
+      const velocity = y.getVelocity();
       if (velocity > 0) indicatorRotation.set(10);
       if (velocity < 0) indicatorRotation.set(-10);
 
       // Make sure user cannot drag beyond the top of the sheet
-      sheetDragY.set(Math.max(sheetDragY.get() + delta.y, 0));
-    }, []); // eslint-disable-line
-
-    const handleDragStart = React.useCallback(() => {
-      // Sync the drag value with the spring value so that dragging start at the correct y position
-      sheetDragY.set(sheetSpringY.get());
-      setDragging(true);
+      y.set(Math.max(y.get() + delta.y, 0));
     }, []); // eslint-disable-line
 
     const handleDragEnd = React.useCallback(
@@ -69,16 +72,13 @@ const Sheet = React.forwardRef<any, SheetProps>(
           const sheetEl = sheetRef.current as HTMLDivElement;
           const contentHeight = sheetEl.getBoundingClientRect().height;
           const snapTo = snapPoints
-            ? getClosest(
-                snapPoints.map(p => contentHeight - p),
-                sheetDragY.get()
-              )
-            : sheetDragY.get() / contentHeight > 0.6 // Close if dragged over 60%
+            ? getClosest(snapPoints.map(p => contentHeight - p), y.get()) // prettier-ignore
+            : y.get() / contentHeight > 0.6 // Close if dragged over 60%
             ? contentHeight
             : 0;
 
           // Update the spring value so that the sheet is animated to the snap point
-          sheetSpringY.set(snapTo);
+          animate(y, snapTo, { type: 'spring', ...springConfig });
 
           if (snapPoints && onSnap) {
             const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
@@ -87,8 +87,6 @@ const Sheet = React.forwardRef<any, SheetProps>(
           }
 
           if (snapTo >= contentHeight) onClose();
-
-          setDragging(false);
         }
 
         // Reset indicator rotation after dragging
@@ -103,16 +101,12 @@ 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, () => ({
       snapTo: (snapIndex: number) => {
@@ -121,7 +115,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
           const contentHeight = sheetEl.getBoundingClientRect().height;
           const snapTo = contentHeight - snapPoints[snapIndex];
 
-          sheetSpringY.set(snapTo);
+          animate(y, snapTo, { type: 'spring', ...springConfig });
           if (onSnap) onSnap(snapIndex);
           if (snapTo >= contentHeight) onClose();
         }
@@ -138,52 +132,46 @@ const Sheet = React.forwardRef<any, SheetProps>(
           dragConstraints: { top: 0, bottom: 0 },
           dragMomentum: false,
           onDrag: handleDrag,
-          onDragStart: handleDragStart,
           onDragEnd: handleDragEnd,
         };
 
-    const context = {
+    const context: SheetContextType = {
       y,
       sheetRef,
       isOpen,
-      isDragging,
       initialSnap,
       snapPoints,
       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

@@ -59,11 +59,12 @@ export type SheetDragProps = {
 export type SheetContextType = {
   y: MotionValue<any>;
   sheetRef: React.MutableRefObject<any>;
-  isDragging: boolean;
   isOpen: boolean;
   snapPoints: SheetProps['snapPoints'];
   initialSnap: SheetProps['initialSnap'];
   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;
+};