Merge pull request #5 from lawnstarter/update-items-from-props

Update items from props

Author: lfkwtz

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
     "extends": "airbnb",
     "rules": {
+        'no-use-before-define': 0,
         'react/jsx-filename-extension': 0,
         'object-curly-newline': [2, { 'consistent': true }]
     }

README.md

@@ -17,8 +17,6 @@ For either platform, you can alternatively pass down a child element that will b
 ### Installing
 
 `npm install react-native-picker-select`
-or
-`yarn add react-native-picker-select`
 
 ### Usage
 
@@ -40,14 +38,15 @@ or
 **Optional Props**
 * `placeholder` - object
   * An override for the default placeholder object with a label of `Select an item...` and a value of `null`
+  * An empty object can be used if you'd like to disable the placeholder entirely
 * `hideDoneBar` - boolean
   * For the iOS component, hides the bar with tabbing arrows and Done link to exit the modal. While this is typical on `<select>` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it.
 * `hideIcon` - boolean
   * For the iOS component, hides the floating downward arrow on the right side of the input box
 * `disabled` - boolean
   * Disables interaction with the component
 * `value` - any
-  * Will attempt to locate a matching value from the `items` array by checking each item's `value` key. If found, it will update the component to show that item as selected. If the value is not found, it will default to the placeholder.
+  * Will attempt to locate a matching value from the `items` array by checking each item's `value` property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item.
 * `style` - object
   * Style overrides for most parts of the component. More details below.
 

example/example-headless.js

@@ -6,35 +6,37 @@ import {
 } from 'react-native';
 import RNPickerSelect from 'react-native-picker-select';
 
-import CustomButton from '.components/CustomButton'
+import CustomButton from '.components/CustomButton';
 
 export default class App extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       favColor: '',
+      items: [
+        {
+          label: 'Red',
+          value: 'red',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+        {
+          label: 'Blue',
+          value: 'blue',
+        },
+      ],
     };
   }
 
   render() {
     return (
       <View style={styles.container}>
         <RNPickerSelect
-          items={[
-          {
-            label: 'Red',
-            value: 'red',
-          },
-          {
-            label: 'Orange',
-            value: 'orange',
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-          },
-        ]}
+          items={this.state.items}
+          placeholder={{}}
           onSelect={
           (item) => {
             this.setState({
@@ -43,7 +45,7 @@ export default class App extends React.Component {
            }
         }
         >
-            <CustomButton text="Select your favorite color"/>
+          <CustomButton text="Select your favorite color" />
         </RNPickerSelect>
       </View>
     );
@@ -57,4 +59,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     paddingHorizontal: 10,
   },
-});
+});

example/example.js

@@ -12,17 +12,37 @@ export default class App extends React.Component {
 
     this.state = {
       favColor: '',
+      items: [
+        {
+          label: 'Red',
+          value: 'red',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+        {
+          label: 'Blue',
+          value: 'blue',
+        },
+      ],
     };
   }
 
-  // if the component is using the optional `value` prop, the parent
-  // has the abililty to both set the initial value and also update it
   componentDidMount() {
+    // if the component is using the optional `value` prop, the parent
+    // has the abililty to both set the initial value and also update it
     setTimeout(() => {
       this.setState({
         favColor: 'red',
       });
     }, 1000);
+
+    setTimeout(() => {
+      this.setState({
+        items: items.concat([{ value: 'purple', label: 'Purple' }]),
+      });
+    }, 2000);
   }
 
   render() {
@@ -34,20 +54,7 @@ export default class App extends React.Component {
             label: 'Select a color...',
             value: null,
           }}
-          items={[
-          {
-            label: 'Red',
-            value: 'red',
-          },
-          {
-            label: 'Orange',
-            value: 'orange',
-          },
-          {
-            label: 'Blue',
-            value: 'blue',
-          },
-        ]}
+          items={this.state.items}
           onSelect={
           (item) => {
             this.setState({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-picker-select",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
   "license": "MIT",
   "author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>",

src/index.js

@@ -22,11 +22,12 @@ export default class RNPickerSelect extends PureComponent {
       this.placeholder = { label: props.placeholder, value: null };
     }
 
-    this.itemsWithPlaceholder = [this.placeholder].concat(props.items);
+    this.noPlaceholder = isEqual(this.placeholder, {});
+    this.items = this.noPlaceholder ? props.items : [this.placeholder].concat(props.items);
 
     this.state = {
-      items: this.itemsWithPlaceholder,
-      selectedItem: this.itemsWithPlaceholder.find(item => isEqual(item.value, props.value)) || this.placeholder,
+      items: this.items,
+      selectedItem: this.items.find(item => isEqual(item.value, props.value)) || this.items[0],
       showPicker: false,
     };
 
@@ -35,8 +36,16 @@ export default class RNPickerSelect extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!nextProps.value) { return; }
-    const newSelectedItem = this.state.items.find(item => isEqual(item.value, nextProps.value)) || this.placeholder;
+    // update items if items prop changes
+    if (!isEqual(this.state.items, nextProps.items)) {
+      this.setState({
+        items: this.noPlaceholder ? nextProps.items : [this.placeholder].concat(nextProps.items),
+      });
+    }
+
+    // update selectedItem if value prop is defined and differs from currently selected item
+    if (this.props.value === 'undefined') { return; }
+    const newSelectedItem = this.state.items.find(item => isEqual(item.value, nextProps.value)) || this.items[0];
     if (this.state.selectedItem !== newSelectedItem) {
       this.setState({
         selectedItem: newSelectedItem,
@@ -65,7 +74,7 @@ export default class RNPickerSelect extends PureComponent {
 
   renderPlaceholderStyle() {
     const styleModifiers = {};
-    if (this.state.selectedItem.label === this.placeholder.label) {
+    if (!this.noPlaceholder && this.state.selectedItem.label === this.placeholder.label) {
       styleModifiers.color = this.props.style.placeholderColor || '#C7C7CD';
     }
     return styleModifiers;

test/test.js

@@ -3,25 +3,29 @@ import { Platform } from 'react-native';
 import RNPickerSelect from '../src/';
 
 const selectItems = [
+  {
+    label: 'Red',
+    value: 'red',
+  },
   {
     label: 'Orange',
     value: 'orange',
   },
   {
-    label: 'Red',
-    value: 'red',
+    label: 'Yellow',
+    value: 'yellow',
   },
   {
     label: 'Green',
     value: 'green',
   },
   {
-    label: 'Purple',
-    value: 'purple',
+    label: 'Blue',
+    value: 'blue',
   },
   {
-    label: 'Yellow',
-    value: 'yellow',
+    label: 'Indigo',
+    value: 'indigo',
   },
 ];
 
@@ -31,14 +35,14 @@ const placeholder = {
 };
 
 describe('RNPickerSelect', () => {
-  it('should set the picked value to state', () => {
+  it('should set the selected value to state', () => {
     const wrapper = shallow(<RNPickerSelect
       items={selectItems}
       placeholder={placeholder}
       onSelect={() => {}}
     />);
 
-    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 1);
+    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 2);
     expect(wrapper.state().selectedItem.value).toEqual('orange');
   });
 
@@ -50,8 +54,8 @@ describe('RNPickerSelect', () => {
       onSelect={onSelectSpy}
     />);
 
-    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 1);
-    expect(onSelectSpy).toHaveBeenCalledWith({ index: 1, value: 'orange' });
+    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 2);
+    expect(onSelectSpy).toHaveBeenCalledWith({ index: 2, value: 'orange' });
   });
 
   it('should show the picker when pressed', () => {
@@ -79,7 +83,7 @@ describe('RNPickerSelect', () => {
     expect(wrapper.state().showPicker).toEqual(false);
   });
 
-  it('should update the picked value when the parent updates', () => {
+  it('should update the selected value when the `value` prop updates', () => {
     const wrapper = shallow(<RNPickerSelect
       items={selectItems}
       placeholder={placeholder}
@@ -92,15 +96,53 @@ describe('RNPickerSelect', () => {
     expect(wrapper.state().selectedItem.value).toEqual('orange');
   });
 
-  it('should set the picked value to state (Android)', () => {
+  it('should update the items when the `item` prop updates', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+    />);
+
+    expect(wrapper.state().items).toEqual([placeholder].concat(selectItems));
+
+    const selectItemsPlusViolet = selectItems.concat([{ label: 'Violet', value: 'violet' }]);
+
+    wrapper.setProps({ items: selectItemsPlusViolet });
+    expect(wrapper.state().items).toEqual([placeholder].concat(selectItemsPlusViolet));
+  });
+
+  it('should should handle having no placeholder', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={{}}
+      onSelect={() => {}}
+    />);
+
+    expect(wrapper.state().items).toEqual(selectItems);
+  });
+
+  it('should should reset to the first item (typically the placeholder) if a value is passed in that doesn\'t exist in the `items` array', () => {
+    const wrapper = shallow(<RNPickerSelect
+      items={selectItems}
+      placeholder={placeholder}
+      onSelect={() => {}}
+    />);
+
+    wrapper.find('[testId="RNPickerSelectIOS"]').props().onValueChange('orange', 2);
+    expect(wrapper.state().selectedItem.value).toEqual('orange');
+    wrapper.setProps({ value: 'violet' });
+    expect(wrapper.state().selectedItem).toEqual(placeholder);
+  });
+
+  it('should set the selected value to state (Android)', () => {
     Platform.OS = 'android';
     const wrapper = shallow(<RNPickerSelect
       items={selectItems}
       placeholder={placeholder}
       onSelect={() => {}}
     />);
 
-    wrapper.find('[testId="RNPickerSelectAndroid"]').props().onValueChange('orange', 1);
+    wrapper.find('[testId="RNPickerSelectAndroid"]').props().onValueChange('orange', 2);
     expect(wrapper.state().selectedItem.value).toEqual('orange');
   });
 });