Feat/add haptics to Drawer (#1266)

* Feat/add haptics to Drawer

* add disableHaptic prop

* get impactMedium from HapticType

* add method _triggerHaptic

* remove HAPTIC_METHOD const

Author: lidord-wix

demo/src/screens/componentScreens/DrawerScreen.tsx

@@ -84,10 +84,6 @@ class DrawerScreen extends Component {
     this.setState({unread: !this.state.unread});
   }
 
-  triggerLeftToggleHaptic = () => {
-    // console.warn('haptic trigger here');
-  }
-
   showItem = () => {
     this.setState({hideItem: false});
   };
@@ -230,7 +226,6 @@ class DrawerScreen extends Component {
       fullSwipeLeft,
       onWillFullSwipeLeft: this.deleteItem,
       onToggleSwipeLeft: this.toggleReadState,
-      leftToggleHapticTrigger: this.triggerLeftToggleHaptic,
       testID: 'drawer'
     };
     if (showRightItems) {

generatedTypes/components/drawer/Swipeable.d.ts

@@ -34,6 +34,7 @@ declare type Props = {
     animationOptions?: Object;
     containerStyle?: Object;
     childrenContainerStyle?: Object;
+    disableHaptic?: boolean;
 };
 declare type StateType = {
     dragX: Animated.Value;
@@ -53,6 +54,7 @@ export default class Swipeable extends Component<Props, StateType> {
         fullRightThreshold: number;
     };
     constructor(props: Props);
+    _triggerHaptic: () => false | void;
     _handleDrag: (e: any) => void;
     getTransX: () => Animated.AnimatedInterpolation;
     getShowLeftAction: () => Animated.Value | Animated.AnimatedInterpolation;

generatedTypes/components/drawer/index.d.ts

@@ -88,6 +88,10 @@ interface Props {
      * Haptic trigger function to use onToggleSwipeLeft
      */
     leftToggleHapticTrigger?: Function;
+    /**
+     * Whether to disable the haptic
+     */
+    disableHaptic?: boolean;
     /**
      * Style
      */

src/components/drawer/Swipeable.tsx

@@ -11,6 +11,7 @@ import React, {Component} from 'react';
 import {Animated, StyleSheet, View, I18nManager} from 'react-native';
 import {PanGestureHandler, TapGestureHandler, State} from 'react-native-gesture-handler';
 import {Constants} from '../../helpers';
+import {HapticService, HapticType} from '../../services';
 
 
 const DRAG_TOSS = 0.05;
@@ -56,7 +57,8 @@ type Props = {
   useNativeAnimations: boolean,
   animationOptions?: Object,
   containerStyle?: Object,
-  childrenContainerStyle?: Object
+  childrenContainerStyle?: Object,
+  disableHaptic?: boolean
 };
 
 type StateType = {
@@ -111,6 +113,10 @@ export default class Swipeable extends Component<Props, StateType> {
     });
   }
 
+  _triggerHaptic = () => {
+    return !this.props.disableHaptic && HapticService.triggerHaptic(HapticType.impactMedium, 'Drawer');
+  }
+  
   _handleDrag = (e) => {
     const {onToggleSwipeLeft} = this.props;
 
@@ -123,7 +129,8 @@ export default class Swipeable extends Component<Props, StateType> {
       if (!this.dragThresholdReached && x >= threshold && x < threshold + 10) {
         // move item right
         this.dragThresholdReached = true;
-        onToggleSwipeLeft({rowWidth, leftWidth, dragX: x, triggerHaptic: true});
+        this._triggerHaptic();
+        onToggleSwipeLeft({rowWidth, leftWidth, dragX: x});
       }
       if (this.dragThresholdReached && x < threshold - 10) {
         // move item left
@@ -260,8 +267,10 @@ export default class Swipeable extends Component<Props, StateType> {
         // Swipe left toggle
         toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
       } else if (!onToggleSwipeLeft && fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
+        this._triggerHaptic();
         toValue = rowWidth;
       } else if (fullSwipeRight && translationX < -rowWidth * fullRightThreshold) {
+        this._triggerHaptic();
         toValue = -rowWidth;
       } else if (translationX > leftThreshold) {
         if (!onToggleSwipeLeft || onToggleSwipeLeft && translationX < rowWidth * LEFT_TOGGLE_THRESHOLD) {

src/components/drawer/index.tsx

@@ -9,6 +9,7 @@ import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import View from '../view';
 import Swipeable, {SwipeableProps} from './Swipeable';
+import {LogService} from '../../services';
 
 const DEFAULT_BG = Colors.primary;
 const DEFAULT_BOUNCINESS = 0;
@@ -101,6 +102,10 @@ interface Props {
    * Haptic trigger function to use onToggleSwipeLeft
    */
   leftToggleHapticTrigger?: Function;
+  /**
+   * Whether to disable the haptic
+   */
+  disableHaptic?: boolean;
   /**
    * Style
    */
@@ -214,9 +219,6 @@ class Drawer extends PureComponent<Props> {
 
   private onToggleSwipeLeft = (options?: any) => {
     if (this.props.onToggleSwipeLeft) {
-      if (options?.triggerHaptic) {
-        _.invoke(this.props, 'leftToggleHapticTrigger');
-      }
       this.animateItem(options);
     }
   };
@@ -382,7 +384,8 @@ class Drawer extends PureComponent<Props> {
   };
 
   render() {
-    const {children, style, leftItem, rightItems, onToggleSwipeLeft, ...others} = this.props;
+    const {children, style, leftItem, rightItems, onToggleSwipeLeft, leftToggleHapticTrigger, ...others} = this.props;
+    leftToggleHapticTrigger && LogService.deprecationWarn({component: 'Drawer', oldProp: 'leftToggleHapticTrigger'});
 
     return (
       <Swipeable