@mustmove/bottom-sheet 1.0.0

package/src/hooks/useScrollEventsHandlersDefault.ts

@@ -0,0 +1,167 @@
+import { useCallback } from 'react';
+import { State } from 'react-native-gesture-handler';
+import { scrollTo } from 'react-native-reanimated';
+import { ANIMATION_STATUS, SCROLLABLE_STATUS, SHEET_STATE } from '../constants';
+import type {
+  ScrollEventHandlerCallbackType,
+  ScrollEventsHandlersHookType,
+} from '../types';
+import { useBottomSheetInternal } from './useBottomSheetInternal';
+
+export type ScrollEventContextType = {
+  initialContentOffsetY: number;
+  shouldLockInitialPosition: boolean;
+};
+
+export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
+  scrollableRef,
+  scrollableContentOffsetY
+) => {
+  // hooks
+  const {
+    animatedSheetState,
+    animatedScrollableState,
+    animatedScrollableStatus,
+    animatedAnimationState,
+    animatedHandleGestureState,
+  } = useBottomSheetInternal();
+
+  //#region callbacks
+  const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
+    useCallback(
+      ({ contentOffset: { y } }, context) => {
+        'worklet';
+        /**
+         * if sheet position is extended or fill parent, then we reset
+         * `shouldLockInitialPosition` value to false.
+         */
+        if (
+          animatedSheetState.value === SHEET_STATE.EXTENDED ||
+          animatedSheetState.value === SHEET_STATE.FILL_PARENT
+        ) {
+          context.shouldLockInitialPosition = false;
+        }
+
+        /**
+         * if handle gesture state is active, then we capture the offset y position
+         * and lock the scrollable with it.
+         */
+        if (animatedHandleGestureState.value === State.ACTIVE) {
+          context.shouldLockInitialPosition = true;
+          context.initialContentOffsetY = y;
+        }
+
+        if (animatedScrollableStatus.value === SCROLLABLE_STATUS.LOCKED) {
+          const lockPosition = context.shouldLockInitialPosition
+            ? (context.initialContentOffsetY ?? 0)
+            : 0;
+          // @ts-ignore
+          scrollTo(scrollableRef, 0, lockPosition, false);
+          scrollableContentOffsetY.value = lockPosition;
+          return;
+        }
+      },
+      [
+        scrollableRef,
+        scrollableContentOffsetY,
+        animatedScrollableStatus,
+        animatedSheetState,
+        animatedHandleGestureState,
+      ]
+    );
+  const handleOnBeginDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
+    useCallback(
+      ({ contentOffset: { y } }, context) => {
+        'worklet';
+        scrollableContentOffsetY.value = y;
+        context.initialContentOffsetY = y;
+        animatedScrollableState.set(state => ({
+          ...state,
+          contentOffsetY: y,
+        }));
+
+        /**
+         * if sheet position not extended or fill parent and the scrollable position
+         * not at the top, then we should lock the initial scrollable position.
+         */
+        if (
+          animatedSheetState.value !== SHEET_STATE.EXTENDED &&
+          animatedSheetState.value !== SHEET_STATE.FILL_PARENT &&
+          y > 0
+        ) {
+          context.shouldLockInitialPosition = true;
+        } else {
+          context.shouldLockInitialPosition = false;
+        }
+      },
+      [scrollableContentOffsetY, animatedSheetState, animatedScrollableState]
+    );
+  const handleOnEndDrag: ScrollEventHandlerCallbackType<ScrollEventContextType> =
+    useCallback(
+      ({ contentOffset: { y } }, context) => {
+        'worklet';
+        if (animatedScrollableStatus.value === SCROLLABLE_STATUS.LOCKED) {
+          const lockPosition = context.shouldLockInitialPosition
+            ? (context.initialContentOffsetY ?? 0)
+            : 0;
+          // @ts-ignore
+          scrollTo(scrollableRef, 0, lockPosition, false);
+          scrollableContentOffsetY.value = lockPosition;
+          return;
+        }
+
+        if (animatedAnimationState.get().status !== ANIMATION_STATUS.RUNNING) {
+          scrollableContentOffsetY.value = y;
+          animatedScrollableState.set(state => ({
+            ...state,
+            contentOffsetY: y,
+          }));
+        }
+      },
+      [
+        scrollableRef,
+        scrollableContentOffsetY,
+        animatedAnimationState,
+        animatedScrollableStatus,
+        animatedScrollableState,
+      ]
+    );
+  const handleOnMomentumEnd: ScrollEventHandlerCallbackType<ScrollEventContextType> =
+    useCallback(
+      ({ contentOffset: { y } }, context) => {
+        'worklet';
+        if (animatedScrollableStatus.value === SCROLLABLE_STATUS.LOCKED) {
+          const lockPosition = context.shouldLockInitialPosition
+            ? (context.initialContentOffsetY ?? 0)
+            : 0;
+          // @ts-ignore
+          scrollTo(scrollableRef, 0, lockPosition, false);
+          scrollableContentOffsetY.value = 0;
+          return;
+        }
+
+        if (animatedAnimationState.get().status !== ANIMATION_STATUS.RUNNING) {
+          scrollableContentOffsetY.value = y;
+          animatedScrollableState.set(state => ({
+            ...state,
+            contentOffsetY: y,
+          }));
+        }
+      },
+      [
+        scrollableContentOffsetY,
+        scrollableRef,
+        animatedAnimationState,
+        animatedScrollableStatus,
+        animatedScrollableState,
+      ]
+    );
+  //#endregion
+
+  return {
+    handleOnScroll,
+    handleOnBeginDrag,
+    handleOnEndDrag,
+    handleOnMomentumEnd,
+  };
+};

package/src/hooks/useScrollHandler.ts

@@ -0,0 +1,72 @@
+import {
+  runOnJS,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+import type { Scrollable, ScrollableEvent } from '../types';
+import { workletNoop as noop } from '../utilities';
+import { useScrollEventsHandlersDefault } from './useScrollEventsHandlersDefault';
+
+export const useScrollHandler = (
+  useScrollEventsHandlers = useScrollEventsHandlersDefault,
+  onScroll?: ScrollableEvent,
+  onScrollBeginDrag?: ScrollableEvent,
+  onScrollEndDrag?: ScrollableEvent
+) => {
+  // refs
+  const scrollableRef = useAnimatedRef<Scrollable>();
+
+  // variables
+  const scrollableContentOffsetY = useSharedValue<number>(0);
+
+  // hooks
+  const {
+    handleOnScroll = noop,
+    handleOnBeginDrag = noop,
+    handleOnEndDrag = noop,
+    handleOnMomentumEnd = noop,
+    handleOnMomentumBegin = noop,
+  } = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY);
+
+  // callbacks
+  const scrollHandler = useAnimatedScrollHandler(
+    {
+      onScroll: (event, context) => {
+        handleOnScroll(event, context);
+
+        if (onScroll) {
+          runOnJS(onScroll)({ nativeEvent: event });
+        }
+      },
+      onBeginDrag: (event, context) => {
+        handleOnBeginDrag(event, context);
+
+        if (onScrollBeginDrag) {
+          runOnJS(onScrollBeginDrag)({ nativeEvent: event });
+        }
+      },
+      onEndDrag: (event, context) => {
+        handleOnEndDrag(event, context);
+
+        if (onScrollEndDrag) {
+          runOnJS(onScrollEndDrag)({ nativeEvent: event });
+        }
+      },
+      onMomentumBegin: handleOnMomentumBegin,
+      onMomentumEnd: handleOnMomentumEnd,
+    },
+    [
+      handleOnScroll,
+      handleOnBeginDrag,
+      handleOnEndDrag,
+      handleOnMomentumBegin,
+      handleOnMomentumEnd,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+    ]
+  );
+
+  return { scrollHandler, scrollableRef, scrollableContentOffsetY };
+};

package/src/hooks/useScrollHandler.web.ts

@@ -0,0 +1,181 @@
+import { type TouchEvent, useEffect, useRef } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { ANIMATION_STATUS, SCROLLABLE_STATUS } from '../constants';
+import type { Scrollable, ScrollableEvent } from '../types';
+import { findNodeHandle } from '../utilities/findNodeHandle.web';
+import { useBottomSheetInternal } from './useBottomSheetInternal';
+
+export type ScrollEventContextType = {
+  initialContentOffsetY: number;
+  shouldLockInitialPosition: boolean;
+};
+
+export const useScrollHandler = (_: never, onScroll?: ScrollableEvent) => {
+  //#region refs
+  const scrollableRef = useRef<Scrollable>(null);
+  //#endregion
+
+  //#region variables
+  const scrollableContentOffsetY = useSharedValue<number>(0);
+  //#endregion
+
+  //#region hooks
+  const {
+    animatedScrollableState,
+    animatedScrollableStatus,
+    animatedAnimationState,
+  } = useBottomSheetInternal();
+  //#endregion
+
+  //#region effects
+  useEffect(() => {
+    // biome-ignore lint: to be addressed!
+    const element = findNodeHandle(scrollableRef.current) as any;
+    let scrollOffset = 0;
+    let supportsPassive = false;
+    let maybePrevent = false;
+    let lastTouchY = 0;
+
+    let initialContentOffsetY = 0;
+    const shouldLockInitialPosition = false;
+
+    function handleOnTouchStart(event: TouchEvent) {
+      if (event.touches.length !== 1) {
+        return;
+      }
+
+      initialContentOffsetY = element.scrollTop;
+      lastTouchY = event.touches[0].clientY;
+      maybePrevent = scrollOffset <= 0;
+    }
+
+    function handleOnTouchMove(event: TouchEvent) {
+      if (
+        animatedScrollableStatus.value === SCROLLABLE_STATUS.LOCKED &&
+        event.cancelable
+      ) {
+        return event.preventDefault();
+      }
+
+      if (maybePrevent) {
+        maybePrevent = false;
+
+        const touchY = event.touches[0].clientY;
+        const touchYDelta = touchY - lastTouchY;
+
+        if (touchYDelta > 0 && event.cancelable) {
+          return event.preventDefault();
+        }
+      }
+
+      return true;
+    }
+
+    function handleOnTouchEnd() {
+      if (animatedScrollableStatus.value === SCROLLABLE_STATUS.LOCKED) {
+        const lockPosition = shouldLockInitialPosition
+          ? (initialContentOffsetY ?? 0)
+          : 0;
+        element.scroll({
+          top: 0,
+          left: 0,
+          behavior: 'instant',
+        });
+        scrollableContentOffsetY.value = lockPosition;
+        return;
+      }
+    }
+
+    function handleOnScroll(event: TouchEvent) {
+      scrollOffset = element.scrollTop;
+
+      if (animatedAnimationState.get().status !== ANIMATION_STATUS.RUNNING) {
+        const contentOffsetY = Math.max(0, scrollOffset);
+        scrollableContentOffsetY.value = contentOffsetY;
+        animatedScrollableState.set(state => ({
+          ...state,
+          contentOffsetY,
+        }));
+      }
+
+      if (scrollOffset <= 0 && event.cancelable) {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+      }
+      return true;
+    }
+
+    try {
+      // @ts-ignore
+      window.addEventListener('test', null, {
+        // @ts-ignore
+        // biome-ignore lint: to be addressed
+        get passive() {
+          supportsPassive = true;
+        },
+      });
+    } catch (_e) {}
+
+    element.addEventListener(
+      'touchstart',
+      handleOnTouchStart,
+      supportsPassive
+        ? {
+            passive: true,
+          }
+        : false
+    );
+
+    element.addEventListener(
+      'touchmove',
+      handleOnTouchMove,
+      supportsPassive
+        ? {
+            passive: false,
+          }
+        : false
+    );
+
+    element.addEventListener(
+      'touchend',
+      handleOnTouchEnd,
+      supportsPassive
+        ? {
+            passive: false,
+          }
+        : false
+    );
+
+    element.addEventListener(
+      'scroll',
+      handleOnScroll,
+      supportsPassive
+        ? {
+            passive: false,
+          }
+        : false
+    );
+
+    return () => {
+      // @ts-ignore
+      window.removeEventListener('test', null);
+      element.removeEventListener('touchstart', handleOnTouchStart);
+      element.removeEventListener('touchmove', handleOnTouchMove);
+      element.removeEventListener('touchend', handleOnTouchEnd);
+      element.removeEventListener('scroll', handleOnScroll);
+    };
+  }, [
+    animatedAnimationState,
+    animatedScrollableState,
+    animatedScrollableStatus,
+    scrollableContentOffsetY,
+  ]);
+  //#endregion
+
+  return {
+    scrollHandler: onScroll,
+    scrollableRef,
+    scrollableContentOffsetY,
+  };
+};

package/src/hooks/useScrollable.ts

@@ -0,0 +1,131 @@
+import { type RefObject, useCallback, useRef } from 'react';
+import type { NodeHandle } from 'react-native';
+import {
+  type SharedValue,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import {
+  ANIMATION_STATUS,
+  KEYBOARD_STATUS,
+  SCROLLABLE_STATUS,
+  SCROLLABLE_TYPE,
+  SHEET_STATE,
+} from '../constants';
+import type {
+  AnimationState,
+  KeyboardState,
+  Scrollable,
+  ScrollableRef,
+  ScrollableState,
+} from '../types';
+import { findNodeHandle } from '../utilities';
+
+export const useScrollable = (
+  enableContentPanningGesture: boolean,
+  animatedSheetState: SharedValue<SHEET_STATE>,
+  animatedKeyboardState: SharedValue<KeyboardState>,
+  animatedAnimationState: SharedValue<AnimationState>
+) => {
+  //#region refs
+  const scrollableRef = useRef<ScrollableRef>(null);
+  const previousScrollableRef = useRef<ScrollableRef>(null);
+  //#endregion
+
+  //#region variables
+  const state = useSharedValue<ScrollableState>({
+    type: SCROLLABLE_TYPE.UNDETERMINED,
+    contentOffsetY: 0,
+    refreshable: false,
+  });
+  const status = useDerivedValue<SCROLLABLE_STATUS>(() => {
+    /**
+     * if user had disabled content panning gesture, then we unlock
+     * the scrollable state.
+     */
+    if (!enableContentPanningGesture) {
+      return SCROLLABLE_STATUS.UNLOCKED;
+    }
+
+    /**
+     * if sheet state is fill parent, then unlock scrolling
+     */
+    if (animatedSheetState.value === SHEET_STATE.FILL_PARENT) {
+      return SCROLLABLE_STATUS.UNLOCKED;
+    }
+
+    /**
+     * if sheet state is extended, then unlock scrolling
+     */
+    if (animatedSheetState.value === SHEET_STATE.EXTENDED) {
+      return SCROLLABLE_STATUS.UNLOCKED;
+    }
+
+    /**
+     * if keyboard is shown and sheet is animating
+     * then we do not lock the scrolling to not lose
+     * current scrollable scroll position.
+     */
+    if (
+      animatedKeyboardState.get().status === KEYBOARD_STATUS.SHOWN &&
+      animatedAnimationState.get().status === ANIMATION_STATUS.RUNNING
+    ) {
+      return SCROLLABLE_STATUS.UNLOCKED;
+    }
+
+    return SCROLLABLE_STATUS.LOCKED;
+  }, [
+    enableContentPanningGesture,
+    animatedSheetState,
+    animatedKeyboardState,
+    animatedAnimationState,
+    state,
+  ]);
+  //#endregion
+
+  //#region callbacks
+  const setScrollableRef = useCallback((ref: ScrollableRef) => {
+    // get current node handle id
+    const currentRefId = scrollableRef.current?.id ?? null;
+
+    if (currentRefId !== ref.id) {
+      if (scrollableRef.current) {
+        // @ts-ignore
+        previousScrollableRef.current = scrollableRef.current;
+      }
+      // @ts-ignore
+      scrollableRef.current = ref;
+    }
+  }, []);
+
+  const removeScrollableRef = useCallback((ref: RefObject<Scrollable>) => {
+    // find node handle id
+    let id: NodeHandle | null;
+    try {
+      id = findNodeHandle(ref.current);
+    } catch {
+      return;
+    }
+
+    // get current node handle id
+    const currentRefId = scrollableRef.current?.id ?? null;
+
+    /**
+     * @DEV
+     * when the incoming node is actually the current node, we reset
+     * the current scrollable ref to the previous one.
+     */
+    if (id === currentRefId) {
+      // @ts-ignore
+      scrollableRef.current = previousScrollableRef.current;
+    }
+  }, []);
+  //#endregion
+
+  return {
+    state,
+    status,
+    setScrollableRef,
+    removeScrollableRef,
+  };
+};

package/src/hooks/useScrollableSetter.ts

@@ -0,0 +1,56 @@
+import type React from 'react';
+import { useCallback, useEffect } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { SCROLLABLE_TYPE } from '../constants';
+import type { Scrollable } from '../types';
+import { findNodeHandle } from '../utilities';
+import { useBottomSheetInternal } from './useBottomSheetInternal';
+
+export const useScrollableSetter = (
+  ref: React.RefObject<Scrollable>,
+  type: SCROLLABLE_TYPE,
+  contentOffsetY: SharedValue<number>,
+  refreshable: boolean,
+  useFocusHook = useEffect
+) => {
+  // hooks
+  const { animatedScrollableState, setScrollableRef, removeScrollableRef } =
+    useBottomSheetInternal();
+
+  // callbacks
+  const handleSettingScrollable = useCallback(() => {
+    // set current content offset
+    animatedScrollableState.set(state => ({
+      ...state,
+      contentOffsetY: contentOffsetY.value,
+      type,
+      refreshable,
+    }));
+
+    // set current scrollable ref
+    const id = findNodeHandle(ref.current);
+    if (id) {
+      setScrollableRef({
+        id: id,
+        node: ref,
+      });
+    } else {
+      console.warn(`Couldn't find the scrollable node handle id!`);
+    }
+
+    return () => {
+      removeScrollableRef(ref);
+    };
+  }, [
+    ref,
+    type,
+    refreshable,
+    contentOffsetY,
+    animatedScrollableState,
+    setScrollableRef,
+    removeScrollableRef,
+  ]);
+
+  // effects
+  useFocusHook(handleSettingScrollable);
+};

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+
+type Callback<T extends unknown[], R> = (...args: T) => R;
+
+/**
+ * Provide a stable version of useCallback.
+ */
+export function useStableCallback<T extends unknown[], R>(
+  callback: Callback<T, R>
+) {
+  const callbackRef = useRef<Callback<T, R>>();
+
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  useEffect(() => {
+    return () => {
+      callbackRef.current = undefined;
+    };
+  }, []);
+
+  return useCallback<Callback<T, R | undefined>>((...args) => {
+    return callbackRef.current?.(...args);
+  }, []);
+}