feat: add one snap point change per one swipe

Author: IslamRustamov

src/components/bottomSheet/BottomSheet.tsx

@@ -75,6 +75,7 @@ import {
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INPUT_MODE,
+  DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   INITIAL_CONTAINER_HEIGHT,
   INITIAL_CONTAINER_OFFSET,
@@ -108,6 +109,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enablePanDownToClose = DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
       enableDynamicSizing = DEFAULT_DYNAMIC_SIZING,
+      enableOneSnapPointPerSwipe = DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
       overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
       overrideReduceMotion: _providedOverrideReduceMotion,
 
@@ -1360,6 +1362,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         animatedAnimationState,
         animatedSheetState,
         animatedScrollableState,
@@ -1424,6 +1427,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         enableDynamicSizing,
         _providedSimultaneousHandlers,
         _providedWaitFor,

src/components/bottomSheet/constants.ts

@@ -14,6 +14,7 @@ const DEFAULT_ENABLE_OVER_DRAG = true;
 const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = true;
 const DEFAULT_DYNAMIC_SIZING = true;
+const DEFAULT_ONE_SNAP_POINT_PER_SWIPE = false;
 
 // keyboard
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
@@ -41,6 +42,7 @@ const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
 export {
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
+  DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,

src/components/bottomSheet/types.d.ts

@@ -89,6 +89,13 @@ export interface BottomSheetProps
    * @default true
    */
   enableDynamicSizing?: boolean;
+  /**
+   * Enable change of one snap point per one swipe.
+   * Works only with default Gesture Events Handlers.
+   * @type boolean
+   * @default false
+   */
+  enableOneSnapPointPerSwipe?: boolean;
   /**
    * To start the sheet closed and snap to initial index when it's mounted.
    * @type boolean

src/contexts/internal.ts

@@ -25,6 +25,7 @@ export interface BottomSheetInternalContextType
         | 'enablePanDownToClose'
         | 'enableDynamicSizing'
         | 'overDragResistanceFactor'
+        | 'enableOneSnapPointPerSwipe'
       >
     > {
   // animated states

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -56,6 +56,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       animatedScrollableContentOffsetY,
       enableOverDrag,
       enablePanDownToClose,
+      enableOneSnapPointPerSwipe,
       overDragResistanceFactor,
       isInTemporaryPosition,
       isScrollableRefreshable,
@@ -125,10 +126,25 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
           highestSnapPoint = context.value.initialPosition;
         }
 
-        const lowestSnapPoint = enablePanDownToClose
+        let lowestSnapPoint = enablePanDownToClose
           ? animatedContainerHeight.value
           : animatedSnapPoints.value[0];
 
+        if (enableOneSnapPointPerSwipe) {
+          const currentIndex = animatedSnapPoints.value.indexOf(
+            context.value.initialPosition
+          );
+
+          const nextIndex = Math.min(
+            currentIndex + 1,
+            animatedSnapPoints.value.length - 1
+          );
+          const prevIndex = Math.max(currentIndex - 1, 0);
+
+          highestSnapPoint = animatedSnapPoints.value[nextIndex];
+          lowestSnapPoint = animatedSnapPoints.value[prevIndex];
+        }
+
         /**
          * if scrollable is refreshable and sheet position at the highest
          * point, then do not interact with current gesture.
@@ -368,6 +384,24 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
           return;
         }
 
+        if (enableOneSnapPointPerSwipe) {
+          const currentIndex = snapPoints.indexOf(destinationPoint);
+          const prevIndex = snapPoints.indexOf(context.value.initialPosition);
+
+          if (Math.abs(prevIndex - currentIndex) - 1) {
+            const newIndex =
+              prevIndex > currentIndex ? currentIndex + 1 : currentIndex - 1;
+
+            animateToPosition(
+              snapPoints[newIndex],
+              ANIMATION_SOURCE.GESTURE,
+              velocityY / 2
+            );
+
+            return;
+          }
+        }
+
         animateToPosition(
           destinationPoint,
           ANIMATION_SOURCE.GESTURE,