Drawer - fix leftToggle for RTL (#1673)

* Drawer - fix leftToggle for RTL

* fix leftToggle with no items

Author: Inbal-Tish

src/components/drawer/Swipeable.tsx

@@ -61,7 +61,7 @@ type Props = {
   disableHaptic?: boolean
 };
 
-type StateType = {
+type State = {
   dragX: Animated.Value,
   rowTranslation: Animated.Value,
   leftWidth: number | typeof undefined,
@@ -71,7 +71,7 @@ type StateType = {
 
 export type SwipeableProps = Props;
 
-export default class Swipeable extends Component<Props, StateType> {
+export default class Swipeable extends Component<Props, State> {
   static displayName = 'IGNORE';
   static defaultProps = {
     friction: 1,
@@ -167,7 +167,6 @@ export default class Swipeable extends Component<Props, StateType> {
         leftWidth + (overshootLeft || overshootFriction > 1 ? 1 : 0)
       ],
     });
-
     return transX;
   }
 
@@ -267,7 +266,10 @@ export default class Swipeable extends Component<Props, StateType> {
 
     let toValue = 0;
     if (this.rowState === 0) {
-      if (this._hasLeftActions && onToggleSwipeLeft && translationX > rowWidth * LEFT_TOGGLE_THRESHOLD && !this.dragThresholdReached) {
+      if (Constants.isRTL && this._hasLeftActions && onToggleSwipeLeft && translationX < -(rowWidth * LEFT_TOGGLE_THRESHOLD) && !this.dragThresholdReached) {
+        // Swipe left toggle RTL
+        toValue = -(rowWidth * LEFT_TOGGLE_THRESHOLD);
+      } else if (this._hasLeftActions && onToggleSwipeLeft && translationX > rowWidth * LEFT_TOGGLE_THRESHOLD && !this.dragThresholdReached) {
         // Swipe left toggle
         toValue = rowWidth * LEFT_TOGGLE_THRESHOLD;
       } else if (!onToggleSwipeLeft && fullSwipeLeft && translationX > rowWidth * fullLeftThreshold) {
@@ -299,6 +301,7 @@ export default class Swipeable extends Component<Props, StateType> {
         toValue = -rightWidth;
       }
     }
+
     this._animateRow(startOffsetX, toValue, velocityX / friction);
   };
 
@@ -336,6 +339,7 @@ export default class Swipeable extends Component<Props, StateType> {
       ...animationOptions
     }).start(({finished}) => {
       if (finished) {
+        // Final Callbacks
         if (toValue === rowWidth && onFullSwipeLeft) {
           onFullSwipeLeft();
         } else if (toValue === -rowWidth && onFullSwipeRight) {
@@ -354,7 +358,12 @@ export default class Swipeable extends Component<Props, StateType> {
       }
     });
 
-    if ((toValue === rowWidth * LEFT_TOGGLE_THRESHOLD || this.dragThresholdReached) && onToggleSwipeLeft) {
+    // Transition Callbacks
+    if (Constants.isRTL && this._hasLeftActions && onToggleSwipeLeft && (toValue === -(rowWidth * LEFT_TOGGLE_THRESHOLD) || this.dragThresholdReached)) {
+      // left toggle RTL
+      onToggleSwipeLeft({rowWidth, leftWidth, released: true, triggerHaptic: !this.dragThresholdReached});
+    } else if (this._hasLeftActions && onToggleSwipeLeft && (toValue === rowWidth * LEFT_TOGGLE_THRESHOLD || this.dragThresholdReached)) {
+      // left toggle
       onToggleSwipeLeft({rowWidth, leftWidth, released: true, triggerHaptic: !this.dragThresholdReached});
       this.dragThresholdReached = false;
     } else if (toValue === rowWidth && onWillFullSwipeLeft) {
@@ -405,9 +414,10 @@ export default class Swipeable extends Component<Props, StateType> {
 
   toggleLeft = () => {
     // Programmatically left toggle
-    if (this._hasLeftActions) {
+    const shouldAnimate = Constants.isRTL ? this._hasRightActions : this._hasLeftActions;
+    if (shouldAnimate) {
       const {rowWidth} = this.state;
-      this._animateRow(this._currentOffset(), rowWidth * LEFT_TOGGLE_THRESHOLD);
+      this._animateRow(this._currentOffset(), (rowWidth * LEFT_TOGGLE_THRESHOLD) * (Constants.isRTL ? -1 : 1));
     }
   };