Permalink
Browse files

Change NavigatorSceneConfig for RTL

Summary:
For RTL experiment, we need to swap all the Left and Right gesture and animation.
 Provide RTL support for Navigator in RN.

Reviewed By: hedgerwang

Differential Revision: D3519811

fbshipit-source-id: b53d9bf901ec056614658b627823d2225bdc82b1
  • Loading branch information...
MengjueW authored and Facebook Github Bot 7 committed Jul 8, 2016
1 parent ca66383 commit cadc753e4c2c364d78dd2fa69499832ab52c65cd
Showing with 92 additions and 20 deletions.
  1. +92 −20 Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
@@ -1,5 +1,10 @@
/**
* Copyright (c) 2015, Facebook, Inc. All rights reserved.
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
* all intellectual property and other proprietary rights, in and to the React
@@ -31,6 +36,9 @@ var PixelRatio = require('PixelRatio');
var buildStyleInterpolator = require('buildStyleInterpolator');
var I18nManager = require('NativeModules').I18nManager || {};
var IS_RTL = I18nManager.isRTL;
var SCREEN_WIDTH = Dimensions.get('window').width;
var SCREEN_HEIGHT = Dimensions.get('window').height;
@@ -50,6 +58,14 @@ var ToTheLeftIOS = {
},
};
var ToTheRightIOS = {
...ToTheLeftIOS,
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: SCREEN_WIDTH * 0.3, y: 0, z: 0},
},
};
var FadeToTheLeft = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
@@ -126,7 +142,7 @@ var FadeToTheRight = {
translateX: {
from: 0,
to: Math.round(SCREEN_WIDTH * 0.3),
}
},
};
var FadeIn = {
@@ -179,6 +195,32 @@ var ToTheLeft = {
},
};
var ToTheRight = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: Dimensions.get('window').width, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
opacity: {
value: 1.0,
type: 'constant',
},
translateX: {
from: 0,
to: Dimensions.get('window').width,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var ToTheUp = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
@@ -500,10 +542,40 @@ var BaseUpDownGesture = {
direction: 'up-to-down',
};
// For RTL experiment, we need to swap all the Left and Right gesture and animation.
// So we create a direction mapping for both LTR and RTL, and change left/right to start/end.
let directionMapping = {
ToTheStartIOS: ToTheLeftIOS,
ToTheEndIOS: ToTheRightIOS,
FadeToTheStart: FadeToTheLeft,
FadeToTheEnd: FadeToTheRight,
ToTheStart: ToTheLeft,
ToTheEnd: ToTheRight,
FromTheStart: FromTheLeft,
FromTheEnd: FromTheRight,
BaseStartToEndGesture: BaseLeftToRightGesture,
BaseEndToStartGesture: BaseRightToLeftGesture,
};
if (IS_RTL) {
directionMapping = {
ToTheStartIOS: ToTheRightIOS,
ToTheEndIOS: ToTheLeftIOS,
FadeToTheStart: FadeToTheRight,
FadeToTheEnd: FadeToTheLeft,
ToTheStart: ToTheRight,
ToTheEnd: ToTheLeft,
FromTheStart: FromTheRight,
FromTheEnd: FromTheLeft,
BaseStartToEndGesture: BaseRightToLeftGesture,
BaseEndToStartGesture: BaseLeftToRightGesture,
};
}
var BaseConfig = {
// A list of all gestures that are enabled on this scene
gestures: {
pop: BaseLeftToRightGesture,
pop: directionMapping.BaseStartToEndGesture,
},
// Rebound spring parameters when transitioning FROM this scene
@@ -515,17 +587,17 @@ var BaseConfig = {
// Animation interpolators for horizontal transitioning:
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(FadeToTheLeft),
into: buildStyleInterpolator(directionMapping.FromTheEnd),
out: buildStyleInterpolator(directionMapping.FadeToTheStart),
},
};
var NavigatorSceneConfigs = {
PushFromRight: {
...BaseConfig,
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(ToTheLeftIOS),
into: buildStyleInterpolator(directionMapping.FromTheEnd),
out: buildStyleInterpolator(directionMapping.ToTheStartIOS),
},
},
FloatFromRight: {
@@ -535,18 +607,18 @@ var NavigatorSceneConfigs = {
FloatFromLeft: {
...BaseConfig,
gestures: {
pop: BaseRightToLeftGesture,
pop: directionMapping.BaseEndToStartGesture,
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
into: buildStyleInterpolator(directionMapping.FromTheStart),
out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
},
},
FloatFromBottom: {
...BaseConfig,
gestures: {
pop: {
...BaseLeftToRightGesture,
...directionMapping.BaseStartToEndGesture,
edgeHitWidth: 150,
direction: 'top-to-bottom',
fullDistance: SCREEN_HEIGHT,
@@ -579,43 +651,43 @@ var NavigatorSceneConfigs = {
...BaseConfig,
gestures: {
jumpBack: {
...BaseLeftToRightGesture,
...directionMapping.BaseStartToEndGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseRightToLeftGesture,
...directionMapping.BaseEndToStartGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(ToTheLeft),
into: buildStyleInterpolator(directionMapping.FromTheEnd),
out: buildStyleInterpolator(directionMapping.ToTheStart),
},
},
HorizontalSwipeJumpFromRight: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseRightToLeftGesture,
...directionMapping.BaseEndToStartGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseLeftToRightGesture,
...directionMapping.BaseStartToEndGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
pop: BaseRightToLeftGesture,
pop: directionMapping.BaseEndToStartGesture,
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
into: buildStyleInterpolator(directionMapping.FromTheStart),
out: buildStyleInterpolator(directionMapping.FadeToTheEnd),
},
},
VerticalUpSwipeJump: {

0 comments on commit cadc753

Please sign in to comment.