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

Comparing version 6.3.3 to 7.0.0-beta.0

CHANGELOG.md

@@ -0,1 +1,17 @@
+## 7.0.0
+
+#### Breaking Changes
+
+-   Deprecated `placeholderTextColor` and `hideDoneBar` props removed
+-   Typescript type definitions received a major overhaul (#248)
+-   Base component is now a `Text` element to fix issues on Android (#234). This _should_ not cause any issues unless you are targeting the former `TextInput` in tests.
+
+##### Bugfix
+
+-   "Done" Text element now set to `allowFontScaling={false}` (#247)
+-   Fix for `onValueChange` event triggering a re-render on Android (#112)
+-   Fix for `onDonePress` regression (#236)
+
+---
+
 ### 6.3.3
@@ -2,0 +18,0 @@

index.d.ts

@@ -1,36 +0,69 @@
-// / <reference types="react" />
+import { ViewStyle, TextStyle, ModalProps, TextInputProperties, PickerProps } from 'react-native';
+import React from 'react';
 
-declare module 'react-native-picker-select' {
-    export interface Item {
-        label: string;
-        value: any;
-        key?: string | number;
-        color?: string;
-    }
-    export interface PickerProps {
-        onValueChange: (value: any, index: number) => void;
-        items: Item[];
-        value?: any;
-        placeholder?: Item | {};
-        disabled?: boolean;
-        itemKey?: string | number;
-        style?: object;
-        children?: any;
-        placeholderTextColor?: string; // deprecated
-        useNativeAndroidPickerStyle?: boolean;
-        hideDoneBar?: boolean; // deprecated
-        doneText?: string;
-        onDonePress?: () => void;
-        onUpArrow?: () => void;
-        onDownArrow?: () => void;
-        onOpen?: () => void;
-        onClose?: () => void;
-        modalProps?: object;
-        textInputProps?: object;
-        pickerProps?: object;
-        Icon?: React.ReactNode;
-        InputAccessoryView?: React.ReactNode;
-    }
-    class Picker extends React.Component<PickerProps> {}
-    export default Picker;
+export interface Item {
+    label: string;
+    value: any;
+    key?: string | number;
+    color?: string;
 }
+export interface PickerStyle {
+    chevron?: ViewStyle;
+    chevronActive?: ViewStyle;
+    chevronContainer?: ViewStyle;
+    chevronDown?: ViewStyle;
+    chevronUp?: ViewStyle;
+    done?: TextStyle;
+    headlessAndroidContainer?: ViewStyle;
+    headlessAndroidPicker?: ViewStyle;
+    iconContainer?: ViewStyle;
+    inputAndroid?: TextStyle;
+    inputAndroidContainer?: ViewStyle;
+    inputIOS?: TextStyle;
+    inputIOSContainer?: ViewStyle;
+    modalViewBottom?: ViewStyle;
+    modalViewMiddle?: ViewStyle;
+    modalViewTop?: ViewStyle;
+    placeholder?: TextStyle;
+    viewContainer?: ViewStyle;
+}
+
+// Omit props needed by the library
+type PickerModalProps = Omit<
+    ModalProps,
+    | 'testID'
+    | 'visible'
+    | 'transparent'
+    | 'animationType'
+    | 'supportedOrientations'
+    | 'onDismiss'
+    | 'onOrientationChange'
+>;
+
+export interface PickerSelectProps {
+    onValueChange: (value: any, index: number) => void;
+    items: Item[];
+    value?: any;
+    placeholder?: Item | {};
+    disabled?: boolean;
+    itemKey?: string | number;
+    style?: PickerStyle;
+    children?: React.ReactNode;
+    placeholderTextColor?: string; // deprecated
+    useNativeAndroidPickerStyle?: boolean;
+    hideDoneBar?: boolean; // deprecated
+    doneText?: string;
+    onDonePress?: () => void;
+    onUpArrow?: () => void;
+    onDownArrow?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    modalProps?: PickerModalProps;
+    textInputProps?: TextInputProperties;
+    pickerProps?: PickerProps;
+    Icon?: React.ReactNode;
+    InputAccessoryView?: React.ReactNode;
+}
+
+declare class Picker extends React.Component<PickerSelectProps> {}
+export default Picker;

package.json

 {
     "name": "react-native-picker-select",
-    "version": "6.3.3",
+    "version": "7.0.0-beta.0",
     "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
@@ -30,2 +30,3 @@ "license": "MIT",
     "devDependencies": {
+        "@types/react-native": "^0.60.22",
         "babel-jest": "^23.6.0",
@@ -32,0 +33,0 @@ "babel-preset-react-native": "^4.0.1",

README.md

@@ -10,6 +10,8 @@ # react-native-picker-select
 
-For iOS, by default we are wrapping an unstyled TextInput component. You can then pass down styles to customize it to your needs.
+For iOS, by default we are wrapping an unstyled Text component.
 
-For Android, by default we are using the native Picker component. If you prefer, you can set `useNativeAndroidPickerStyle` to false, which will also render an unstyled TextInput component. You can then pass down styles to customize it to your needs.
+For Android, by default we are using the native Picker component. If you prefer, you can set `useNativeAndroidPickerStyle` to false, which will also render an unstyled Text component.
 
+The Text component can receive styles to customize it to your needs - for example, you may want it to look like your other TextInput components.
+
 For either platform, you can alternatively pass down a child element of your choice that will be wrapped in a touchable area.
@@ -46,9 +48,2 @@
 
-### Versioning
-
-| Component | React   |
-| --------- | ------- |
-| >= 3.0.0  | >= 16.3 |
-| < 3.0.0   | < 16.3  |
-
 ### Props
@@ -98,5 +93,12 @@
 
+### Versioning
+
+| Component | React   |
+| --------- | ------- |
+| >= 3.0.0  | >= 16.3 |
+| < 3.0.0   | < 16.3  |
+
 ## Testing
 
-This component has been tested on React Native v0.51 - v0.59
+This component has been tested on React Native v0.51 - v0.60
 
@@ -103,0 +105,0 @@ [![BrowserStack](https://i.imgur.com/cOdhMed.png)](https://www.browserstack.com/)

src/index.js

@@ -9,3 +9,2 @@ import React, { PureComponent } from 'react';
     Text,
-    TextInput,
     TouchableOpacity,
@@ -41,7 +40,5 @@ TouchableWithoutFeedback,
         children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
-        placeholderTextColor: ColorPropType, // deprecated
         useNativeAndroidPickerStyle: PropTypes.bool,
 
         // Custom Modal props (iOS only)
-        hideDoneBar: PropTypes.bool, // deprecated
         doneText: PropTypes.string,
@@ -79,5 +76,3 @@ onDonePress: PropTypes.func,
         children: null,
-        placeholderTextColor: '#C7C7CD', // deprecated
         useNativeAndroidPickerStyle: true,
-        hideDoneBar: false, // deprecated
         doneText: 'Done',
@@ -153,9 +148,9 @@ onDonePress: null,
         const items = RNPickerSelect.handlePlaceholder({
-            placeholder: this.props.placeholder,
-        }).concat(this.props.items);
+            placeholder: props.placeholder,
+        }).concat(props.items);
 
         const { selectedItem } = RNPickerSelect.getSelectedItem({
             items,
-            key: this.props.itemKey,
-            value: this.props.value,
+            key: props.itemKey,
+            value: props.value,
         });
@@ -175,5 +170,3 @@
         this.onOrientationChange = this.onOrientationChange.bind(this);
-        this.setInputRef = this.setInputRef.bind(this);
         this.togglePicker = this.togglePicker.bind(this);
-        this.triggerDoneCallback = this.triggerDoneCallback.bind(this);
         this.renderInputAccessoryView = this.renderInputAccessoryView.bind(this);
@@ -194,12 +187,15 @@ }
 
-    onValueChange(value, index) {
-        const { onValueChange } = this.props;
+    onValueChange(val, idx) {
+        const { onValueChange, value } = this.props;
 
-        onValueChange(value, index);
+        onValueChange(val, idx);
 
-        this.setState((prevState) => {
-            return {
-                selectedItem: prevState.items[index],
-            };
-        });
+        // if value prop is not used, maintain selectedItem internally
+        if (isEqual(value, undefined)) {
+            this.setState((prevState) => {
+                return {
+                    selectedItem: prevState.items[idx],
+                };
+            });
+        }
     }
@@ -213,13 +209,9 @@
 
-    setInputRef(ref) {
-        this.inputRef = ref;
-    }
-
     getPlaceholderStyle() {
-        const { placeholder, placeholderTextColor, style } = this.props;
+        const { placeholder, style } = this.props;
+        const { selectedItem } = this.state;
 
-        if (!isEqual(placeholder, {}) && this.state.selectedItem.label === placeholder.label) {
+        if (!isEqual(placeholder, {}) && selectedItem.label === placeholder.label) {
             return {
                 ...defaultStyles.placeholder,
-                color: placeholderTextColor, // deprecated
                 ...style.placeholder,
@@ -233,8 +225,9 @@ };
         const { onOpen, onClose } = this.props;
+        const { showPicker } = this.state;
 
-        if (!this.state.showPicker && onOpen) {
+        if (!showPicker && onOpen) {
             onOpen();
         }
 
-        if (this.state.showPicker && onClose) {
+        if (showPicker && onClose) {
             onClose();
@@ -244,11 +237,5 @@ }
 
-    triggerDoneCallback() {
-        const { hideDoneBar, onDonePress } = this.props;
-        if (!hideDoneBar && onDonePress) {
-            onDonePress();
-        }
-    }
-
     togglePicker(animate = false, postToggleCallback) {
         const { modalProps, disabled } = this.props;
+        const { showPicker } = this.state;
 
@@ -259,3 +246,3 @@ if (disabled) {
 
-        if (!this.state.showPicker) {
+        if (!showPicker) {
             Keyboard.dismiss();
@@ -285,3 +272,5 @@ }
     renderPickerItems() {
-        return this.state.items.map((item) => {
+        const { items } = this.state;
+
+        return items.map((item) => {
             return (
@@ -302,13 +291,8 @@ <Picker.Item
             doneText,
-            hideDoneBar,
             onUpArrow,
             onDownArrow,
             style,
+            onDonePress,
         } = this.props;
 
-        // deprecated
-        if (hideDoneBar) {
-            return null;
-        }
-
         if (InputAccessoryView) {
@@ -357,3 +341,3 @@ return <InputAccessoryView testID="custom_input_accessory_view" />;
                     onPress={() => {
-                        this.togglePicker(true);
+                        this.togglePicker(true, onDonePress);
                     }}
@@ -364,3 +348,5 @@ hitSlop={{ top: 4, right: 4, bottom: 4, left: 4 }}
                     <View testID="needed_for_touchable">
-                        <Text style={[defaultStyles.done, style.done]}>{doneText}</Text>
+                        <Text allowFontScaling={false} style={[defaultStyles.done, style.done]}>
+                            {doneText}
+                        </Text>
                     </View>
@@ -391,2 +377,4 @@ </TouchableWithoutFeedback>
         const { children, style, textInputProps } = this.props;
+        const { selectedItem } = this.state;
+
         const containerStyle =
@@ -405,3 +393,3 @@ Platform.OS === 'ios' ? style.inputIOSContainer : style.inputAndroidContainer;
             <View pointerEvents="box-only" style={containerStyle}>
-                <TextInput
+                <Text
                     style={[
@@ -411,7 +399,6 @@ Platform.OS === 'ios' ? style.inputIOS : style.inputAndroid,
                     ]}
-                    value={this.state.selectedItem.label}
-                    ref={this.setInputRef}
-                    editable={false}
                     {...textInputProps}
-                />
+                >
+                    {selectedItem.label}
+                </Text>
                 {this.renderIcon()}
@@ -424,2 +411,3 @@ </View>
         const { style, modalProps, pickerProps } = this.props;
+        const { animationType, orientation, selectedItem, showPicker } = this.state;
 
@@ -438,7 +426,6 @@ return (
                     testID="ios_modal"
-                    visible={this.state.showPicker}
+                    visible={showPicker}
                     transparent
-                    animationType={this.state.animationType}
+                    animationType={animationType}
                     supportedOrientations={['portrait', 'landscape']}
-                    onDismiss={this.triggerDoneCallback}
                     onOrientationChange={this.onOrientationChange}
@@ -458,3 +445,3 @@ {...modalProps}
                             defaultStyles.modalViewBottom,
-                            { height: this.state.orientation === 'portrait' ? 215 : 162 },
+                            { height: orientation === 'portrait' ? 215 : 162 },
                             style.modalViewBottom,
@@ -466,3 +453,3 @@ ]}
                             onValueChange={this.onValueChange}
-                            selectedValue={this.state.selectedItem.value}
+                            selectedValue={selectedItem.value}
                             {...pickerProps}
@@ -480,2 +467,3 @@ >
         const { disabled, Icon, style, pickerProps } = this.props;
+        const { selectedItem } = this.state;
 
@@ -494,3 +482,3 @@ return (
                     onValueChange={this.onValueChange}
-                    selectedValue={this.state.selectedItem.value}
+                    selectedValue={selectedItem.value}
                     {...pickerProps}
@@ -506,2 +494,3 @@ >
         const { disabled, Icon, style, pickerProps } = this.props;
+        const { selectedItem } = this.state;
 
@@ -519,3 +508,3 @@ return (
                     onValueChange={this.onValueChange}
-                    selectedValue={this.state.selectedItem.value}
+                    selectedValue={selectedItem.value}
                     {...pickerProps}
@@ -522,0 +511,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

42443

increased by2.48%

Lines of code

580

increased by3.57%

Number of lines in readme file

107

increased by1.9%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of low quality alerts

2

increased by100%

No dependency changes