From 8338aa49a08e8b2fcbd2deae87b61cb67e7a390b Mon Sep 17 00:00:00 2001 From: empyrical Date: Sun, 23 Sep 2018 19:49:51 -0600 Subject: [PATCH 1/2] Picker: Remove PropTypes --- Libraries/Components/Picker/Picker.js | 171 ++++++++---------- .../Picker/PickerAndroid.android.js | 58 +++--- 2 files changed, 99 insertions(+), 130 deletions(-) diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index 3a367ad663a5f7..ba554bd0da391a 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'; -/** - * Individual selectable item in a Picker. - */ -class PickerItem extends React.Component<{ +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?: ColorPropType, + + /** + * Color of this item's text. + * @platform android + */ + color?: ColorValue, + + /** + * Used to locate the item in end-to-end tests. + */ 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, - }; +|}>; +/** + * Individual selectable item in a Picker. + */ +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 7fc2093a6cad06..de6e13b4ca7ee7 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, -}); - -type Event = Object; +import type {SyntheticEvent} from 'CoreEventTypes'; +import type {TextStyleProp} from 'StyleSheet'; + +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) { From 6f4d484f15085d124dd5cb2448b41d34c5145f43 Mon Sep 17 00:00:00 2001 From: empyrical Date: Sun, 23 Sep 2018 20:09:17 -0600 Subject: [PATCH 2/2] Fix children proptypes --- Libraries/Components/Picker/Picker.js | 2 +- Libraries/Components/Picker/PickerAndroid.android.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Libraries/Components/Picker/Picker.js b/Libraries/Components/Picker/Picker.js index ba554bd0da391a..42e00eab6694db 100644 --- a/Libraries/Components/Picker/Picker.js +++ b/Libraries/Components/Picker/Picker.js @@ -57,7 +57,7 @@ class PickerItem extends React.Component { } type PickerProps = $ReadOnly<{| - children?: ?React.Node, + children?: React.Node, style?: ?TextStyleProp, /** diff --git a/Libraries/Components/Picker/PickerAndroid.android.js b/Libraries/Components/Picker/PickerAndroid.android.js index de6e13b4ca7ee7..19d9b7d1921bb1 100644 --- a/Libraries/Components/Picker/PickerAndroid.android.js +++ b/Libraries/Components/Picker/PickerAndroid.android.js @@ -32,7 +32,7 @@ type PickerAndroidChangeEvent = SyntheticEvent< >; type PickerAndroidProps = $ReadOnly<{| - children?: ?React.Node, + children?: React.Node, style?: ?TextStyleProp, selectedValue?: any, enabled?: ?boolean,