147 lines
3.8 KiB
JavaScript
147 lines
3.8 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-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.
|
|
*
|
|
* @providesModule TabBarItemIOS
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var Image = require('Image');
|
|
var React = require('React');
|
|
var StaticContainer = require('StaticContainer.react');
|
|
var StyleSheet = require('StyleSheet');
|
|
var View = require('View');
|
|
|
|
var requireNativeComponent = require('requireNativeComponent');
|
|
|
|
var TabBarItemIOS = React.createClass({
|
|
propTypes: {
|
|
/**
|
|
* Little red bubble that sits at the top right of the icon.
|
|
*/
|
|
badge: React.PropTypes.oneOfType([
|
|
React.PropTypes.string,
|
|
React.PropTypes.number,
|
|
]),
|
|
/**
|
|
* Items comes with a few predefined system icons. Note that if you are
|
|
* using them, the title and selectedIcon will be overriden with the
|
|
* system ones.
|
|
*/
|
|
systemIcon: React.PropTypes.oneOf([
|
|
'bookmarks',
|
|
'contacts',
|
|
'downloads',
|
|
'favorites',
|
|
'featured',
|
|
'history',
|
|
'more',
|
|
'most-recent',
|
|
'most-viewed',
|
|
'recents',
|
|
'search',
|
|
'top-rated',
|
|
]),
|
|
/**
|
|
* A custom icon for the tab. It is ignored when a system icon is defined.
|
|
*/
|
|
icon: Image.propTypes.source,
|
|
/**
|
|
* A custom icon when the tab is selected. It is ignored when a system
|
|
* icon is defined. If left empty, the icon will be tinted in blue.
|
|
*/
|
|
selectedIcon: Image.propTypes.source,
|
|
/**
|
|
* Callback when this tab is being selected, you should change the state of your
|
|
* component to set selected={true}.
|
|
*/
|
|
onPress: React.PropTypes.func,
|
|
/**
|
|
* It specifies whether the children are visible or not. If you see a
|
|
* blank content, you probably forgot to add a selected one.
|
|
*/
|
|
selected: React.PropTypes.bool,
|
|
/**
|
|
* React style object.
|
|
*/
|
|
style: View.propTypes.style,
|
|
/**
|
|
* Text that appears under the icon. It is ignored when a system icon
|
|
* is defined.
|
|
*/
|
|
title: React.PropTypes.string,
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
hasBeenSelected: false,
|
|
};
|
|
},
|
|
|
|
componentWillMount: function() {
|
|
if (this.props.selected) {
|
|
this.setState({hasBeenSelected: true});
|
|
}
|
|
},
|
|
|
|
componentWillReceiveProps: function(nextProps: { selected?: boolean }) {
|
|
if (this.state.hasBeenSelected || nextProps.selected) {
|
|
this.setState({hasBeenSelected: true});
|
|
}
|
|
},
|
|
|
|
render: function() {
|
|
var tabContents = null;
|
|
// if the tab has already been shown once, always continue to show it so we
|
|
// preserve state between tab transitions
|
|
if (this.state.hasBeenSelected) {
|
|
tabContents =
|
|
<StaticContainer shouldUpdate={this.props.selected}>
|
|
{this.props.children}
|
|
</StaticContainer>;
|
|
} else {
|
|
tabContents = <View />;
|
|
}
|
|
|
|
var icon = this.props.systemIcon || (
|
|
this.props.icon && this.props.icon.uri
|
|
);
|
|
|
|
var badge = typeof this.props.badge === 'number' ?
|
|
'' + this.props.badge :
|
|
this.props.badge;
|
|
|
|
return (
|
|
<RCTTabBarItem
|
|
icon={icon}
|
|
selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
|
|
onPress={this.props.onPress}
|
|
selected={this.props.selected}
|
|
badge={badge}
|
|
title={this.props.title}
|
|
style={[styles.tab, this.props.style]}>
|
|
{tabContents}
|
|
</RCTTabBarItem>
|
|
);
|
|
}
|
|
});
|
|
|
|
var styles = StyleSheet.create({
|
|
tab: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
}
|
|
});
|
|
|
|
var RCTTabBarItem = requireNativeComponent('RCTTabBarItem', TabBarItemIOS);
|
|
|
|
module.exports = TabBarItemIOS;
|