133 lines
4.6 KiB
JavaScript
133 lines
4.6 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 NavigationCard
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
const Animated = require('Animated');
|
|
const NavigationCardStackPanResponder = require('NavigationCardStackPanResponder');
|
|
const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleInterpolator');
|
|
const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
|
|
const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
|
|
const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
|
|
const NavigationPropTypes = require('NavigationPropTypes');
|
|
const React = require('React');
|
|
const StyleSheet = require('StyleSheet');
|
|
|
|
import type {
|
|
NavigationPanPanHandlers,
|
|
NavigationSceneRenderer,
|
|
NavigationSceneRendererProps,
|
|
} from 'NavigationTypeDefinition';
|
|
|
|
type Props = NavigationSceneRendererProps & {
|
|
onComponentRef: (ref: any) => void,
|
|
onNavigateBack: ?Function,
|
|
panHandlers: ?NavigationPanPanHandlers,
|
|
pointerEvents: string,
|
|
renderScene: NavigationSceneRenderer,
|
|
style: any,
|
|
};
|
|
|
|
const {PropTypes} = React;
|
|
|
|
/**
|
|
* Component that renders the scene as card for the <NavigationCardStack />.
|
|
*/
|
|
class NavigationCard extends React.Component<any, Props, any> {
|
|
props: Props;
|
|
|
|
static propTypes = {
|
|
...NavigationPropTypes.SceneRendererProps,
|
|
onComponentRef: PropTypes.func.isRequired,
|
|
onNavigateBack: PropTypes.func,
|
|
panHandlers: NavigationPropTypes.panHandlers,
|
|
pointerEvents: PropTypes.string.isRequired,
|
|
renderScene: PropTypes.func.isRequired,
|
|
style: PropTypes.any,
|
|
};
|
|
|
|
render(): React.Element<any> {
|
|
const {
|
|
panHandlers,
|
|
pointerEvents,
|
|
renderScene,
|
|
style,
|
|
...props /* NavigationSceneRendererProps */
|
|
} = this.props;
|
|
|
|
const viewStyle = style === undefined ?
|
|
NavigationCardStackStyleInterpolator.forHorizontal(props) :
|
|
style;
|
|
|
|
const viewPanHandlers = panHandlers === undefined ?
|
|
NavigationCardStackPanResponder.forHorizontal({
|
|
...props,
|
|
onNavigateBack: this.props.onNavigateBack,
|
|
}) :
|
|
panHandlers;
|
|
|
|
return (
|
|
<Animated.View
|
|
{...viewPanHandlers}
|
|
pointerEvents={pointerEvents}
|
|
ref={this.props.onComponentRef}
|
|
style={[styles.main, viewStyle]}>
|
|
{renderScene(props)}
|
|
</Animated.View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
main: {
|
|
backgroundColor: '#E9E9EF',
|
|
bottom: 0,
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
shadowColor: 'black',
|
|
shadowOffset: {width: 0, height: 0},
|
|
shadowOpacity: 0.4,
|
|
shadowRadius: 10,
|
|
top: 0,
|
|
},
|
|
});
|
|
|
|
NavigationCard = NavigationPointerEventsContainer.create(NavigationCard);
|
|
|
|
NavigationCard.CardStackPanResponder = NavigationCardStackPanResponder;
|
|
NavigationCard.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
|
|
NavigationCard.PagerPanResponder = NavigationPagerPanResponder;
|
|
NavigationCard.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
|
|
|
|
module.exports = NavigationCard;
|