From 421667ccae7405725224d6be20d045fef4c9df1e Mon Sep 17 00:00:00 2001 From: empyrical Date: Sun, 23 Sep 2018 22:33:25 -0700 Subject: [PATCH] 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 --- Libraries/Components/Picker/Picker.js | 173 ++++++++---------- .../Picker/PickerAndroid.android.js | 56 ++---- 2 files changed, 99 insertions(+), 130 deletions(-) diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index 3a367ad66..42e00eab6 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/Libraries/Components/Picker/Picker.js @@ -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 { 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<{ * * */ -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 { /** * 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 diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index 7fc2093a6..19d9b7d19 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -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 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 { /* $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 ; } - _onChange = (event: Event) => { + _onChange = (event: PickerAndroidChangeEvent) => { if (this.props.onValueChange) { const position = event.nativeEvent.position; if (position >= 0) {