react-native-picker-select - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

.eslintrc.js

 module.exports = {
     "extends": "airbnb",
     "rules": {
-        'react/jsx-filename-extension': 0
+        'react/jsx-filename-extension': 0,
+        'object-curly-newline': [2, { 'consistent': true }]
     }
 };

example/example.js

@@ -18,8 +18,21 @@ import React from 'react';
 
+  // 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() {
+    setTimeout(() => {
+      this.setState({
+        favColor: 'red',
+      });
+    }, 1000);
+  }
+
   render() {
     return (
       <View style={styles.container}>
-        <Text>What's your favorite color?</Text>
+        <Text>What&rsquo;s your favorite color?</Text>
         <RNPickerSelect
-          placeholder="Select a color..."
+          placeholder={{
+            label: 'Select a color...',
+            value: null,
+          }}
           items={[
@@ -47,2 +60,3 @@ {
           style={{ ...pickerSelectStyles }}
+          value={this.state.favColor}
         />
@@ -49,0 +63,0 @@ </View>

package.json

 {
   "name": "react-native-picker-select",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
@@ -23,2 +23,3 @@ "license": "MIT",
   "devDependencies": {
+    "eslint": "^4.17.0",
     "eslint-config-airbnb": "^16.1.0",
@@ -28,4 +29,6 @@ "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.6.1",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "react": "16.0.0",
+    "react-native": "0.51.0"
   }
 }

README.md

@@ -41,4 +41,4 @@
 **Optional Props**
-* `placeholder` - string
-  * An override for the default placeholder of `Select an item...`
+* `placeholder` - object
+  * An override for the default placeholder object with a label of `Select an item...` and a value of `null`
 * `hideDoneBar` - boolean
@@ -58,3 +58,3 @@ * 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.
 * iOS
-  * The component wraps a TextInput without styling. In the style prop, pass a style object named `inputIOS` to style the input (see example)
+  * The component wraps a TextInput without styling. In the style prop, pass a style object named `inputIOS` to style the input
   * Alternatively, you can pass children (such as a custom button or input) for the component to wrap
@@ -69,2 +69,4 @@ * Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor`
 
+[See Examples](https://github.com/lawnstarter/react-native-picker-select/tree/master/example)
+
 ## Testing
@@ -71,0 +73,0 @@

src/index.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
@@ -16,12 +16,16 @@ Modal,
 
-export default class RNPickerSelect extends Component {
+export default class RNPickerSelect extends PureComponent {
   constructor(props) {
     super(props);
 
-    this.placeholderItem = { label: props.placeholder, value: null };
-    this.itemsWithPlaceholder = [this.placeholderItem].concat(props.items);
+    this.placeholder = props.placeholder;
+    if (typeof props.placeholder === 'string') {
+      this.placeholder = { label: props.placeholder, value: null };
+    }
 
+    this.itemsWithPlaceholder = [this.placeholder].concat(props.items);
+
     this.state = {
       items: this.itemsWithPlaceholder,
-      selectedItem: this.itemsWithPlaceholder.find(item => isEqual(item.value, props.value)) || this.placeholderItem,
+      selectedItem: this.itemsWithPlaceholder.find(item => isEqual(item.value, props.value)) || this.placeholder,
       showPicker: false,
@@ -36,3 +40,3 @@ };
     if (!nextProps.value) { return; }
-    const newSelectedItem = this.state.items.find(item => isEqual(item.value, nextProps.value)) || this.placeholderItem;
+    const newSelectedItem = this.state.items.find(item => isEqual(item.value, nextProps.value)) || this.placeholder;
     if (this.state.selectedItem !== newSelectedItem) {
@@ -53,3 +57,3 @@ this.setState({
   selectValue({ value, index }) {
-    this.props.onSelect({value, index});
+    this.props.onSelect({ value, index });
 
@@ -67,3 +71,3 @@ this.setState({
     const styleModifiers = {};
-    if (this.state.selectedItem.label === this.props.placeholder) {
+    if (this.state.selectedItem.label === this.placeholder.label) {
       styleModifiers.color = this.props.style.placeholderColor || '#C7C7CD';
@@ -86,5 +90,3 @@ }
           onPress={this.togglePicker}
-          hitSlop={{
-            top: 2, right: 2, bottom: 2, left: 2,
-          }}
+          hitSlop={{ top: 2, right: 2, bottom: 2, left: 2 }}
         >
@@ -113,3 +115,3 @@ <View>
         </View>
-      )
+      );
     }
@@ -124,6 +126,6 @@ return (
       </View>
-    )
+    );
   }
 
-  renderIOS(){
+  renderIOS() {
     return (
@@ -146,5 +148,3 @@ <View style={[styles.viewContainer, this.props.style.viewContainer]}>
             <Picker
-              onValueChange={(value, index) => {
-                                this.selectValue({ value, index });
-                            }}
+              onValueChange={(value, index) => { this.selectValue({ value, index }); }}
               selectedValue={this.state.selectedItem.value}
@@ -166,6 +166,4 @@ testId="RNPickerSelectIOS"
         <Picker
-          style={{ position: absolute, top: 0, width: 1000, height: 1000 }}
-          onValueChange={(value, index) => {
-                        this.selectValue({ value, index });
-                    }}
+          style={{ position: 'absolute', top: 0, width: 1000, height: 1000 }}
+          onValueChange={(value, index) => { this.selectValue({ value, index }); }}
           selectedValue={this.state.selectedItem.value}
@@ -179,3 +177,3 @@ testId="RNPickerSelectAndroid"
       </View>
-    )
+    );
   }
@@ -185,3 +183,3 @@
     if (this.props.children) {
-      return this.renderAndroidHeadless()
+      return this.renderAndroidHeadless();
     }
@@ -193,5 +191,3 @@
           style={[this.props.style.inputAndroid, this.renderPlaceholderStyle()]}
-          onValueChange={(value, index) => {
-                        this.selectValue({ value, index });
-                    }}
+          onValueChange={(value, index) => { this.selectValue({ value, index }); }}
           selectedValue={this.state.selectedItem.value}
@@ -210,3 +206,3 @@ testId="RNPickerSelectAndroid"
   render() {
-    return Platform.OS === 'ios' ? this.renderIOS() : this.renderAndroid()
+    return Platform.OS === 'ios' ? this.renderIOS() : this.renderAndroid();
   }
@@ -222,3 +218,6 @@ }
   })).isRequired,
-  placeholder: PropTypes.string,
+  placeholder: PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.any,
+  }),
   hideDoneBar: PropTypes.bool,
@@ -229,2 +228,3 @@ hideIcon: PropTypes.bool,
   style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
   mode: PropTypes.string,
@@ -234,3 +234,6 @@ };
 RNPickerSelect.defaultProps = {
-  placeholder: 'Select an item...',
+  placeholder: {
+    label: 'Select an item...',
+    value: null,
+  },
   hideDoneBar: false,
@@ -241,3 +244,4 @@ hideIcon: false,
   style: {},
-  mode: 'dialog'
+  children: null,
+  mode: 'dialog',
 };
@@ -244,0 +248,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

376747

increased by54%

Lines of code

413

increased by4.29%

Number of lines in readme file

81

increased by2.53%

Worsened metrics

Dev dependency count

8

increased by60%

No dependency changes