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:
parent
afb7fc2aab
commit
421667ccae
|
@ -10,64 +10,103 @@
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const ColorPropType = require('ColorPropType');
|
|
||||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
|
||||||
const PickerAndroid = require('PickerAndroid');
|
const PickerAndroid = require('PickerAndroid');
|
||||||
const PickerIOS = require('PickerIOS');
|
const PickerIOS = require('PickerIOS');
|
||||||
const Platform = require('Platform');
|
const Platform = require('Platform');
|
||||||
const PropTypes = require('prop-types');
|
|
||||||
const React = require('React');
|
const React = require('React');
|
||||||
const StyleSheetPropType = require('StyleSheetPropType');
|
|
||||||
const TextStylePropTypes = require('TextStylePropTypes');
|
|
||||||
const UnimplementedView = require('UnimplementedView');
|
const UnimplementedView = require('UnimplementedView');
|
||||||
const ViewStylePropTypes = require('ViewStylePropTypes');
|
|
||||||
|
|
||||||
const itemStylePropType = StyleSheetPropType(TextStylePropTypes);
|
import type {TextStyleProp} from 'StyleSheet';
|
||||||
|
import type {ColorValue} from 'StyleSheetTypes';
|
||||||
const pickerStyleType = StyleSheetPropType({
|
|
||||||
...ViewStylePropTypes,
|
|
||||||
color: ColorPropType,
|
|
||||||
});
|
|
||||||
|
|
||||||
const MODE_DIALOG = 'dialog';
|
const MODE_DIALOG = 'dialog';
|
||||||
const MODE_DROPDOWN = 'dropdown';
|
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.
|
* Individual selectable item in a Picker.
|
||||||
*/
|
*/
|
||||||
class PickerItem extends React.Component<{
|
class PickerItem extends React.Component<PickerItemProps> {
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
// The items are not rendered directly
|
// The items are not rendered directly
|
||||||
throw null;
|
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:
|
* 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.Item label="JavaScript" value="js" />
|
||||||
* </Picker>
|
* </Picker>
|
||||||
*/
|
*/
|
||||||
class Picker extends React.Component<{
|
class Picker extends React.Component<PickerProps> {
|
||||||
style?: $FlowFixMe,
|
|
||||||
selectedValue?: any,
|
|
||||||
onValueChange?: Function,
|
|
||||||
enabled?: boolean,
|
|
||||||
mode?: 'dialog' | 'dropdown',
|
|
||||||
itemStyle?: $FlowFixMe,
|
|
||||||
prompt?: string,
|
|
||||||
testID?: string,
|
|
||||||
}> {
|
|
||||||
/**
|
/**
|
||||||
* On Android, display the options in a dialog.
|
* On Android, display the options in a dialog.
|
||||||
*/
|
*/
|
||||||
|
@ -104,51 +134,6 @@ class Picker extends React.Component<{
|
||||||
mode: MODE_DIALOG,
|
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() {
|
render() {
|
||||||
if (Platform.OS === 'ios') {
|
if (Platform.OS === 'ios') {
|
||||||
// $FlowFixMe found when converting React.createClass to ES6
|
// $FlowFixMe found when converting React.createClass to ES6
|
||||||
|
|
|
@ -10,13 +10,8 @@
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const ColorPropType = require('ColorPropType');
|
|
||||||
const DeprecatedViewPropTypes = require('DeprecatedViewPropTypes');
|
|
||||||
const React = require('React');
|
const React = require('React');
|
||||||
const ReactPropTypes = require('prop-types');
|
|
||||||
const StyleSheet = require('StyleSheet');
|
const StyleSheet = require('StyleSheet');
|
||||||
const StyleSheetPropType = require('StyleSheetPropType');
|
|
||||||
const ViewStylePropTypes = require('ViewStylePropTypes');
|
|
||||||
|
|
||||||
const processColor = require('processColor');
|
const processColor = require('processColor');
|
||||||
const requireNativeComponent = require('requireNativeComponent');
|
const requireNativeComponent = require('requireNativeComponent');
|
||||||
|
@ -27,41 +22,30 @@ const DialogPicker = requireNativeComponent('AndroidDialogPicker');
|
||||||
const REF_PICKER = 'picker';
|
const REF_PICKER = 'picker';
|
||||||
const MODE_DROPDOWN = 'dropdown';
|
const MODE_DROPDOWN = 'dropdown';
|
||||||
|
|
||||||
const pickerStyleType = StyleSheetPropType({
|
import type {SyntheticEvent} from 'CoreEventTypes';
|
||||||
...ViewStylePropTypes,
|
import type {TextStyleProp} from 'StyleSheet';
|
||||||
color: ColorPropType,
|
|
||||||
});
|
|
||||||
|
|
||||||
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.
|
* Not exposed as a public API - use <Picker> instead.
|
||||||
*/
|
*/
|
||||||
class PickerAndroid extends React.Component<
|
class PickerAndroid extends React.Component<PickerAndroidProps, *> {
|
||||||
{
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
||||||
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
||||||
* when making Flow check .android.js files. */
|
* when making Flow check .android.js files. */
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
|
@ -122,7 +106,7 @@ class PickerAndroid extends React.Component<
|
||||||
return <Picker ref={REF_PICKER} {...nativeProps} />;
|
return <Picker ref={REF_PICKER} {...nativeProps} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
_onChange = (event: Event) => {
|
_onChange = (event: PickerAndroidChangeEvent) => {
|
||||||
if (this.props.onValueChange) {
|
if (this.props.onValueChange) {
|
||||||
const position = event.nativeEvent.position;
|
const position = event.nativeEvent.position;
|
||||||
if (position >= 0) {
|
if (position >= 0) {
|
||||||
|
|
Loading…
Reference in New Issue