Fix/drawer left toggle (#875)

* Fix left toggle drag threshold and haptic trigger timing; Add item reset position after left toggle

* fix bounciness and closing of the drawer after item animation

Author: Inbal-Tish

demo/src/screens/componentScreens/DrawerScreen.tsx

@@ -78,7 +78,7 @@ class DrawerScreen extends Component {
   };
 
   toggleReadState = () => {
-    this.setState({unread: !this.state.unread}); // setState will close the Drawer
+    this.setState({unread: !this.state.unread});
   }
 
   triggerLeftToggleHaptic = () => {

src/components/drawer/Swipeable.tsx

@@ -112,13 +112,21 @@ export default class Swipeable extends Component<PropType, StateType> {
   _handleDrag = (e) => {
     const {onToggleSwipeLeft} = this.props;
 
-    if (onToggleSwipeLeft && !this.dragThresholdReached) {
+    if (onToggleSwipeLeft) {
+      // Drag left toggle
       const {rowWidth, leftWidth} = this.state;
       const x = e.nativeEvent.translationX;
       const threshold = rowWidth * LEFT_TOGGLE_THRESHOLD;
-      if (x >= threshold && x < threshold + 10) {
+
+      if (!this.dragThresholdReached && x >= threshold && x < threshold + 10) {
+        // move item right
         this.dragThresholdReached = true;
-        onToggleSwipeLeft({rowWidth, leftWidth, dragX: x});
+        onToggleSwipeLeft({rowWidth, leftWidth, dragX: x, triggerHaptic: true});
+      } 
+      if (this.dragThresholdReached && x < threshold - 10) {
+        // move item left
+        this.dragThresholdReached = false;
+        onToggleSwipeLeft({rowWidth, leftWidth, dragX: x, resetItemPosition: true});
       }
     }
   }
@@ -215,23 +223,32 @@ export default class Swipeable extends Component<PropType, StateType> {
     const {leftWidth = 0, rowWidth = 0} = this.state;
     const {rightOffset = rowWidth} = this.state;
     const rightWidth = rowWidth - rightOffset;
-    const {fullSwipeLeft, fullSwipeRight, friction, leftThreshold = leftWidth / 2, rightThreshold = rightWidth / 2, fullLeftThreshold, fullRightThreshold, onToggleSwipeLeft} = this.props;
-
+    const {
+      fullSwipeLeft, 
+      fullSwipeRight, 
+      friction, 
+      leftThreshold = leftWidth / 2, 
+      rightThreshold = rightWidth / 2, 
+      fullLeftThreshold, 
+      fullRightThreshold, 
+      onToggleSwipeLeft
+    } = this.props;
     const startOffsetX = this._currentOffset() + dragX / friction;
     const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
 
     let toValue = 0;
     if (this.rowState === 0) {
-      if (onToggleSwipeLeft && translationX > leftWidth) {
-        if (!this.dragThresholdReached) {
-          toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
-        }
-      } else if (fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
+      if (onToggleSwipeLeft && translationX > rowWidth * LEFT_TOGGLE_THRESHOLD && !this.dragThresholdReached) {
+        // Swipe left toggle
+        toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
+      } else if (!onToggleSwipeLeft && fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
         toValue = rowWidth;
       } else if (fullSwipeRight && translationX < -rowWidth * fullRightThreshold) {
         toValue = -rowWidth;
       } else if (translationX > leftThreshold) {
-        toValue = leftWidth;
+        if (!onToggleSwipeLeft || onToggleSwipeLeft && translationX < rowWidth * LEFT_TOGGLE_THRESHOLD) {
+          toValue = leftWidth;
+        }
       } else if (translationX < -rightThreshold) {
         toValue = -rightWidth;
       }
@@ -264,7 +281,6 @@ export default class Swipeable extends Component<PropType, StateType> {
       onSwipeableWillClose,
       onSwipeableWillOpen,
       onFullSwipeLeft,
-      fullSwipeLeft,
       onToggleSwipeLeft,
       onWillFullSwipeLeft,
       onFullSwipeRight,
@@ -274,13 +290,13 @@ export default class Swipeable extends Component<PropType, StateType> {
     dragX.setValue(0);
     rowTranslation.setValue(fromValue);
     this.rowState = Math.sign(toValue);
-
+        
     Animated.spring(rowTranslation, {
+      toValue,
       restSpeedThreshold: 1.7,
       restDisplacementThreshold: 0.4,
       velocity: velocityX,
       bounciness: 0,
-      toValue,
       useNativeDriver: useNativeAnimations,
       ...animationOptions
     }).start(({finished}) => {
@@ -304,7 +320,8 @@ export default class Swipeable extends Component<PropType, StateType> {
     });
 
     if ((toValue === rowWidth * LEFT_TOGGLE_THRESHOLD || this.dragThresholdReached) && onToggleSwipeLeft) {
-      onToggleSwipeLeft({rowWidth, leftWidth, released: true});
+      onToggleSwipeLeft({rowWidth, leftWidth, released: true, triggerHaptic: !this.dragThresholdReached});
+      this.dragThresholdReached = false;
     } else if (toValue === rowWidth && onWillFullSwipeLeft) {
       onWillFullSwipeLeft()
     } else if (toValue === -rowWidth && onWillFullSwipeRight) {
@@ -350,6 +367,7 @@ export default class Swipeable extends Component<PropType, StateType> {
   };
 
   toggleLeft = () => {
+    // Programmatically left toggle
     const {rowWidth} = this.state;
     this._animateRow(this._currentOffset(), rowWidth * LEFT_TOGGLE_THRESHOLD);
   };

src/components/drawer/index.tsx

@@ -11,6 +11,7 @@ import View from '../view';
 import Swipeable, {PropType as SwipeableProps} from './Swipeable';
 
 const DEFAULT_BG = Colors.blue30;
+const DEFAULT_BOUNCINESS = 0;
 
 interface ItemProps {
   width?: number;
@@ -123,7 +124,7 @@ class Drawer extends PureComponent<DrawerProps> {
   leftRender: SwipeableProps['renderLeftActions'];
   rightRender: SwipeableProps['renderLeftActions'];
   _swipeableRow: RefObject<Swipeable> = React.createRef();
-  animationOptions: SwipeableProps['animationOptions'] = {bounciness: this.props.bounciness || 5};
+  animationOptions: SwipeableProps['animationOptions'] = {bounciness: this.props.bounciness || DEFAULT_BOUNCINESS};
   leftActionX: Animated.Value = new Animated.Value(0);
 
   constructor(props: DrawerProps) {
@@ -192,19 +193,34 @@ class Drawer extends PureComponent<DrawerProps> {
     _.invoke(this.props, 'onSwipeableWillClose', this.props);
   };
 
-  private onToggleSwipeLeft = ({rowWidth, leftWidth, dragX, released}: any) => {
+  private onToggleSwipeLeft = (options?: any) => {
+    if (this.props.onToggleSwipeLeft) {
+      if (options?.triggerHaptic) {
+        _.invoke(this.props, 'leftToggleHapticTrigger');
+      }
+      this.animateItem(options);
+    }
+  }
+
+  private animateItem({rowWidth, leftWidth, dragX, released, resetItemPosition}: any) {
+    const toValue = resetItemPosition ? 0 : dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth;
+    
     Animated.timing(this.leftActionX, {
-      toValue: dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth,
+      toValue,
       easing: Easing.bezier(0.25, 1, 0.5, 1),
       duration: 200,
       delay: 100,
       useNativeDriver: true
-    }).start(() => released && this.toggle());
-  }
-
-  private toggle() {
-    _.invoke(this.props, 'leftToggleHapticTrigger');
-    _.invoke(this.props, 'onToggleSwipeLeft');
+    }).start(() => {
+      if (released) {
+        // reset Drawer
+        this.animateItem({released: false, resetItemPosition: true});
+        this.closeDrawer();
+        setTimeout(() => {
+          _.invoke(this.props, 'onToggleSwipeLeft', this.props);
+        }, 150);
+      }
+    });
   }
 
   /** Accessability */
@@ -347,7 +363,7 @@ class Drawer extends PureComponent<DrawerProps> {
   };
 
   render() {
-    const {children, style, leftItem, rightItems, onToggleSwipeLeft, ...others} = this.props;
+    const {children, style, leftItem, rightItems, ...others} = this.props;
 
     return (
       <Swipeable
@@ -362,7 +378,7 @@ class Drawer extends PureComponent<DrawerProps> {
         leftActionsContainerStyle={this.getLeftActionsContainerStyle(leftItem, rightItems)}
         onSwipeableWillOpen={this.onSwipeableWillOpen}
         onSwipeableWillClose={this.onSwipeableWillClose}
-        onToggleSwipeLeft={onToggleSwipeLeft && this.onToggleSwipeLeft}
+        onToggleSwipeLeft={this.onToggleSwipeLeft}
       >
         <View
           // flex