react-native/Examples/UIExplorer/UIExplorerPage.js

80 lines
2.1 KiB
JavaScript

/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @providesModule UIExplorerPage
* @flow
*/
'use strict';
var React = require('react-native');
var {
ScrollView,
StyleSheet,
View,
} = React;
var UIExplorerTitle = require('./UIExplorerTitle');
var UIExplorerPage = React.createClass({
propTypes: {
keyboardShouldPersistTaps: React.PropTypes.bool,
noScroll: React.PropTypes.bool,
noSpacer: React.PropTypes.bool,
},
render: function() {
var ContentWrapper;
var wrapperProps = {};
if (this.props.noScroll) {
ContentWrapper = (View: ReactClass<any, any, any>);
} else {
ContentWrapper = (ScrollView: ReactClass<any, any, any>);
wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
wrapperProps.keyboardShouldPersistTaps = true;
wrapperProps.keyboardDismissMode = 'interactive';
}
var title = this.props.title ?
<UIExplorerTitle title={this.props.title} /> :
null;
var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
return (
<View style={styles.container}>
{title}
<ContentWrapper
style={styles.wrapper}
{...wrapperProps}>
{this.props.children}
{spacer}
</ContentWrapper>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
backgroundColor: '#e9eaed',
flex: 1,
},
spacer: {
height: 270,
},
wrapper: {
flex: 1,
paddingTop: 10,
},
});
module.exports = UIExplorerPage;