status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Mengjue Wang 2016-07-08 12:02:44 -07:00 committed by Facebook Github Bot 4
parent cadc753e4c
commit 7e5fc17983
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Libraries/Experimental/SwipeableRow/SwipeableRow.js
View File

@ -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);