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

Comparing version 4.3.0 to 4.4.0

package.json

 {
     "name": "react-native-picker-select",
-    "version": "4.3.0",
+    "version": "4.4.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

@@ -47,2 +47,3 @@ # react-native-picker-select
 | hideIcon                | boolean        | Hides the floating downward arrow on the right side of the input box                                                                                                                                                                                                                                                              | N         | Both          |
+| placeholderTextColor    | color          | Overrides the default placeholder color shown                                                                                                                                                                                                                                                                                     | 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           |
@@ -58,3 +59,3 @@ | onUpArrow / onDownArrow | function       | _ Presence enables the corresponding arrow<br>_ Closes the picker<br>\* Calls the callback provided                                                                                                                                                                                                                               | N         | iOS           |
     -   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`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `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`, and `modalViewBottom`
 -   Android
@@ -65,3 +66,3 @@ -   The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline
     -   Alternatively, you can pass children (such as a custom button or input) for the component to wrap
-    -   Other styles that can be modified for Android are named `viewContainer` and `placeholderColor`
+    -   Other styles that can be modified for Android are named `viewContainer`
 
@@ -68,0 +69,0 @@ ## Testing

src/index.js

@@ -17,25 +17,2 @@ import React, { PureComponent } from 'react';
 
-function handlePlaceholder({ placeholder }) {
-    if (isEqual(placeholder, {})) {
-        return [];
-    }
-    return [placeholder];
-}
-
-function getSelectedItem({ items, key, value }) {
-    let idx = items.findIndex((item) => {
-        if (item.key && key) {
-            return isEqual(item.key, key);
-        }
-        return isEqual(item.value, value);
-    });
-    if (idx === -1) {
-        idx = 0;
-    }
-    return {
-        selectedItem: items[idx],
-        idx,
-    };
-}
-
 export default class RNPickerSelect extends PureComponent {
@@ -69,2 +46,3 @@ static propTypes = {
         onDonePress: PropTypes.func,
+        placeholderTextColor: ColorPropType,
     };
@@ -90,4 +68,28 @@
         onDonePress: null,
+        placeholderTextColor: '#C7C7CD',
     };
 
+    static handlePlaceholder({ placeholder }) {
+        if (isEqual(placeholder, {})) {
+            return [];
+        }
+        return [placeholder];
+    }
+
+    static getSelectedItem({ items, key, value }) {
+        let idx = items.findIndex((item) => {
+            if (item.key && key) {
+                return isEqual(item.key, key);
+            }
+            return isEqual(item.value, value);
+        });
+        if (idx === -1) {
+            idx = 0;
+        }
+        return {
+            selectedItem: items[idx],
+            idx,
+        };
+    }
+
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -97,6 +99,6 @@ // update items if items prop changes
         // update selectedItem if value prop is defined and differs from currently selected item
-        const newItems = handlePlaceholder({ placeholder: nextProps.placeholder }).concat(
-            nextProps.items
-        );
-        const { selectedItem, idx } = getSelectedItem({
+        const newItems = RNPickerSelect.handlePlaceholder({
+            placeholder: nextProps.placeholder,
+        }).concat(nextProps.items);
+        const { selectedItem, idx } = RNPickerSelect.getSelectedItem({
             items: newItems,
@@ -125,4 +127,6 @@ key: nextProps.itemKey,
 
-        const items = handlePlaceholder({ placeholder: props.placeholder }).concat(props.items);
-        const { selectedItem } = getSelectedItem({
+        const items = RNPickerSelect.handlePlaceholder({ placeholder: props.placeholder }).concat(
+            props.items
+        );
+        const { selectedItem } = RNPickerSelect.getSelectedItem({
             items,
@@ -132,2 +136,3 @@ key: props.itemKey,
         });
+
         this.state = {
@@ -143,2 +148,3 @@ items,
         this.onValueChange = this.onValueChange.bind(this);
+        this.setInputRef = this.setInputRef.bind(this);
         this.togglePicker = this.togglePicker.bind(this);
@@ -169,2 +175,6 @@ }
 
+    setInputRef(ref) {
+        this.inputRef = ref;
+    }
+
     getPlaceholderStyle() {
@@ -175,3 +185,6 @@ if (
         ) {
-            return { color: this.props.style.placeholderColor || '#C7C7CD' };
+            return {
+                // TODO: remove style.placeholderColor option in v5 release
+                color: this.props.style.placeholderColor || this.props.placeholderTextColor,
+            };
         }
@@ -214,3 +227,6 @@ return {};
         return (
-            <View style={[styles.modalViewMiddle, this.props.style.modalViewMiddle]}>
+            <View
+                style={[styles.modalViewMiddle, this.props.style.modalViewMiddle]}
+                testID="done_bar"
+            >
                 <View style={{ flex: 1, flexDirection: 'row', marginLeft: 15 }}>
@@ -296,5 +312,3 @@ <TouchableOpacity
                     value={this.state.selectedItem.label}
-                    ref={(ref) => {
-                        this.inputRef = ref;
-                    }}
+                    ref={this.setInputRef}
                 />
@@ -301,0 +315,0 @@ {this.renderIcon()}

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

26781

increased by3.26%

Lines of code

430

increased by2.87%

Number of lines in readme file

75

increased by1.35%

No dependency changes