react-native/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInt...

162 lines
4.2 KiB
JavaScript

/**
* 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
* 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 NavigationCardStackStyleInterpolator
* @flow
*/
'use strict';
import type {
NavigationSceneRendererProps,
} from 'NavigationTypeDefinition';
/**
* Utility that builds the style for the card in the cards stack.
*
* +------------+
* +-+ |
* +-+ | |
* | | | |
* | | | Focused |
* | | | Card |
* | | | |
* +-+ | |
* +-+ |
* +------------+
*/
/**
* Render the initial style when the initial layout isn't measured yet.
*/
function forInitial(props: NavigationSceneRendererProps): Object {
const {
navigationState,
scene,
} = props;
const focused = navigationState.index === scene.index;
const opacity = focused ? 1 : 0;
// If not focused, move the scene to the far away.
const translate = focused ? 0 : 1000000;
return {
opacity,
transform: [
{ translateX: translate },
{ translateY: translate },
],
};
}
function forHorizontal(props: NavigationSceneRendererProps): Object {
const {
layout,
position,
scene,
} = props;
if (!layout.isMeasured) {
return forInitial(props);
}
const index = scene.index;
const inputRange = [index - 1, index, index + 1];
const width = layout.initWidth;
const opacity = position.interpolate({
inputRange,
outputRange: ([1, 1, 0.3]: Array<number>),
});
const scale = position.interpolate({
inputRange,
outputRange: ([1, 1, 0.95]: Array<number>),
});
const translateY = 0;
const translateX = position.interpolate({
inputRange,
outputRange: ([width, 0, -10]: Array<number>),
});
return {
opacity,
transform: [
{ scale },
{ translateX },
{ translateY },
],
};
}
function forVertical(props: NavigationSceneRendererProps): Object {
const {
layout,
position,
scene,
} = props;
if (!layout.isMeasured) {
return forInitial(props);
}
const index = scene.index;
const inputRange = [index - 1, index, index + 1];
const height = layout.initHeight;
const opacity = position.interpolate({
inputRange,
outputRange: ([1, 1, 0.3]: Array<number>),
});
const scale = position.interpolate({
inputRange,
outputRange: ([1, 1, 0.95]: Array<number>),
});
const translateX = 0;
const translateY = position.interpolate({
inputRange,
outputRange: ([height, 0, -10]: Array<number>),
});
return {
opacity,
transform: [
{ scale },
{ translateX },
{ translateY },
],
};
}
module.exports = {
forHorizontal,
forVertical,
};