Drawer - trigger onToggleSwipeLeft on releases (#860)

* trigger onToggleSwipeLeft on releases

* Changing animation's easing

* bug fix

* renaming variable

* fix example

* fix example 2

Author: Inbal-Tish

demo/src/screens/componentScreens/DrawerScreen.js

@@ -184,7 +184,7 @@ class DrawerScreen extends Component {
         centerV
         style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
       >
-        {this.state.unread && <Badge size={'pimpleBig'} backgroundColor={Colors.purple30} containerStyle={{marginRight: 8}}/>}
+        {this.state.unread && <Badge size={'pimpleSmall'} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
         <Avatar source={{uri: conversations[0].thumbnail}}/>
         <View marginL-20>
           <Text text70R={!this.state.unread} text70BO={this.state.unread}>{conversations[0].name}</Text>
@@ -226,9 +226,9 @@ class DrawerScreen extends Component {
 
     if (showLeftItem) {
       drawerProps.leftItem = {
-        icon: require('../../assets/icons/mail.png'),
-        text: this.state.unread ? 'Read' : 'Unread', 
-        background: this.state.unread ? Colors.green30 : Colors.purple30,
+        icon: this.state.unread ? require('../../assets/icons/mail.png') : require('../../assets/icons/refresh.png'),
+        text: !this.state.unread ? 'Unread' : 'Read', 
+        background: this.state.unread ? Colors.green30 : Colors.orange30,
         onPress: this.toggleReadState
       };
     }

src/components/drawer/Swipeable.tsx

@@ -90,7 +90,7 @@ export default class Swipeable extends Component<PropType, StateType> {
     // 1 -> closing to the left
     // -1 -> closing to the right
     this.rowState = 0;
-    this.dragFired = false;
+    this.dragThresholdReached = false;
 
     this.state = {
       dragX,
@@ -112,12 +112,12 @@ export default class Swipeable extends Component<PropType, StateType> {
   _handleDrag = (e) => {
     const {onToggleSwipeLeft} = this.props;
 
-    if (onToggleSwipeLeft && !this.dragFired) {
+    if (onToggleSwipeLeft && !this.dragThresholdReached) {
       const {rowWidth, leftWidth} = this.state;
       const x = e.nativeEvent.translationX;
       const threshold = rowWidth * LEFT_TOGGLE_THRESHOLD;
       if (x >= threshold && x < threshold + 10) {
-        this.dragFired = true;
+        this.dragThresholdReached = true;
         onToggleSwipeLeft({rowWidth, leftWidth, dragX: x});
       }
     }
@@ -223,7 +223,7 @@ export default class Swipeable extends Component<PropType, StateType> {
     let toValue = 0;
     if (this.rowState === 0) {
       if (onToggleSwipeLeft && translationX > leftWidth) {
-        if (!this.dragFired) {
+        if (!this.dragThresholdReached) {
           toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
         }
       } else if (fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
@@ -303,8 +303,8 @@ export default class Swipeable extends Component<PropType, StateType> {
       }
     });
 
-    if (toValue === rowWidth * LEFT_TOGGLE_THRESHOLD && onToggleSwipeLeft) {
-      onToggleSwipeLeft({rowWidth, leftWidth});
+    if ((toValue === rowWidth * LEFT_TOGGLE_THRESHOLD || this.dragThresholdReached) && onToggleSwipeLeft) {
+      onToggleSwipeLeft({rowWidth, leftWidth, released: true});
     } else if (toValue === rowWidth && onWillFullSwipeLeft) {
       onWillFullSwipeLeft()
     } else if (toValue === -rowWidth && onWillFullSwipeRight) {

src/components/drawer/index.js

@@ -187,14 +187,14 @@ class NewDrawer extends PureBaseComponent {
     _.invoke(this.props, 'onSwipeableWillClose', this.props);
   };
 
-  onToggleSwipeLeft = ({rowWidth, leftWidth, dragX}) => {
+  onToggleSwipeLeft = ({rowWidth, leftWidth, dragX, released}) => {
     Animated.timing(this.leftActionX, {
       toValue: dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth,
-      easing: Easing.linear,
-      duration: 100,
+      easing: Easing.bezier(0.25, 1, 0.5, 1),
+      duration: 200,
       delay: 100,
       useNativeDriver: true
-    }).start(this.toggle());
+    }).start(released && this.toggle());
   }
 
   toggle() {
@@ -343,7 +343,7 @@ class NewDrawer extends PureBaseComponent {
   };
 
   render() {
-    const {children, style, leftItem, rightItems, ...others} = this.getThemeProps();
+    const {children, style, leftItem, rightItems, onToggleSwipeLeft, ...others} = this.getThemeProps();
 
     return (
       <Swipeable
@@ -358,7 +358,7 @@ class NewDrawer extends PureBaseComponent {
         leftActionsContainerStyle={this.getLeftActionsContainerStyle(leftItem, rightItems)}
         onSwipeableWillOpen={this.onSwipeableWillOpen}
         onSwipeableWillClose={this.onSwipeableWillClose}
-        onToggleSwipeLeft={this.onToggleSwipeLeft}
+        onToggleSwipeLeft={onToggleSwipeLeft && this.onToggleSwipeLeft}
       >
         <View
           // flex