refactor: removed deprecated props (#452)

* chore: removed closeOnPress from BottomSheetBackdrop * chore: removed animationEasing & animationDuration from BottomSheet * chore: removed unused code from useScrollableInternal * chore: format code
gorhom · May 23, 2021 · 993f936 · 993f936
1 parent 28856b7
commit 993f936
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 205 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -1,6 +1,5 @@
 import React, {
   useMemo,
-  useRef,
   useCallback,
   forwardRef,
   useImperativeHandle,
@@ -54,8 +53,6 @@ import {
   print,
 } from '../../utilities';
 import {
-  DEFAULT_ANIMATION_EASING,
-  DEFAULT_ANIMATION_DURATION,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
@@ -91,9 +88,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region extract props
     const {
       // animations configurations
-      animationDuration:
-        _providedAnimationDuration = DEFAULT_ANIMATION_DURATION,
-      animationEasing: _providedAnimationEasing = DEFAULT_ANIMATION_EASING,
       animationConfigs: _providedAnimationConfigs = DEFAULT_ANIMATION_CONFIGS,
 
       // configurations
@@ -234,6 +228,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         isSnapPointsNormalized
       );
     });
+    const isSheetClosing = useSharedValue(false);
     const isInTemporaryPosition = useSharedValue(false);
     //#endregion
 
@@ -422,13 +417,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     });
     //#endregion
 
-    //#region variables
-    /**
-     * @TODO remove this
-     */
-    const isClosing = useRef(false);
-    //#endregion
-
     //#region private methods
     const refreshUIElements = useCallback(() => {
       const currentPositionIndex = Math.max(animatedCurrentIndex.value, 0);
@@ -457,18 +445,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           },
         });
 
-        if (isClosing.current && (index === 0 || index === -1)) {
-          isClosing.current = false;
+        if (isSheetClosing.value && (index === 0 || index === -1)) {
+          isSheetClosing.value = false;
         }
 
         if (_providedOnChange) {
-          /**
-           * to avoid having -0 🤷‍♂️
-           */
-          _providedOnChange(index + 1 - 1);
+          _providedOnChange(index);
         }
       },
-      [_providedOnChange, animatedCurrentIndex]
+      [_providedOnChange, animatedCurrentIndex, isSheetClosing]
     );
     const handleOnAnimate = useCallback(
       (toPoint: number) => {
@@ -531,7 +516,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * force animation configs from parameters, if provided
          */
         if (configs !== undefined) {
-          // @ts-ignore
           animatedPosition.value = animate(
             position,
             configs,
@@ -542,32 +526,25 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           /**
            * use animationConfigs callback, if provided
            */
-          // @ts-ignore
           animatedPosition.value = animate(
             position,
             _providedAnimationConfigs,
             velocity,
             animateToPositionCompleted
           );
         } else {
-          // @ts-ignore
+          /**
+           * fallback to default animation configs
+           */
           animatedPosition.value = animate(
             position,
-            {
-              duration: _providedAnimationDuration,
-              easing: _providedAnimationEasing,
-            },
-            0,
+            DEFAULT_ANIMATION_CONFIGS,
+            velocity,
             animateToPositionCompleted
           );
         }
       },
-      [
-        handleOnAnimate,
-        _providedAnimationConfigs,
-        _providedAnimationDuration,
-        _providedAnimationEasing,
-      ]
+      [handleOnAnimate, _providedAnimationConfigs]
     );
     //#endregion
 
@@ -623,20 +600,21 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * verify if sheet is closed.
          */
         if (animatedPosition.value === animatedContainerHeight.value) {
-          isClosing.current = false;
+          isSheetClosing.value = false;
         }
 
         /**
          * exit method if sheet is closing.
          */
-        if (isClosing.current) {
+        if (isSheetClosing.value) {
           return;
         }
 
         const newSnapPoint = snapPoints[index];
         runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
       },
       [
+        isSheetClosing,
         animateToPosition,
         animatedSnapPoints,
         animatedContainerHeight,
@@ -652,13 +630,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * verify if sheet is closed.
          */
         if (animatedPosition.value === animatedContainerHeight.value) {
-          isClosing.current = false;
+          isSheetClosing.value = false;
         }
 
         /**
          * exit method if sheet is closing.
          */
-        if (isClosing.current) {
+        if (isSheetClosing.value) {
           return;
         }
 
@@ -679,6 +657,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animateToPosition(nextPosition, 0, animationConfigs);
       },
       [
+        isSheetClosing,
         animateToPosition,
         animatedContainerHeight,
         animatedPosition,
@@ -698,24 +677,29 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * verify if sheet is closed.
          */
         if (animatedPosition.value === animatedContainerHeight.value) {
-          isClosing.current = false;
+          isSheetClosing.value = false;
         }
 
         /**
          * exit method if sheet is closing.
          */
-        if (isClosing.current) {
+        if (isSheetClosing.value) {
           return;
         }
 
-        isClosing.current = true;
+        isSheetClosing.value = true;
         runOnUI(animateToPosition)(
           animatedContainerHeight.value,
           0,
           animationConfigs
         );
       },
-      [animateToPosition, animatedContainerHeight, animatedPosition]
+      [
+        isSheetClosing,
+        animateToPosition,
+        animatedContainerHeight,
+        animatedPosition,
+      ]
     );
     const handleExpand = useCallback(
       function handleExpand(
@@ -725,20 +709,21 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * verify if sheet is closed.
          */
         if (animatedPosition.value === animatedContainerHeight.value) {
-          isClosing.current = false;
+          isSheetClosing.value = false;
         }
 
         /**
          * exit method if sheet is closing.
          */
-        if (isClosing.current) {
+        if (isSheetClosing.value) {
           return;
         }
         const snapPoints = animatedSnapPoints.value;
         const newSnapPoint = snapPoints[snapPoints.length - 1];
         runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
       },
       [
+        isSheetClosing,
         animateToPosition,
         animatedSnapPoints,
         animatedContainerHeight,
@@ -753,13 +738,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          * verify if sheet is closed.
          */
         if (animatedPosition.value === animatedContainerHeight.value) {
-          isClosing.current = false;
+          isSheetClosing.value = false;
         }
 
         /**
          * exit method if sheet is closing.
          */
-        if (isClosing.current) {
+        if (isSheetClosing.value) {
           return;
         }
 
@@ -768,6 +753,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs);
       },
       [
+        isSheetClosing,
         animateToPosition,
         animatedSnapPoints,
         animatedContainerHeight,

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -223,22 +223,6 @@ export interface BottomSheetProps
 }
 
 export interface BottomSheetAnimationConfigs {
-  /**
-   * Snapping animation easing function.
-   * @type Animated.EasingFunction
-   * @default Easing.out(Easing.exp)
-   * @deprecated this prop will be dropped in the next major release.
-   * @see animationConfigs
-   */
-  animationEasing?: Animated.EasingFunction;
-  /**
-   * Snapping animation duration.
-   * @type number
-   * @default 500
-   * @deprecated this prop will be dropped in the next major release.
-   * @see animationConfigs
-   */
-  animationDuration?: number;
   /**
    * Animation configs, this could be created by:
    * - `useBottomSheetSpringConfigs`

diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -11,13 +11,14 @@ import {
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
+import { useBottomSheet } from '../../hooks';
 import {
   DEFAULT_OPACITY,
   DEFAULT_APPEARS_ON_INDEX,
   DEFAULT_DISAPPEARS_ON_INDEX,
   DEFAULT_ENABLE_TOUCH_THROUGH,
+  DEFAULT_PRESS_BEHAVIOR,
 } from './constants';
-import { usePressBehavior } from './usePressBehavior';
 import { styles } from './styles';
 import type { BottomSheetDefaultBackdropProps } from './types';
 
@@ -27,26 +28,31 @@ const BottomSheetBackdropComponent = ({
   appearsOnIndex = DEFAULT_APPEARS_ON_INDEX,
   disappearsOnIndex = DEFAULT_DISAPPEARS_ON_INDEX,
   enableTouchThrough = DEFAULT_ENABLE_TOUCH_THROUGH,
-  pressBehavior,
-  closeOnPress,
+  pressBehavior = DEFAULT_PRESS_BEHAVIOR,
   style,
 }: BottomSheetDefaultBackdropProps) => {
   //#region hooks
-  const { handleOnPress, syntheticPressBehavior } = usePressBehavior({
-    pressBehavior,
-    closeOnPress,
-    disappearsOnIndex,
-  });
+  const { snapToIndex, close } = useBottomSheet();
   //#endregion
 
   //#region variables
   const containerRef = useRef<Animated.View>(null);
-  const pointerEvents = useMemo(() => (enableTouchThrough ? 'none' : 'auto'), [
-    enableTouchThrough,
-  ]);
+  const pointerEvents = useMemo(
+    () => (enableTouchThrough ? 'none' : 'auto'),
+    [enableTouchThrough]
+  );
   //#endregion
 
   //#region callbacks
+  const handleOnPress = useCallback(() => {
+    if (pressBehavior === 'close') {
+      close();
+    } else if (pressBehavior === 'collapse') {
+      snapToIndex(disappearsOnIndex as number);
+    } else if (typeof pressBehavior === 'number') {
+      snapToIndex(pressBehavior);
+    }
+  }, [snapToIndex, close, disappearsOnIndex, pressBehavior]);
   const handleContainerTouchability = useCallback(
     (shouldDisableTouchability: boolean) => {
       if (!containerRef.current) {
@@ -62,14 +68,15 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region tap gesture
-  const gestureHandler = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
-    {
-      onFinish: () => {
-        runOnJS(handleOnPress)();
+  const gestureHandler =
+    useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
+      {
+        onFinish: () => {
+          runOnJS(handleOnPress)();
+        },
       },
-    },
-    [handleOnPress]
-  );
+      [handleOnPress]
+    );
   //#endregion
 
   //#region styles
@@ -83,7 +90,7 @@ const BottomSheetBackdropComponent = ({
     flex: 1,
   }));
   const containerStyle = useMemo(
-    () => [style, styles.container, containerAnimatedStyle],
+    () => [styles.container, style, containerAnimatedStyle],
     [style, containerAnimatedStyle]
   );
   //#endregion
@@ -101,7 +108,7 @@ const BottomSheetBackdropComponent = ({
   );
   //#endregion
 
-  return syntheticPressBehavior !== 'none' ? (
+  return pressBehavior !== 'none' ? (
     <TapGestureHandler onGestureEvent={gestureHandler}>
       <Animated.View
         ref={containerRef}
@@ -110,9 +117,7 @@ const BottomSheetBackdropComponent = ({
         accessibilityRole="button"
         accessibilityLabel="Bottom Sheet backdrop"
         accessibilityHint={`Tap to ${
-          typeof syntheticPressBehavior === 'string'
-            ? syntheticPressBehavior
-            : 'move'
+          typeof pressBehavior === 'string' ? pressBehavior : 'move'
         } the Bottom Sheet`}
       />
     </TapGestureHandler>

diff --git a/src/components/bottomSheetBackdrop/types.d.ts b/src/components/bottomSheetBackdrop/types.d.ts
@@ -42,12 +42,6 @@ export interface BottomSheetDefaultBackdropProps
    * @default false
    */
   enableTouchThrough?: boolean;
-  /**
-   * Close sheet when user press on backdrop.
-   * @type boolean
-   * @deprecated Use pressBehavior instead.
-   */
-  closeOnPress?: boolean;
   /**
    * What should happen when user press backdrop?
    * @type BackdropPressBehavior