301 lines
7.0 KiB
JavaScript
301 lines
7.0 KiB
JavaScript
/**
|
|
* Copyright (c) 2015, Facebook, Inc. All rights reserved.
|
|
*
|
|
* Facebook, Inc. (“Facebook”) owns all right, title and interest, including
|
|
* all intellectual property and other proprietary rights, in and to the React
|
|
* Native CustomComponents software (the “Software”). Subject to your
|
|
* compliance with these terms, you are hereby granted a non-exclusive,
|
|
* worldwide, royalty-free copyright license to (1) use and copy the Software;
|
|
* and (2) reproduce and distribute the Software as part of your own software
|
|
* (“Your Software”). Facebook reserves all rights not expressly granted to
|
|
* you in this license agreement.
|
|
*
|
|
* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
|
|
* OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
|
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
|
|
* IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
|
|
* EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
|
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
|
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
|
|
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
|
|
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
|
|
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
|
|
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*
|
|
* @providesModule NavigatorSceneConfigs
|
|
*/
|
|
'use strict';
|
|
|
|
var Dimensions = require('Dimensions');
|
|
var PixelRatio = require('PixelRatio');
|
|
|
|
var buildStyleInterpolator = require('buildStyleInterpolator');
|
|
var merge = require('merge');
|
|
|
|
var SCREEN_WIDTH = Dimensions.get('window').width;
|
|
var SCREEN_HEIGHT = Dimensions.get('window').height;
|
|
|
|
var ToTheLeft = {
|
|
// Rotate *requires* you to break out each individual component of
|
|
// rotation (x, y, z, w)
|
|
transformTranslate: {
|
|
from: {x: 0, y: 0, z: 0},
|
|
to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
// Uncomment to try rotation:
|
|
// Quick guide to reasoning about rotations:
|
|
// http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
|
|
// transformRotateRadians: {
|
|
// from: {x: 0, y: 0, z: 0, w: 1},
|
|
// to: {x: 0, y: 0, z: -0.47, w: 0.87},
|
|
// min: 0,
|
|
// max: 1,
|
|
// type: 'linear',
|
|
// extrapolate: true
|
|
// },
|
|
transformScale: {
|
|
from: {x: 1, y: 1, z: 1},
|
|
to: {x: 0.95, y: 0.95, z: 1},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
opacity: {
|
|
from: 1,
|
|
to: 0.3,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: false,
|
|
round: 100,
|
|
},
|
|
translateX: {
|
|
from: 0,
|
|
to: -Math.round(Dimensions.get('window').width * 0.3),
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
scaleX: {
|
|
from: 1,
|
|
to: 0.95,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
scaleY: {
|
|
from: 1,
|
|
to: 0.95,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
};
|
|
|
|
var FromTheRight = {
|
|
opacity: {
|
|
value: 1.0,
|
|
type: 'constant',
|
|
},
|
|
|
|
transformTranslate: {
|
|
from: {x: Dimensions.get('window').width, y: 0, z: 0},
|
|
to: {x: 0, y: 0, z: 0},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
|
|
translateX: {
|
|
from: Dimensions.get('window').width,
|
|
to: 0,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
|
|
scaleX: {
|
|
value: 1,
|
|
type: 'constant',
|
|
},
|
|
scaleY: {
|
|
value: 1,
|
|
type: 'constant',
|
|
},
|
|
};
|
|
|
|
|
|
var ToTheBack = {
|
|
// Rotate *requires* you to break out each individual component of
|
|
// rotation (x, y, z, w)
|
|
transformTranslate: {
|
|
from: {x: 0, y: 0, z: 0},
|
|
to: {x: 0, y: 0, z: 0},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
transformScale: {
|
|
from: {x: 1, y: 1, z: 1},
|
|
to: {x: 0.95, y: 0.95, z: 1},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
opacity: {
|
|
from: 1,
|
|
to: 0.3,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: false,
|
|
round: 100,
|
|
},
|
|
scaleX: {
|
|
from: 1,
|
|
to: 0.95,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
scaleY: {
|
|
from: 1,
|
|
to: 0.95,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true
|
|
},
|
|
};
|
|
|
|
var FromTheFront = {
|
|
opacity: {
|
|
value: 1.0,
|
|
type: 'constant',
|
|
},
|
|
|
|
transformTranslate: {
|
|
from: {x: 0, y: Dimensions.get('window').height, z: 0},
|
|
to: {x: 0, y: 0, z: 0},
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
translateY: {
|
|
from: Dimensions.get('window').height,
|
|
to: 0,
|
|
min: 0,
|
|
max: 1,
|
|
type: 'linear',
|
|
extrapolate: true,
|
|
round: PixelRatio.get(),
|
|
},
|
|
scaleX: {
|
|
value: 1,
|
|
type: 'constant',
|
|
},
|
|
scaleY: {
|
|
value: 1,
|
|
type: 'constant',
|
|
},
|
|
};
|
|
|
|
|
|
var Interpolators = {
|
|
Vertical: {
|
|
into: buildStyleInterpolator(FromTheFront),
|
|
out: buildStyleInterpolator(ToTheBack),
|
|
},
|
|
Horizontal: {
|
|
into: buildStyleInterpolator(FromTheRight),
|
|
out: buildStyleInterpolator(ToTheLeft),
|
|
},
|
|
};
|
|
|
|
|
|
// These are meant to mimic iOS default behavior
|
|
var PastPointOfNoReturn = {
|
|
horizontal: function(location) {
|
|
return location > SCREEN_WIDTH * 3 / 5;
|
|
},
|
|
vertical: function(location) {
|
|
return location > SCREEN_HEIGHT * 3 / 5;
|
|
},
|
|
};
|
|
|
|
var BaseConfig = {
|
|
// When false, all gestures are ignored for this scene
|
|
enableGestures: true,
|
|
|
|
// How far the swipe must drag to start transitioning
|
|
gestureDetectMovement: 2,
|
|
|
|
// Amplitude of release velocity that is considered still
|
|
notMoving: 0.3,
|
|
|
|
// Velocity to start at when transitioning without gesture
|
|
defaultTransitionVelocity: 1.5,
|
|
|
|
// Fraction of directional move required.
|
|
directionRatio: 0.66,
|
|
|
|
// Velocity to transition with when the gesture release was "not moving"
|
|
snapVelocity: 2,
|
|
|
|
// Rebound spring parameters when transitioning FROM this scene
|
|
springFriction: 26,
|
|
springTension: 200,
|
|
|
|
// Defaults for horizontal transitioning:
|
|
|
|
isVertical: false,
|
|
screenDimension: SCREEN_WIDTH,
|
|
|
|
// Region that can trigger swipe. iOS default is 30px from the left edge
|
|
edgeHitWidth: 30,
|
|
|
|
// Point at which a non-velocity release will cause nav pop
|
|
pastPointOfNoReturn: PastPointOfNoReturn.horizontal,
|
|
|
|
// Animation interpolators for this transition
|
|
interpolators: Interpolators.Horizontal,
|
|
};
|
|
|
|
var NavigatorSceneConfigs = {
|
|
PushFromRight: merge(BaseConfig, {
|
|
// We will want to customize this soon
|
|
}),
|
|
FloatFromRight: merge(BaseConfig, {
|
|
// We will want to customize this soon
|
|
}),
|
|
FloatFromBottom: merge(BaseConfig, {
|
|
edgeHitWidth: 150,
|
|
interpolators: Interpolators.Vertical,
|
|
isVertical: true,
|
|
pastPointOfNoReturn: PastPointOfNoReturn.vertical,
|
|
screenDimension: SCREEN_HEIGHT,
|
|
}),
|
|
};
|
|
|
|
module.exports = NavigatorSceneConfigs;
|