react-modal-sheet 4.0.2 → 4.1.0

package/src/utils.ts

@@ -1,5 +1,53 @@
-import { type ForwardedRef, type RefCallback } from 'react';
+import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
+import { IS_SSR } from './constants';
 
+/**
+ * Get the rounded height of the sheet element and log a warning if the
+ * element is not mounted yet but the height is requested.
+ */
+export function getSheetHeight(sheetRef: RefObject<HTMLDivElement | null>) {
+  const sheetEl = sheetRef.current;
+
+  if (!sheetEl) {
+    console.warn(
+      'Sheet height is not available because the sheet element is not mounted yet.'
+    );
+    return 0;
+  }
+
+  return Math.round(sheetEl.getBoundingClientRect().height);
+}
+
+/**
+ * Convert negative / percentage snap points to absolute values
+ */
+export function getSnapPoints({
+  snapPointsProp,
+  sheetHeight,
+}: {
+  snapPointsProp: number[];
+  sheetHeight: number;
+}) {
+  const snapPointValues = snapPointsProp.map((point) => {
+    // Percentage values e.g. between 0.0 and 1.0
+    if (point > 0 && point <= 1) {
+      return Math.round(point * sheetHeight);
+    }
+
+    return point < 0 ? sheetHeight + point : point; // negative values
+  });
+
+  console.assert(
+    inDescendingOrder(snapPointValues) || sheetHeight === 0,
+    `Snap points need to be in descending order got: [${snapPointsProp.join(', ')}]`
+  );
+
+  return snapPointValues;
+}
+
+/**
+ * Get the closest number to the goal from the array of numbers.
+ */
 export function getClosest(nums: number[], goal: number) {
   let closest = nums[0];
   let minDifference = Math.abs(nums[0] - goal);
@@ -15,6 +63,10 @@ export function getClosest(nums: number[], goal: number) {
   return closest;
 }
 
+/**
+ * Check if the array is in descending order.
+ * This is used to validate the snap points.
+ */
 export function inDescendingOrder(arr: number[]) {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i + 1] > arr[i]) return false;
@@ -23,6 +75,37 @@ export function inDescendingOrder(arr: number[]) {
   return true;
 }
 
+/**
+ * Get the Y value of the given snap point. This can be passed to the `animate`
+ * function to animate the sheet to the given snap point.
+ */
+export function getSnapY({
+  sheetHeight,
+  snapPoints,
+  snapIndex,
+}: {
+  sheetHeight: number;
+  snapPoints: number[];
+  snapIndex: number;
+}) {
+  const snapPoint = snapPoints[snapIndex];
+
+  if (snapPoint === undefined) {
+    console.warn(
+      `Invalid snap index ${snapIndex}. Snap points are: [${snapPoints.join(', ')}]`
+    );
+    return null;
+  }
+
+  const y = validateSnapTo({ snapTo: sheetHeight - snapPoint, sheetHeight });
+
+  return y;
+}
+
+/**
+ * Make sure the snap point is not out of bounds.
+ * Snap points cannot be negative - `0` means the sheet is fully open.
+ */
 export function validateSnapTo({
   snapTo,
   sheetHeight,
@@ -32,9 +115,7 @@ export function validateSnapTo({
 }) {
   if (snapTo < 0) {
     console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${
-        sheetHeight + Math.abs(snapTo)
-      }.`
+      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
     );
   }
 
@@ -54,7 +135,7 @@ export function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T> {
 }
 
 export function isTouchDevice() {
-  if (typeof window === 'undefined') return false;
+  if (IS_SSR) return false;
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 }
 
@@ -86,11 +167,8 @@ const isIPhone = cached(function () {
 });
 
 const isIPad = cached(function () {
-  return (
-    testPlatform(/^iPad/i) ||
-    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
-    (isMac() && navigator.maxTouchPoints > 1)
-  );
+  // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  return testPlatform(/^iPad/i) || (isMac() && navigator.maxTouchPoints > 1);
 });
 
 export const isIOS = cached(function () {

package/src/hooks.tsx

@@ -1,197 +0,0 @@
-import {
-  type RefObject,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { type MotionValue, type BoundingBox, transform } from 'motion/react';
-
-import { IS_SSR } from './constants';
-import { type SheetEvents } from './types';
-
-export const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
-
-export function useModalEffect({
-  y,
-  rootId,
-  sheetRef,
-}: {
-  y: MotionValue<number>;
-  rootId?: string;
-  sheetRef: RefObject<HTMLDivElement | null>;
-}) {
-  const heightRef = useRef(IS_SSR ? 0 : window.innerHeight);
-
-  function setup() {
-    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-    const body = document.querySelector('body') as HTMLBodyElement;
-    if (!root) return;
-
-    body.style.backgroundColor = '#000';
-    root.style.overflow = 'hidden';
-    root.style.transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
-    root.style.transitionProperty = 'transform, border-radius';
-    root.style.transitionDuration = '0.5s';
-    root.style.transformOrigin = 'center top';
-  }
-
-  function cleanup() {
-    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-    const body = document.querySelector('body') as HTMLBodyElement;
-    if (!root) return;
-
-    setTimeout(() => {
-      body.style.removeProperty('background-color');
-      root.style.removeProperty('overflow');
-      root.style.removeProperty('transition-timing-function');
-      root.style.removeProperty('transition-property');
-      root.style.removeProperty('transition-duration');
-      root.style.removeProperty('transform-origin');
-      root.style.removeProperty('transform');
-      root.style.removeProperty('border-top-right-radius');
-      root.style.removeProperty('border-top-left-radius');
-    }, 100);
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (rootId) cleanup();
-    };
-  }, []);
-
-  useEffect(() => {
-    const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
-    if (!root) return;
-
-    function onCompleted() {
-      if (y.get() - 10 >= heightRef.current) cleanup();
-    }
-
-    const removeStartListener = y.on('animationStart', () => {
-      heightRef.current = sheetRef.current?.offsetHeight || window.innerHeight;
-      setup();
-    });
-
-    const removeChangeListener = y.on('change', (value) => {
-      if (root) {
-        const progress = Math.max(0, 1 - value / heightRef.current);
-        const pageWidth = window.innerWidth;
-        const scale = (pageWidth - 16) / pageWidth;
-        const ty = transform(progress, [0, 1], [0, 24]);
-        const s = transform(progress, [0, 1], [1, scale]);
-        const borderRadius = transform(progress, [0, 1], [0, 10]);
-        const inset = 'env(safe-area-inset-top)';
-
-        root.style.transform = `scale(${s}) translate3d(0, calc(${inset} + ${ty}px), 0)`; // prettier-ignore
-        root.style.borderTopRightRadius = `${borderRadius}px`;
-        root.style.borderTopLeftRadius = `${borderRadius}px`;
-      }
-    });
-
-    const removeCompleteListener = y.on('animationComplete', onCompleted);
-    const removeCancelListener = y.on('animationCancel', onCompleted);
-
-    return () => {
-      removeStartListener();
-      removeChangeListener();
-      removeCompleteListener();
-      removeCancelListener();
-    };
-  }, [y, rootId]);
-}
-
-export function useEventCallbacks(
-  isOpen: boolean,
-  callbacks: RefObject<SheetEvents>
-) {
-  const prevOpen = usePrevious(isOpen);
-  const didOpen = useRef(false);
-
-  // Because of AnimatePrecence we don't have access to latest isOpen value
-  // so we need to read and write to a ref to determine if we are
-  // opening or closing the sheet
-  const handleAnimationComplete = useCallback(() => {
-    if (!didOpen.current) {
-      callbacks.current.onOpenEnd?.();
-      didOpen.current = true;
-    } else {
-      callbacks.current.onCloseEnd?.();
-      didOpen.current = false;
-    }
-  }, [isOpen, prevOpen]);
-
-  useEffect(() => {
-    if (!prevOpen && isOpen) {
-      callbacks.current.onOpenStart?.();
-    } else if (!isOpen && prevOpen) {
-      callbacks.current.onCloseStart?.();
-    }
-  }, [isOpen, prevOpen]);
-
-  return { handleAnimationComplete };
-}
-
-export function useDimensions() {
-  const [dimensions, setDimensions] = useState({
-    height: !IS_SSR ? window.innerHeight : 0,
-    width: !IS_SSR ? window.innerWidth : 0,
-  });
-
-  useIsomorphicLayoutEffect(() => {
-    function handler() {
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      });
-    }
-
-    handler();
-
-    window.addEventListener('resize', handler);
-
-    return () => {
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-
-  return dimensions;
-}
-
-export function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>(undefined);
-
-  useEffect(() => {
-    ref.current = state;
-  });
-
-  return ref.current;
-}
-
-// Userland version of the `useEffectEvent` React hook:
-// RFC: https://react.dev/reference/react/experimental_useEffectEvent
-export function useEffectEvent<T extends (...args: any[]) => any>(handler: T) {
-  const handlerRef = useRef<T>(undefined);
-
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  });
-
-  return useCallback((...args: any[]) => {
-    const fn = handlerRef.current;
-    return fn?.(...args);
-  }, []) as T;
-}
-
-// This is a hacky way to fix a bug in motion/react where the drag
-// constraints are not updated when window is resized.
-// https://github.com/framer/motion/issues/1659
-const constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };
-
-export function useDragConstraints() {
-  const constraintsRef = useRef<any>(null);
-  const onMeasureDragConstraints = useCallback(() => constraints, []);
-  return { constraintsRef, onMeasureDragConstraints };
-}