Skip to content

Add appropriate deprecate warnings for picker API #986

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.

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

Merged
merged 2 commits into from
Oct 19, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
30 changes: 20 additions & 10 deletions demo/src/screens/componentScreens/PickerScreen.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import _ from 'lodash';
import React, {Component} from 'react';
import {ScrollView, Image} from 'react-native';
import {
View,
Colors,
Dialog,
Text,
Picker,
Avatar,
Assets,
PanningProvider
} from 'react-native-ui-lib'; //eslint-disable-line
import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider} from 'react-native-ui-lib'; //eslint-disable-line
import contacts from '../../data/conversations';
import tagIcon from '../../assets/icons/tags.png';
import dropdown from '../../assets/icons/chevronDown.png';
Expand All @@ -37,6 +28,7 @@ export default class PickerScreen extends Component {
itemsCount: 1,
// language: {value: 'java', label: 'Java'},
language: undefined,
language2: undefined, // for migrated picker example
languages: [],
nativePickerValue: 'java',
customModalValues: [],
Expand Down Expand Up @@ -239,6 +231,24 @@ export default class PickerScreen extends Component {
/>
))}
</Picker>

<Text text60 marginT-s5 marginB-s2>Migrated Picker</Text>

<Picker
title="Language"
placeholder="Favorite Language"
value={this.state.language2}
onChange={value => this.setState({language2: value})}
topBarProps={{title: 'Languages'}}
showSearch
searchPlaceholder={'Search a language'}
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.dark50}}
// useNativePicker
>
{_.map(options, option => (
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled} />
))}
</Picker>
</View>
</ScrollView>
);
Expand Down
31 changes: 12 additions & 19 deletions src/components/picker/PickerItem.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// TODO: deprecate passing an an object as a value, use label and value props separately
import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
Expand All @@ -11,7 +10,6 @@ import TouchableOpacity from '../touchableOpacity';
import Image from '../image';
import Text from '../text';


/**
* @description: Picker.Item, for configuring the Picker's selectable options
* @extends: TouchableOpacity
Expand All @@ -23,20 +21,19 @@ class PickerItem extends BaseComponent {

static propTypes = {
/**
* [DEPRECATED - please include the label in the value prop] The item label
* Item's value
*/
label: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
/**
* The item value with the following format - {value: ..., label: ...},
* for custom shape use getItemLabel, getItemValue props
* Item's label
*/
value: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
label: PropTypes.string,
/**
* Function to return the label out of the item value prop when value is custom shaped.
* Custom function for the item label (e.g (value) => customLabel)
*/
getItemLabel: PropTypes.func,
/**
* Function to return the value out of the item value prop when value is custom shaped.
* DEPRECATE: Function to return the value out of the item value prop when value is custom shaped.
*/
getItemValue: PropTypes.func,
/**
Expand Down Expand Up @@ -69,19 +66,15 @@ class PickerItem extends BaseComponent {
onSelectedLayout: PropTypes.func
};

/* eslint-disable */
/* constructor(props) {

constructor(props) {
super(props);

if (props.label) {
console.warn('PickerItem \'label\' prop will be deprecated soon. please include label in \'value\' prop. (refer docs)'); //eslint-disable-line
}

if (!_.isObject(props.value)) {
console.warn('PickerItem \'value\' prop type has changed to object, please use it with the following format: {value: ..., label: ...} or use getItemValue & getItemLabel props'); //eslint-disable-line
if (_.isPlainObject(props.value)) {
console.warn('UILib Picker.Item will stop supporting passing object as value & label (e.g {value, label}) in the next major version. Please pass separate label and value props');
}
} */
/* eslint-enable */
}


generateStyles() {
this.styles = createStyles(this.props);
Expand Down
6 changes: 3 additions & 3 deletions src/components/picker/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// TODO: deprecate value allowing passing an object, separate between label and value props
// TODO: extract picker labels from children in order to obtain the correct label to render (similar to NativePicker)

import _ from 'lodash';
import PropTypes from 'prop-types';
import React, {PureComponent} from 'react';
Expand Down Expand Up @@ -160,6 +157,9 @@ class Picker extends PureComponent {
// if (props.useNativePicker && _.isPlainObject(props.value)) {
// console.warn('UILib Picker: don\'t use object as value for native picker, use either string or a number');
// }
if (_.isPlainObject(props.value)) {
console.warn('UILib Picker will stop supporting passing object as value in the next major version. Please use either string or a number as value');
}
}

static getDerivedStateFromProps(nextProps, prevState) {
Expand Down