react-modal-sheet 5.2.1 → 5.2.3

package/src/debug.ts

@@ -0,0 +1,37 @@
+/**
+ * This library runs on mobile devices so we can't use console.log for debugging. Instead, we can use this function to send debug information to a remote server or store it locally on the device.
+ * Instead display the "payload" in a fixed position element on the screen
+ * and hide it when that element is clicked. Create the element if it doesn't exist,
+ * and update its content with the payload (any JSON data).
+ */
+export function debug(payload: any) {
+  let debugElement = document.getElementById('debug-element');
+
+  if (!debugElement) {
+    debugElement = document.createElement('div');
+    debugElement.id = 'debug-element';
+    debugElement.style.position = 'fixed';
+    debugElement.style.bottom = '0';
+    debugElement.style.left = '0';
+    debugElement.style.width = '100%';
+    debugElement.style.maxHeight = '50%';
+    debugElement.style.overflowY = 'auto';
+    debugElement.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+    debugElement.style.color = 'white';
+    debugElement.style.padding = '10px';
+    debugElement.style.fontSize = '12px';
+    debugElement.style.zIndex = '9999';
+    debugElement.style.cursor = 'pointer';
+    document.body.appendChild(debugElement);
+
+    debugElement.addEventListener('click', () => {
+      if (debugElement) {
+        debugElement.style.display =
+          debugElement.style.display === 'none' ? 'block' : 'none';
+      }
+    });
+  }
+
+  debugElement.textContent = JSON.stringify(payload, null, 2);
+  debugElement.style.display = 'block';
+}

package/src/hooks/use-scroll-position.ts

@@ -1,4 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { debug } from '../debug';
+import { useStableCallback } from './use-stable-callback';
 
 type UseScrollPositionOptions = {
   /**
@@ -46,68 +48,80 @@ type UseScrollPositionOptions = {
 export function useScrollPosition(options: UseScrollPositionOptions = {}) {
   const { debounceDelay = 32, isEnabled = true } = options;
 
+  const scrollTimeoutRef = useRef<number | null>(null);
   const [element, setElement] = useState<HTMLElement | null>(null);
   const [scrollPosition, setScrollPosition] = useState<
     'top' | 'bottom' | 'middle' | undefined
   >(undefined);
 
-  useEffect(() => {
-    if (!element || !isEnabled) return;
+  const scrollRef = useMemo(
+    () => (element: HTMLElement | null) => {
+      setElement(element);
+    },
+    []
+  );
+
+  const determineScrollPosition = useStableCallback((element: HTMLElement) => {
+    const { scrollTop, scrollHeight, clientHeight } = element;
+    const isScrollable = scrollHeight > clientHeight;
+
+    if (!isScrollable) {
+      // Reset scroll position if the content is not scrollable anymore
+      if (scrollPosition) setScrollPosition(undefined);
+      return;
+    }
 
-    let scrollTimeout: number | null = null;
+    const isAtTop = scrollTop <= 0;
+    const isAtBottom =
+      Math.ceil(scrollHeight) - Math.ceil(scrollTop) ===
+      Math.ceil(clientHeight);
 
-    function determineScrollPosition(element: HTMLElement) {
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      const isScrollable = scrollHeight > clientHeight;
+    let position: 'top' | 'bottom' | 'middle';
 
-      if (!isScrollable) {
-        // Reset scroll position if the content is not scrollable anymore
-        if (scrollPosition) setScrollPosition(undefined);
-        return;
-      }
+    if (isAtTop) {
+      position = 'top';
+    } else if (isAtBottom) {
+      position = 'bottom';
+    } else {
+      position = 'middle';
+    }
 
-      const isAtTop = scrollTop <= 0;
-      const isAtBottom =
-        Math.ceil(scrollHeight) - Math.ceil(scrollTop) ===
-        Math.ceil(clientHeight);
+    // Let browser only handle downward pan gestures (scrolling content up)
+    element.style.touchAction = isAtTop ? 'pan-down' : '';
 
-      let position: 'top' | 'bottom' | 'middle';
+    if (position === scrollPosition) return;
+    setScrollPosition(position);
+  });
 
-      if (isAtTop) {
-        position = 'top';
-      } else if (isAtBottom) {
-        position = 'bottom';
-      } else {
-        position = 'middle';
-      }
+  const onScroll = useStableCallback((event: Event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const el = event.currentTarget;
 
-      if (position === scrollPosition) return;
-      setScrollPosition(position);
-    }
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
 
-    function onScroll(event: Event) {
-      if (event.currentTarget instanceof HTMLElement) {
-        const el = event.currentTarget;
-
-        if (scrollTimeout) clearTimeout(scrollTimeout);
-
-        if (debounceDelay === 0) {
-          determineScrollPosition(el);
-        } else {
-          // Debounce the scroll handler
-          scrollTimeout = setTimeout(
-            () => determineScrollPosition(el),
-            debounceDelay
-          );
-        }
+      if (debounceDelay === 0) {
+        determineScrollPosition(el);
+      } else {
+        // Debounce the scroll handler
+        scrollTimeoutRef.current = setTimeout(
+          () => determineScrollPosition(el),
+          debounceDelay
+        );
       }
     }
-
-    function onTouchStart(event: Event) {
-      if (event.currentTarget instanceof HTMLElement) {
-        determineScrollPosition(event.currentTarget);
-      }
+  });
+
+  const onTouchStart = useStableCallback((event: Event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const element = event.currentTarget;
+      requestAnimationFrame(() => {
+        determineScrollPosition(element);
+      });
     }
+  });
+
+  useEffect(() => {
+    if (!element || !isEnabled) return;
 
     // Determine initial scroll position
     determineScrollPosition(element);
@@ -116,14 +130,14 @@ export function useScrollPosition(options: UseScrollPositionOptions = {}) {
     element.addEventListener('touchstart', onTouchStart);
 
     return () => {
-      if (scrollTimeout) clearTimeout(scrollTimeout);
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
       element.removeEventListener('scroll', onScroll);
       element.removeEventListener('touchstart', onTouchStart);
     };
   }, [element, isEnabled]);
 
   return {
-    scrollRef: (element: HTMLElement | null) => setElement(element),
+    scrollRef,
     scrollPosition,
   };
 }

package/src/types.tsx

@@ -23,10 +23,9 @@ type CommonProps = {
   unstyled?: boolean;
 };
 
-type MotionCommonProps = Omit<
-  ComponentPropsWithoutRef<typeof motion.div>,
-  'initial' | 'animate' | 'exit'
->;
+type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+
+type MotionCommonProps = Omit<MotionDivProps, 'initial' | 'animate' | 'exit'>;
 
 export interface SheetTweenConfig {
   ease: EasingDefinition;
@@ -79,7 +78,7 @@ export type SheetContentProps = MotionCommonProps &
     scrollStyle?: MotionProps['style'];
   };
 
-export type SheetBackdropProps = MotionCommonProps & CommonProps;
+export type SheetBackdropProps = MotionDivProps & CommonProps;
 
 export type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> &
   CommonProps;