Picker: Remove PropTypes (#21281)
Summary: Part of: https://github.com/react-native-community/discussions-and-proposals/issues/29 This pull request removes all PropTypes from the various files for `Picker` and cleans up their flow types. Pull Request resolved: https://github.com/facebook/react-native/pull/21281 Differential Revision: D10007224 Pulled By: TheSavior fbshipit-source-id: 5b8b7918cc918dd77e7ab27c9e3921ffbeb4ff73
This commit is contained in:
empyrical
Facebook Github Bot
parent
afb7fc2aab
commit
421667ccae
|
|
@ -10,64 +10,103 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const ColorPropType = require('ColorPropType');
|
||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
||||
const PickerAndroid = require('PickerAndroid');
|
||||
const PickerIOS = require('PickerIOS');
|
||||
const Platform = require('Platform');
|
||||
const PropTypes = require('prop-types');
|
||||
const React = require('React');
|
||||
const StyleSheetPropType = require('StyleSheetPropType');
|
||||
const TextStylePropTypes = require('TextStylePropTypes');
|
||||
const UnimplementedView = require('UnimplementedView');
|
||||
const ViewStylePropTypes = require('ViewStylePropTypes');
|
||||
|
||||
const itemStylePropType = StyleSheetPropType(TextStylePropTypes);
|
||||
|
||||
const pickerStyleType = StyleSheetPropType({
|
||||
...ViewStylePropTypes,
|
||||
color: ColorPropType,
|
||||
});
|
||||
import type {TextStyleProp} from 'StyleSheet';
|
||||
import type {ColorValue} from 'StyleSheetTypes';
|
||||
|
||||
const MODE_DIALOG = 'dialog';
|
||||
const MODE_DROPDOWN = 'dropdown';
|
||||
|
||||
type PickerItemProps = $ReadOnly<{|
|
||||
/**
|
||||
* Text to display for this item.
|
||||
*/
|
||||
label: string,
|
||||
|
||||
/**
|
||||
* The value to be passed to picker's `onValueChange` callback when
|
||||
* this item is selected. Can be a string or an integer.
|
||||
*/
|
||||
value?: any,
|
||||
|
||||
/**
|
||||
* Color of this item's text.
|
||||
* @platform android
|
||||
*/
|
||||
color?: ColorValue,
|
||||
|
||||
/**
|
||||
* Used to locate the item in end-to-end tests.
|
||||
*/
|
||||
testID?: string,
|
||||
|}>;
|
||||
|
||||
/**
|
||||
* Individual selectable item in a Picker.
|
||||
*/
|
||||
class PickerItem extends React.Component<{
|
||||
label: string,
|
||||
value?: any,
|
||||
color?: ColorPropType,
|
||||
testID?: string,
|
||||
}> {
|
||||
static propTypes = {
|
||||
/**
|
||||
* Text to display for this item.
|
||||
*/
|
||||
label: PropTypes.string.isRequired,
|
||||
/**
|
||||
* The value to be passed to picker's `onValueChange` callback when
|
||||
* this item is selected. Can be a string or an integer.
|
||||
*/
|
||||
value: PropTypes.any,
|
||||
/**
|
||||
* Color of this item's text.
|
||||
* @platform android
|
||||
*/
|
||||
color: ColorPropType,
|
||||
/**
|
||||
* Used to locate the item in end-to-end tests.
|
||||
*/
|
||||
testID: PropTypes.string,
|
||||
};
|
||||
|
||||
class PickerItem extends React.Component<PickerItemProps> {
|
||||
render() {
|
||||
// The items are not rendered directly
|
||||
throw null;
|
||||
}
|
||||
}
|
||||
|
||||
type PickerProps = $ReadOnly<{|
|
||||
children?: React.Node,
|
||||
style?: ?TextStyleProp,
|
||||
|
||||
/**
|
||||
* Value matching value of one of the items. Can be a string or an integer.
|
||||
*/
|
||||
selectedValue?: any,
|
||||
|
||||
/**
|
||||
* Callback for when an item is selected. This is called with the following parameters:
|
||||
* - `itemValue`: the `value` prop of the item that was selected
|
||||
* - `itemPosition`: the index of the selected item in this picker
|
||||
*/
|
||||
onValueChange?: ?(newValue: any, newIndex: number) => mixed,
|
||||
|
||||
/**
|
||||
* If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
* selection.
|
||||
* @platform android
|
||||
*/
|
||||
enabled?: ?boolean,
|
||||
|
||||
/**
|
||||
* On Android, specifies how to display the selection items when the user taps on the picker:
|
||||
*
|
||||
* - 'dialog': Show a modal dialog. This is the default.
|
||||
* - 'dropdown': Shows a dropdown anchored to the picker view
|
||||
*
|
||||
* @platform android
|
||||
*/
|
||||
mode?: ?('dialog' | 'dropdown'),
|
||||
|
||||
/**
|
||||
* Style to apply to each of the item labels.
|
||||
* @platform ios
|
||||
*/
|
||||
itemStyle?: ?TextStyleProp,
|
||||
|
||||
/**
|
||||
* Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
|
||||
* @platform android
|
||||
*/
|
||||
prompt?: ?string,
|
||||
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID?: ?string,
|
||||
|}>;
|
||||
|
||||
/**
|
||||
* Renders the native picker component on iOS and Android. Example:
|
||||
*
|
||||
|
|
@ -78,16 +117,7 @@ class PickerItem extends React.Component<{
|
|||
* <Picker.Item label="JavaScript" value="js" />
|
||||
* </Picker>
|
||||
*/
|
||||
class Picker extends React.Component<{
|
||||
style?: $FlowFixMe,
|
||||
selectedValue?: any,
|
||||
onValueChange?: Function,
|
||||
enabled?: boolean,
|
||||
mode?: 'dialog' | 'dropdown',
|
||||
itemStyle?: $FlowFixMe,
|
||||
prompt?: string,
|
||||
testID?: string,
|
||||
}> {
|
||||
class Picker extends React.Component<PickerProps> {
|
||||
/**
|
||||
* On Android, display the options in a dialog.
|
||||
*/
|
||||
|
|
@ -104,51 +134,6 @@ class Picker extends React.Component<{
|
|||
mode: MODE_DIALOG,
|
||||
};
|
||||
|
||||
// $FlowFixMe(>=0.41.0)
|
||||
static propTypes = {
|
||||
...DeprecatedViewPropTypes,
|
||||
style: pickerStyleType,
|
||||
/**
|
||||
* Value matching value of one of the items. Can be a string or an integer.
|
||||
*/
|
||||
selectedValue: PropTypes.any,
|
||||
/**
|
||||
* Callback for when an item is selected. This is called with the following parameters:
|
||||
* - `itemValue`: the `value` prop of the item that was selected
|
||||
* - `itemPosition`: the index of the selected item in this picker
|
||||
*/
|
||||
onValueChange: PropTypes.func,
|
||||
/**
|
||||
* If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
* selection.
|
||||
* @platform android
|
||||
*/
|
||||
enabled: PropTypes.bool,
|
||||
/**
|
||||
* On Android, specifies how to display the selection items when the user taps on the picker:
|
||||
*
|
||||
* - 'dialog': Show a modal dialog. This is the default.
|
||||
* - 'dropdown': Shows a dropdown anchored to the picker view
|
||||
*
|
||||
* @platform android
|
||||
*/
|
||||
mode: PropTypes.oneOf(['dialog', 'dropdown']),
|
||||
/**
|
||||
* Style to apply to each of the item labels.
|
||||
* @platform ios
|
||||
*/
|
||||
itemStyle: itemStylePropType,
|
||||
/**
|
||||
* Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
|
||||
* @platform android
|
||||
*/
|
||||
prompt: PropTypes.string,
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
if (Platform.OS === 'ios') {
|
||||
// $FlowFixMe found when converting React.createClass to ES6
|
||||
|
|
|
|||
|
|
@ -10,13 +10,8 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const ColorPropType = require('ColorPropType');
|
||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
||||
const React = require('React');
|
||||
const ReactPropTypes = require('prop-types');
|
||||
const StyleSheet = require('StyleSheet');
|
||||
const StyleSheetPropType = require('StyleSheetPropType');
|
||||
const ViewStylePropTypes = require('ViewStylePropTypes');
|
||||
|
||||
const processColor = require('processColor');
|
||||
const requireNativeComponent = require('requireNativeComponent');
|
||||
|
|
@ -27,41 +22,30 @@ const DialogPicker = requireNativeComponent('AndroidDialogPicker');
|
|||
const REF_PICKER = 'picker';
|
||||
const MODE_DROPDOWN = 'dropdown';
|
||||
|
||||
const pickerStyleType = StyleSheetPropType({
|
||||
...ViewStylePropTypes,
|
||||
color: ColorPropType,
|
||||
});
|
||||
import type {SyntheticEvent} from 'CoreEventTypes';
|
||||
import type {TextStyleProp} from 'StyleSheet';
|
||||
|
||||
type Event = Object;
|
||||
type PickerAndroidChangeEvent = SyntheticEvent<
|
||||
$ReadOnly<{|
|
||||
position: number,
|
||||
|}>,
|
||||
>;
|
||||
|
||||
type PickerAndroidProps = $ReadOnly<{|
|
||||
children?: React.Node,
|
||||
style?: ?TextStyleProp,
|
||||
selectedValue?: any,
|
||||
enabled?: ?boolean,
|
||||
mode?: ?('dialog' | 'dropdown'),
|
||||
onValueChange?: ?(newValue: any, newIndex: number) => mixed,
|
||||
prompt?: ?string,
|
||||
testID?: string,
|
||||
|}>;
|
||||
|
||||
/**
|
||||
* Not exposed as a public API - use <Picker> instead.
|
||||
*/
|
||||
class PickerAndroid extends React.Component<
|
||||
{
|
||||
style?: $FlowFixMe,
|
||||
selectedValue?: any,
|
||||
enabled?: boolean,
|
||||
mode?: 'dialog' | 'dropdown',
|
||||
onValueChange?: Function,
|
||||
prompt?: string,
|
||||
testID?: string,
|
||||
},
|
||||
*,
|
||||
> {
|
||||
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
||||
* when making Flow check .android.js files. */
|
||||
static propTypes = {
|
||||
...DeprecatedViewPropTypes,
|
||||
style: pickerStyleType,
|
||||
selectedValue: ReactPropTypes.any,
|
||||
enabled: ReactPropTypes.bool,
|
||||
mode: ReactPropTypes.oneOf(['dialog', 'dropdown']),
|
||||
onValueChange: ReactPropTypes.func,
|
||||
prompt: ReactPropTypes.string,
|
||||
testID: ReactPropTypes.string,
|
||||
};
|
||||
|
||||
class PickerAndroid extends React.Component<PickerAndroidProps, *> {
|
||||
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
||||
* when making Flow check .android.js files. */
|
||||
constructor(props, context) {
|
||||
|
|
@ -122,7 +106,7 @@ class PickerAndroid extends React.Component<
|
|||
return <Picker ref={REF_PICKER} {...nativeProps} />;
|
||||
}
|
||||
|
||||
_onChange = (event: Event) => {
|
||||
_onChange = (event: PickerAndroidChangeEvent) => {
|
||||
if (this.props.onValueChange) {
|
||||
const position = event.nativeEvent.position;
|
||||
if (position >= 0) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue