react-modal-sheet 4.4.0 → 5.1.0

package/src/utils.ts

@@ -1,161 +1,20 @@
-import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
+import { type CSSProperties, type ForwardedRef, type RefCallback } from 'react';
 import { IS_SSR } from './constants';
-import type { SheetDetent } from './types';
 
-/**
- * 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;
+export function applyStyles(
+  styles: { base: CSSProperties; decorative: CSSProperties },
+  unstyled: boolean
+) {
+  return unstyled ? styles.base : { ...styles.base, ...styles.decorative };
 }
 
-export function getClosestSnapPoint({
-  snapPoints,
-  currentY,
-  sheetHeight,
-  detent,
-}: {
-  snapPoints: number[];
-  currentY: number;
-  sheetHeight: number;
-  detent?: SheetDetent;
-}) {
-  // Inverse values are the values that can be passed to `animate`
-  const snapInverse = snapPoints.map(
-    (p) => sheetHeight - Math.min(p, sheetHeight)
-  );
-
-  // Allow snapping to the top of the sheet if detent is set to `content-height`
-  if (detent === 'content-height' && !snapInverse.includes(0)) {
-    snapInverse.unshift(0);
-  }
-
-  // Get the closest snap point
-  const snapTo = getClosest(snapInverse, currentY);
-  const snapIndex = snapInverse.indexOf(snapTo);
-
-  const snapY = validateSnapTo({
-    snapTo: getClosest(snapInverse, currentY),
-    sheetHeight,
-  });
-
-  return { snapY, snapIndex };
-}
-
-/**
- * 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);
-
-  for (let i = 1; i < nums.length; i++) {
-    const difference = Math.abs(nums[i] - goal);
-    if (difference < minDifference) {
-      closest = nums[i];
-      minDifference = difference;
-    }
-  }
-
-  return closest;
-}
-
-/**
- * Check if the array is in descending order.
- * This is used to validate the snap points.
- */
-export function inDescendingOrder(arr: number[]) {
+export function isAscendingOrder(arr: number[]) {
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i]) return false;
+    if (arr[i + 1] < arr[i]) return false;
   }
-
   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,
-}: {
-  snapTo: number;
-  sheetHeight: number;
-}) {
-  if (snapTo < 0) {
-    console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
-    );
-  }
-
-  return Math.max(Math.round(snapTo), 0);
-}
-
 export function mergeRefs<T = any>(refs: ForwardedRef<T>[]): RefCallback<T> {
   return (value: any) => {
     refs.forEach((ref: any) => {

package/src/SheetScroller.tsx

@@ -1,96 +0,0 @@
-import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';
-import { motion, type MotionStyle } from 'motion/react';
-
-import { useSheetContext, useSheetScrollerContext } from './context';
-import { type SheetScrollerProps } from './types';
-import { isTouchDevice } from './utils';
-import { styles } from './styles';
-
-export const SheetScroller = forwardRef<any, SheetScrollerProps>(
-  (
-    {
-      autoPadding = true,
-      disableScroll = false,
-      draggableAt = 'top',
-      children,
-      style: styleProp,
-      className = '',
-      ...rest
-    },
-    ref
-  ) => {
-    const { y } = useSheetContext();
-    const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
-
-    function determineDragState(element: HTMLDivElement) {
-      /**
-       * If the caller is managing the scrollability of the element,
-       * enable the dragging of the sheet content.
-       */
-      if (disableScroll) {
-        setDragEnabled();
-        return;
-      }
-
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      const isScrollable = scrollHeight > clientHeight;
-
-      if (!isScrollable) return;
-
-      const isAtTop = scrollTop <= 0;
-      const isAtBottom = scrollHeight - scrollTop === clientHeight;
-
-      const shouldEnable =
-        (draggableAt === 'top' && isAtTop) ||
-        (draggableAt === 'bottom' && isAtBottom) ||
-        (draggableAt === 'both' && (isAtTop || isAtBottom));
-
-      if (shouldEnable) {
-        setDragEnabled();
-      } else {
-        setDragDisabled();
-      }
-    }
-
-    function onScroll(event: UIEvent<HTMLDivElement>) {
-      determineDragState(event.currentTarget);
-      if (rest.onScroll) rest.onScroll(event);
-    }
-
-    function onTouchStart(event: TouchEvent<HTMLDivElement>) {
-      determineDragState(event.currentTarget);
-      if (rest.onTouchStart) rest.onTouchStart(event);
-    }
-
-    const scrollProps = isTouchDevice()
-      ? { onScroll, onTouchStart }
-      : undefined;
-
-    const style: MotionStyle = {
-      ...styles.scroller,
-      ...styleProp,
-    };
-
-    if (autoPadding) {
-      style.paddingBottom = y;
-    }
-
-    if (disableScroll) {
-      style.overflowY = 'hidden';
-    }
-
-    return (
-      <motion.div
-        {...rest}
-        ref={ref}
-        className={`react-modal-sheet-scroller ${className}`}
-        style={style}
-        {...scrollProps}
-      >
-        {children}
-      </motion.div>
-    );
-  }
-);
-
-SheetScroller.displayName = 'SheetScroller';

package/src/hooks/use-event-callbacks.ts

@@ -1,44 +0,0 @@
-import { type RefObject, useCallback, useEffect, useRef } from 'react';
-
-import { type SheetEvents } from '../types';
-
-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 };
-}
-
-function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>(undefined);
-
-  useEffect(() => {
-    ref.current = state;
-  });
-
-  return ref.current;
-}