Add appropriate deprecate warnings for picker API (#986)

* Add appropriate deprecate warnings for picker API

* Remove redundant TODO comments

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -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';
@@ -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: [],
@@ -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>
     );

src/components/picker/PickerItem.js

@@ -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';
@@ -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
@@ -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,
     /**
@@ -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);

src/components/picker/index.js

@@ -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';
@@ -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) {