TabBarIOS: Remove PropTypes (#21315)
Summary: Part of: https://github.com/react-native-community/discussions-and-proposals/issues/29 This PR removes the prop types from the TabBarIOS files, and cleans up their flow types. Pull Request resolved: https://github.com/facebook/react-native/pull/21315 Reviewed By: TheSavior Differential Revision: D10031191 Pulled By: rsnara fbshipit-source-id: 50dc26b858ea5b065a3934080af7e6b0e36c7f46
This commit is contained in:
empyrical
Facebook Github Bot
parent
b41ce43c07
commit
0a04bb7030
|
|
@ -10,77 +10,67 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const ColorPropType = require('ColorPropType');
|
||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('React');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
const TabBarItemIOS = require('TabBarItemIOS');
|
||||
|
||||
const requireNativeComponent = require('requireNativeComponent');
|
||||
|
||||
import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
|
||||
import type {ViewProps} from 'ViewPropTypes';
|
||||
import type {ColorValue} from 'StyleSheetTypes';
|
||||
|
||||
const RCTTabBar = requireNativeComponent('RCTTabBar');
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
...ViewProps,
|
||||
style?: DangerouslyImpreciseStyleProp,
|
||||
unselectedTintColor?: string,
|
||||
tintColor?: string,
|
||||
unselectedItemTintColor?: string,
|
||||
barTintColor?: string,
|
||||
barStyle?: 'default' | 'black',
|
||||
translucent?: boolean,
|
||||
itemPositioning?: 'fill' | 'center' | 'auto',
|
||||
children: React.Node,
|
||||
|
||||
/**
|
||||
* Color of text on unselected tabs
|
||||
*/
|
||||
unselectedTintColor?: ColorValue,
|
||||
|
||||
/**
|
||||
* Color of the currently selected tab icon
|
||||
*/
|
||||
tintColor?: ColorValue,
|
||||
|
||||
/**
|
||||
* Color of unselected tab icons. Available since iOS 10.
|
||||
*/
|
||||
unselectedItemTintColor?: ColorValue,
|
||||
|
||||
/**
|
||||
* Background color of the tab bar
|
||||
*/
|
||||
barTintColor?: ColorValue,
|
||||
|
||||
/**
|
||||
* The style of the tab bar. Supported values are 'default', 'black'.
|
||||
* Use 'black' instead of setting `barTintColor` to black. This produces
|
||||
* a tab bar with the native iOS style with higher translucency.
|
||||
*/
|
||||
barStyle?: ?('default' | 'black'),
|
||||
|
||||
/**
|
||||
* A Boolean value that indicates whether the tab bar is translucent
|
||||
*/
|
||||
translucent?: ?boolean,
|
||||
|
||||
/**
|
||||
* Specifies tab bar item positioning. Available values are:
|
||||
* - fill - distributes items across the entire width of the tab bar
|
||||
* - center - centers item in the available tab bar space
|
||||
* - auto (default) - distributes items dynamically according to the
|
||||
* user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
|
||||
* this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
|
||||
* it defaults to center.
|
||||
*/
|
||||
itemPositioning?: ?('fill' | 'center' | 'auto'),
|
||||
|}>;
|
||||
|
||||
class TabBarIOS extends React.Component<Props> {
|
||||
static Item = TabBarItemIOS;
|
||||
|
||||
static propTypes = {
|
||||
...DeprecatedViewPropTypes,
|
||||
style: DeprecatedViewPropTypes.style,
|
||||
/**
|
||||
* Color of text on unselected tabs
|
||||
*/
|
||||
unselectedTintColor: ColorPropType,
|
||||
/**
|
||||
* Color of the currently selected tab icon
|
||||
*/
|
||||
tintColor: ColorPropType,
|
||||
/**
|
||||
* Color of unselected tab icons. Available since iOS 10.
|
||||
*/
|
||||
unselectedItemTintColor: ColorPropType,
|
||||
/**
|
||||
* Background color of the tab bar
|
||||
*/
|
||||
barTintColor: ColorPropType,
|
||||
/**
|
||||
* The style of the tab bar. Supported values are 'default', 'black'.
|
||||
* Use 'black' instead of setting `barTintColor` to black. This produces
|
||||
* a tab bar with the native iOS style with higher translucency.
|
||||
*/
|
||||
barStyle: PropTypes.oneOf(['default', 'black']),
|
||||
/**
|
||||
* A Boolean value that indicates whether the tab bar is translucent
|
||||
*/
|
||||
translucent: PropTypes.bool,
|
||||
/**
|
||||
* Specifies tab bar item positioning. Available values are:
|
||||
* - fill - distributes items across the entire width of the tab bar
|
||||
* - center - centers item in the available tab bar space
|
||||
* - auto (default) - distributes items dynamically according to the
|
||||
* user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
|
||||
* this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
|
||||
* it defaults to center.
|
||||
*/
|
||||
itemPositioning: PropTypes.oneOf(['fill', 'center', 'auto']),
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<RCTTabBar
|
||||
|
|
|
|||
|
|
@ -10,10 +10,7 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const ColorPropType = require('ColorPropType');
|
||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
||||
const Image = require('Image');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('React');
|
||||
const StaticContainer = require('StaticContainer.react');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
|
|
@ -21,78 +18,93 @@ const View = require('View');
|
|||
|
||||
const requireNativeComponent = require('requireNativeComponent');
|
||||
|
||||
class TabBarItemIOS extends React.Component {
|
||||
static propTypes = {
|
||||
...DeprecatedViewPropTypes,
|
||||
/**
|
||||
* Little red bubble that sits at the top right of the icon.
|
||||
*/
|
||||
badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
/**
|
||||
* Background color for the badge. Available since iOS 10.
|
||||
*/
|
||||
badgeColor: ColorPropType,
|
||||
/**
|
||||
* Items comes with a few predefined system icons. Note that if you are
|
||||
* using them, the title and selectedIcon will be overridden with the
|
||||
* system ones.
|
||||
*/
|
||||
systemIcon: 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: PropTypes.func,
|
||||
/**
|
||||
* If set to true it renders the image as original,
|
||||
* it defaults to being displayed as a template
|
||||
*/
|
||||
renderAsOriginal: PropTypes.bool,
|
||||
/**
|
||||
* It specifies whether the children are visible or not. If you see a
|
||||
* blank content, you probably forgot to add a selected one.
|
||||
*/
|
||||
selected: PropTypes.bool,
|
||||
/**
|
||||
* React style object.
|
||||
*/
|
||||
style: DeprecatedViewPropTypes.style,
|
||||
/**
|
||||
* Text that appears under the icon. It is ignored when a system icon
|
||||
* is defined.
|
||||
*/
|
||||
title: PropTypes.string,
|
||||
/**
|
||||
*(Apple TV only)* When set to true, this view will be focusable
|
||||
* and navigable using the Apple TV remote.
|
||||
*
|
||||
* @platform ios
|
||||
*/
|
||||
isTVSelectable: PropTypes.bool,
|
||||
};
|
||||
import type {ViewProps} from 'ViewPropTypes';
|
||||
import type {ColorValue} from 'StyleSheetTypes';
|
||||
import type {SyntheticEvent} from 'CoreEventTypes';
|
||||
import type {ImageSource} from 'ImageSource';
|
||||
|
||||
type Props = $ReadOnly<{|
|
||||
...ViewProps,
|
||||
|
||||
/**
|
||||
* Little red bubble that sits at the top right of the icon.
|
||||
*/
|
||||
badge?: ?(string | number),
|
||||
|
||||
/**
|
||||
* Background color for the badge. Available since iOS 10.
|
||||
*/
|
||||
badgeColor?: ColorValue,
|
||||
|
||||
/**
|
||||
* Items comes with a few predefined system icons. Note that if you are
|
||||
* using them, the title and selectedIcon will be overridden with the
|
||||
* system ones.
|
||||
*/
|
||||
systemIcon?: ?(
|
||||
| '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?: ?ImageSource,
|
||||
|
||||
/**
|
||||
* 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?: ?ImageSource,
|
||||
|
||||
/**
|
||||
* Callback when this tab is being selected, you should change the state of your
|
||||
* component to set selected={true}.
|
||||
*/
|
||||
onPress?: ?(event: SyntheticEvent<null>) => mixed,
|
||||
|
||||
/**
|
||||
* If set to true it renders the image as original,
|
||||
* it defaults to being displayed as a template
|
||||
*/
|
||||
renderAsOriginal?: ?boolean,
|
||||
|
||||
/**
|
||||
* It specifies whether the children are visible or not. If you see a
|
||||
* blank content, you probably forgot to add a selected one.
|
||||
*/
|
||||
selected?: ?boolean,
|
||||
|
||||
/**
|
||||
* Text that appears under the icon. It is ignored when a system icon
|
||||
* is defined.
|
||||
*/
|
||||
title?: ?string,
|
||||
|
||||
/**
|
||||
* *(Apple TV only)* When set to true, this view will be focusable
|
||||
* and navigable using the Apple TV remote.
|
||||
*
|
||||
* @platform ios
|
||||
*/
|
||||
isTVSelectable?: ?boolean,
|
||||
|}>;
|
||||
|
||||
type State = {|
|
||||
hasBeenSelected: boolean,
|
||||
|};
|
||||
|
||||
class TabBarItemIOS extends React.Component<Props, State> {
|
||||
state = {
|
||||
hasBeenSelected: false,
|
||||
};
|
||||
|
|
@ -103,7 +115,7 @@ class TabBarItemIOS extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps: {selected?: boolean}) {
|
||||
UNSAFE_componentWillReceiveProps(nextProps: Props) {
|
||||
if (this.state.hasBeenSelected || nextProps.selected) {
|
||||
this.setState({hasBeenSelected: true});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue