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 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 // NOTE: Eventually convert these consts to an input object of configurations
// Position of the left of the swipable item when closed // Position of the left of the swipable item when closed
@ -240,7 +243,8 @@ const SwipeableRow = React.createClass({
}, },
_isSwipingRightFromClosed(gestureState: Object): boolean { _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 { _swipeFullSpeed(gestureState: Object): void {
@ -259,9 +263,10 @@ const SwipeableRow = React.createClass({
* swiping is available, but swiping right does not do anything * swiping is available, but swiping right does not do anything
* functionally. * functionally.
*/ */
const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
return ( return (
this._isSwipingRightFromClosed(gestureState) && this._isSwipingRightFromClosed(gestureState) &&
gestureState.dx > RIGHT_SWIPE_THRESHOLD gestureStateDx > RIGHT_SWIPE_THRESHOLD
); );
}, },
@ -290,7 +295,8 @@ const SwipeableRow = React.createClass({
}, },
_animateToOpenPosition(): void { _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 { _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 * When swiping right, we want to bounce back past closed position on release
* so users know they should swipe right to get content. * 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( this._animateTo(
-RIGHT_SWIPE_BOUNCE_BACK_DISTANCE, -swipeBounceBackDistance,
duration, duration,
this._animateToClosedPositionDuringBounce, this._animateToClosedPositionDuringBounce,
); );
@ -330,8 +337,7 @@ const SwipeableRow = React.createClass({
}, },
_handlePanResponderEnd(event: Object, gestureState: Object): void { _handlePanResponderEnd(event: Object, gestureState: Object): void {
const horizontalDistance = gestureState.dx; const horizontalDistance = IS_RTL ? -gestureState.dx : gestureState.dx;
if (this._isSwipingRightFromClosed(gestureState)) { if (this._isSwipingRightFromClosed(gestureState)) {
this.props.onOpen(); this.props.onOpen();
this._animateBounceBack(RIGHT_SWIPE_BOUNCE_BACK_DURATION); this._animateBounceBack(RIGHT_SWIPE_BOUNCE_BACK_DURATION);