Permalink
Browse files

Provide RTL support for SwipeableRow

Summary:
Flipped the gesture for SwipeableRow
 Provide RTL support for SwipeableRow. When developer set RTL layout in their app, all the animation and  gesture will change to RTL status.

Reviewed By: fkgozali

Differential Revision: D3532919

fbshipit-source-id: 76fc94cdaa8457350e9bbe3366aa714c9eb45245
  • Loading branch information...
1 parent cadc753 commit 7e5fc179839d1f0e5b82df307e9a0ef19f2874b1 @MengjueW MengjueW committed with Facebook Github Bot 4 Jul 8, 2016
Showing with 12 additions and 6 deletions.
  1. +12 −6 Libraries/Experimental/SwipeableRow/SwipeableRow.js
@@ -34,6 +34,9 @@ const {PropTypes} = React;
const emptyFunction = require('fbjs/lib/emptyFunction');
+const I18nManager = require('NativeModules').I18nManager || {};
+const IS_RTL = I18nManager.isRTL;
+
// NOTE: Eventually convert these consts to an input object of configurations
// Position of the left of the swipable item when closed
@@ -240,7 +243,8 @@ const SwipeableRow = React.createClass({
},
_isSwipingRightFromClosed(gestureState: Object): boolean {
- return this._previousLeft === CLOSED_LEFT_POSITION && gestureState.dx > 0;
+ const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
+ return this._previousLeft === CLOSED_LEFT_POSITION && gestureStateDx > 0;
},
_swipeFullSpeed(gestureState: Object): void {
@@ -259,9 +263,10 @@ const SwipeableRow = React.createClass({
* swiping is available, but swiping right does not do anything
* functionally.
*/
+ const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
return (
this._isSwipingRightFromClosed(gestureState) &&
- gestureState.dx > RIGHT_SWIPE_THRESHOLD
+ gestureStateDx > RIGHT_SWIPE_THRESHOLD
);
},
@@ -290,7 +295,8 @@ const SwipeableRow = React.createClass({
},
_animateToOpenPosition(): void {
- this._animateTo(-this.props.maxSwipeDistance);
+ const maxSwipeDistance = IS_RTL ? -this.props.maxSwipeDistance : this.props.maxSwipeDistance;
+ this._animateTo(-maxSwipeDistance);
},
_animateToClosedPosition(duration: number = SWIPE_DURATION): void {
@@ -306,8 +312,9 @@ const SwipeableRow = React.createClass({
* When swiping right, we want to bounce back past closed position on release
* so users know they should swipe right to get content.
*/
+ const swipeBounceBackDistance = IS_RTL ? -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE : RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
this._animateTo(
- -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE,
+ -swipeBounceBackDistance,
duration,
this._animateToClosedPositionDuringBounce,
);
@@ -330,8 +337,7 @@ const SwipeableRow = React.createClass({
},
_handlePanResponderEnd(event: Object, gestureState: Object): void {
- const horizontalDistance = gestureState.dx;
-
+ const horizontalDistance = IS_RTL ? -gestureState.dx : gestureState.dx;
if (this._isSwipingRightFromClosed(gestureState)) {
this.props.onOpen();
this._animateBounceBack(RIGHT_SWIPE_BOUNCE_BACK_DURATION);

0 comments on commit 7e5fc17

Please sign in to comment.