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

Comparing version 4.1.0 to 4.2.0

package.json

 {
     "name": "react-native-picker-select",
-    "version": "4.1.0",
+    "version": "4.2.0",
     "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -19,3 +19,3 @@ # react-native-picker-select
 
-[Run example.js](https://snack.expo.io/SJJaVK31X)
+[Run example.js](https://snack.expo.io/BJc3G0gHX)
 
@@ -46,4 +46,4 @@ ## Getting Started
 | style                   | object         | Style overrides for most parts of the component. More details below.                                                                                                                                                                                                                                                              | N         | Both          |
+| hideIcon                | boolean        | Hides the floating downward arrow on the right side of the input box                                                                                                                                                                                                                                                              | N         | Both          |
 | hideDoneBar             | boolean        | 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.                                                                           | N         | iOS           |
-| hideIcon                | boolean        | Hides the floating downward arrow on the right side of the input box                                                                                                                                                                                                                                                              | N         | iOS           |
 | onUpArrow / onDownArrow | function       | _ Presence enables the corresponding arrow<br>_ Closes the picker<br>\* Calls the callback provided                                                                                                                                                                                                                               | N         | iOS           |
@@ -57,3 +57,3 @@ | mode                    | string         | 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.                                                                                                                                      | N         | Android       |
     -   Alternatively, you can pass children (such as a custom button or input) for the component to wrap
-    -   Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor`
+    -   Other styles that can be modified for iOS are named `viewContainer`, `icon`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor`
 -   Android
@@ -60,0 +60,0 @@ -   The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline

src/index.js

@@ -41,2 +41,49 @@ import React, { PureComponent } from 'react';
 export default class RNPickerSelect extends PureComponent {
+    static propTypes = {
+        onValueChange: PropTypes.func.isRequired,
+        items: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                value: PropTypes.any.isRequired,
+                key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+                color: ColorPropType,
+            })
+        ).isRequired,
+        placeholder: PropTypes.shape({
+            label: PropTypes.string,
+            value: PropTypes.any,
+        }),
+        hideDoneBar: PropTypes.bool,
+        hideIcon: PropTypes.bool,
+        disabled: PropTypes.bool,
+        value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+        itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+        children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+        mode: PropTypes.string,
+        animationType: PropTypes.string,
+        onUpArrow: PropTypes.func,
+        onDownArrow: PropTypes.func,
+        doneText: PropTypes.string,
+    };
+
+    static defaultProps = {
+        placeholder: {
+            label: 'Select an item...',
+            value: null,
+        },
+        hideDoneBar: false,
+        hideIcon: false,
+        disabled: false,
+        value: undefined,
+        itemKey: null,
+        style: {},
+        children: null,
+        mode: 'dialog',
+        animationType: 'slide',
+        onUpArrow: null,
+        onDownArrow: null,
+        doneText: 'Done',
+    };
+
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -114,2 +161,12 @@ // update items if items prop changes
 
+    getPlaceholderStyle() {
+        if (
+            !isEqual(this.props.placeholder, {}) &&
+            this.state.selectedItem.label === this.props.placeholder.label
+        ) {
+            return { color: this.props.style.placeholderColor || '#C7C7CD' };
+        }
+        return {};
+    }
+
     togglePicker(animate = false) {
@@ -142,13 +199,2 @@ if (this.props.disabled) {
 
-    renderPlaceholderStyle() {
-        const styleModifiers = {};
-        if (
-            !isEqual(this.props.placeholder, {}) &&
-            this.state.selectedItem.label === this.props.placeholder.label
-        ) {
-            styleModifiers.color = this.props.style.placeholderColor || '#C7C7CD';
-        }
-        return styleModifiers;
-    }
-
     renderDoneBar() {
@@ -217,3 +263,3 @@ if (this.props.hideDoneBar) {
 
-        return <View style={[styles.icon, this.props.style.icon]} />;
+        return <View testID="icon_ios" style={[styles.icon, this.props.style.icon]} />;
     }
@@ -235,3 +281,3 @@
                         this.props.style.inputIOS,
-                        this.renderPlaceholderStyle(),
+                        this.getPlaceholderStyle(),
                     ]}
@@ -311,3 +357,7 @@ value={this.state.selectedItem.label}
                 <Picker
-                    style={[this.props.style.inputAndroid, this.renderPlaceholderStyle()]}
+                    style={[
+                        this.props.hideIcon ? { backgroundColor: 'transparent' } : {},
+                        this.props.style.inputAndroid,
+                        this.getPlaceholderStyle(),
+                    ]}
                     onValueChange={this.onValueChange}
@@ -331,49 +381,2 @@ selectedValue={this.state.selectedItem.value}
 
-RNPickerSelect.propTypes = {
-    onValueChange: PropTypes.func.isRequired,
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            label: PropTypes.string.isRequired,
-            value: PropTypes.any.isRequired,
-            key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            color: ColorPropType,
-        })
-    ).isRequired,
-    placeholder: PropTypes.shape({
-        label: PropTypes.string,
-        value: PropTypes.any,
-    }),
-    hideDoneBar: PropTypes.bool,
-    hideIcon: PropTypes.bool,
-    disabled: PropTypes.bool,
-    value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-    mode: PropTypes.string,
-    animationType: PropTypes.string,
-    onUpArrow: PropTypes.func,
-    onDownArrow: PropTypes.func,
-    doneText: PropTypes.string,
-};
-
-RNPickerSelect.defaultProps = {
-    placeholder: {
-        label: 'Select an item...',
-        value: null,
-    },
-    hideDoneBar: false,
-    hideIcon: false,
-    disabled: false,
-    value: undefined,
-    itemKey: null,
-    style: {},
-    children: null,
-    mode: 'dialog',
-    animationType: 'slide',
-    onUpArrow: null,
-    onDownArrow: null,
-    doneText: 'Done',
-};
-
 const styles = StyleSheet.create({
@@ -380,0 +383,0 @@ viewContainer: {

No alert changes

Improved metrics

Total package byte prevSize

25038

increased by1.36%

Lines of code

412

increased by0.73%

No dependency changes