Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Picker: Remove PropTypes #21281

Closed
wants to merge 2 commits into from
Closed

Picker: Remove PropTypes #21281

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8338aa4
Picker: Remove PropTypes
empyrical Sep 24, 2018
6f4d484
Fix children proptypes
empyrical Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 78 additions & 93 deletions Libraries/Components/Picker/Picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<PickerItemProps> {
render() {
// The items are not rendered directly
throw null;
}
}

type PickerProps = $ReadOnly<{|
children?: ?React.Node,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

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:
*
Expand All @@ -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.
*/
Expand All @@ -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
Expand Down
58 changes: 21 additions & 37 deletions Libraries/Components/Picker/PickerAndroid.android.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React.Node includes null

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) {
Expand Down Expand Up @@ -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) {
Expand Down