New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-native-picker-select
Advanced tools
react-native-picker-select - npm Package Compare versions
Comparing version 3.1.3 to 4.0.0
| { | ||
| "name": "react-native-picker-select", | ||
| "version": "3.1.3", | ||
| "description": | ||
| "A Picker component for React Native which emulates the native <select> interfaces for each platform", | ||
| "version": "4.0.0", | ||
| "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform", | ||
| "license": "MIT", | ||
@@ -23,3 +22,7 @@ "author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>", | ||
| ], | ||
| "files": ["LICENSE", "README.md", "src/index.js"], | ||
| "files": [ | ||
| "LICENSE", | ||
| "README.md", | ||
| "src/index.js" | ||
| ], | ||
| "dependencies": { | ||
@@ -29,17 +32,17 @@ "lodash.isequal": "^4.5.0" | ||
| "devDependencies": { | ||
| "babel-jest": "^22.4.3", | ||
| "babel-jest": "^23.2.0", | ||
| "babel-preset-react-native": "^4.0.0", | ||
| "enzyme": "^3.3.0", | ||
| "enzyme-adapter-react-16": "^1.1.1", | ||
| "enzyme-to-json": "^3.3.3", | ||
| "enzyme-to-json": "^3.3.4", | ||
| "eslint-config-ls-react": "https://github.com/lawnstarter/eslint-config-ls-react#2.0.1", | ||
| "husky": "^0.14.3", | ||
| "jest": "^22.4.3", | ||
| "prettier": "^1.12.1", | ||
| "pretty-quick": "^1.4.1", | ||
| "prop-types": "^15.6.1", | ||
| "react": "16.3.2", | ||
| "react-dom": "^16.3.2", | ||
| "react-native": "0.55.3", | ||
| "react-test-renderer": "^16.3.2" | ||
| "jest": "^23.2.0", | ||
| "prettier": "^1.13.7", | ||
| "pretty-quick": "^1.6.0", | ||
| "prop-types": "^15.6.2", | ||
| "react": "16.4.1", | ||
| "react-dom": "^16.4.1", | ||
| "react-native": "0.55.4", | ||
| "react-test-renderer": "^16.4.1" | ||
| }, | ||
@@ -52,4 +55,3 @@ "scripts": { | ||
| "precommit": "pretty-quick --staged", | ||
| "prettier:debug-check": | ||
| "prettier --config ./.prettierrc.js --debug-check \"{src,test}/**/*.js\"", | ||
| "prettier:debug-check": "prettier --config ./.prettierrc.js --debug-check \"{src,test}/**/*.js\"", | ||
| "preprettier:all": "yarn run prettier:debug-check", | ||
@@ -60,5 +62,9 @@ "prettier:all": "prettier --config ./.prettierrc.js --write \"{src,test}/**/*.js\"" | ||
| "preset": "react-native", | ||
| "setupFiles": ["./test/setup.js"], | ||
| "snapshotSerializers": ["enzyme-to-json/serializer"] | ||
| "setupFiles": [ | ||
| "./test/setup.js" | ||
| ], | ||
| "snapshotSerializers": [ | ||
| "enzyme-to-json/serializer" | ||
| ] | ||
| } | ||
| } |
@@ -29,33 +29,34 @@ # react-native-picker-select | ||
| | Component | RN | | ||
| | --------- | --------- | | ||
| | >= 3.0.0 | >= 0.55.3 | | ||
| | < 3.0.0 | < 0.55.3 | | ||
| | Component | React | | ||
| | --------- | ------- | | ||
| | >= 3.0.0 | >= 16.3 | | ||
| | < 3.0.0 | < 16.3 | | ||
| ### Props | ||
| | Name | Type | Description | Required? | iOS / Android | | ||
| | ----------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | | ||
| | onValueChange | function | Callback which returns `value, index` | Y | Both | | ||
| | Name | Type | Description | Required? | iOS / Android | | ||
| | ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- | | ||
| | onValueChange | function | Callback which returns `value, index` | Y | Both | | ||
| | items | array | _ The items for the component to render. Each item should be in the following format:<br>`{label: 'Orange',value: 'orange',key: 'orange', color: 'orange'}`<br>_ The label and the value are required, but the key will be based upon the label if it isn't included<br>\* The value can be any data type. The color is optional. | Y | Both | | ||
| | placeholder | object | _ An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>_ An empty object can be used if you'd like to disable the placeholder entirely | N | Both | | ||
| | disabled | boolean | Disables interaction with the component | N | Both | | ||
| | value | any | 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. | N | Both | | ||
| | style | object | Style overrides for most parts of the component. More details below. | 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 | | ||
| | placeholder | object | _ An override for the default placeholder object with a label of `Select an item...` and a value of `null`<br>_ An empty object can be used if you'd like to disable the placeholder entirely | N | Both | | ||
| | disabled | boolean | Disables interaction with the component | N | Both | | ||
| | value | any | 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. | N | Both | | ||
| | style | object | Style overrides for most parts of the component. More details below. | 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 | | ||
| | 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 | | ||
| ### Styling | ||
| * iOS | ||
| * 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 | ||
| * Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor` | ||
| * Android | ||
| * The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline | ||
| * We emulate a typical underline, which can be modified with a style object named `underline` | ||
| * The main input can be modified with the style object named `inputAndroid` | ||
| * 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` | ||
| - iOS | ||
| - 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 | ||
| - Other styles that can be modified for iOS are named `viewContainer`, `icon`, `done`, `modalViewTop`, `modalViewMiddle`, `modalViewBottom`, and `placeholderColor` | ||
| - Android | ||
| - The default Picker component acts similiarly to a TextInput until it is tapped, although it does not include an underline | ||
| - We emulate a typical underline, which can be modified with a style object named `underline` | ||
| - The main input can be modified with the style object named `inputAndroid` | ||
| - 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` | ||
@@ -68,3 +69,3 @@ ## Testing | ||
| * [ ] Update Android picker to look closer to platform's `<select>` | ||
| - [ ] Update Android picker to look closer to platform's `<select>` | ||
@@ -71,0 +72,0 @@ ## License |
| import React, { PureComponent } from 'react'; | ||
| import { | ||
| ColorPropType, | ||
| Modal, | ||
@@ -7,3 +8,2 @@ Picker, | ||
| StyleSheet, | ||
| ColorPropType, | ||
| Text, | ||
@@ -26,7 +26,12 @@ TextInput, | ||
| function getSelectedItem({ items, value }) { | ||
| return ( | ||
| items.find((item) => { | ||
| return isEqual(item.value, value); | ||
| }) || items[0] | ||
| ); | ||
| let idx = items.findIndex((item) => { | ||
| return isEqual(item.value, value); | ||
| }); | ||
| if (idx === -1) { | ||
| idx = 0; | ||
| } | ||
| return { | ||
| selectedItem: items[idx], | ||
| idx, | ||
| }; | ||
| } | ||
@@ -39,14 +44,19 @@ | ||
| // update selectedItem if value prop is defined and differs from currently selected item | ||
| const newItems = handlePlaceholder({ placeholder: nextProps.placeholder }).concat(nextProps.items); | ||
| const newSelectedItem = getSelectedItem({ items: newItems, value: nextProps.value }); | ||
| const newItems = handlePlaceholder({ placeholder: nextProps.placeholder }).concat( | ||
| nextProps.items | ||
| ); | ||
| const { selectedItem, idx } = getSelectedItem({ | ||
| items: newItems, | ||
| value: nextProps.value, | ||
| }); | ||
| const selectedItemChanged = | ||
| !isEqual(nextProps.value, undefined) && | ||
| !isEqual(prevState.selectedItem, newSelectedItem); | ||
| !isEqual(nextProps.value, undefined) && !isEqual(prevState.selectedItem, selectedItem); | ||
| if (itemsChanged || selectedItemChanged) { | ||
| if (selectedItemChanged) { | ||
| nextProps.onValueChange(selectedItem.value, idx); | ||
| } | ||
| return { | ||
| items: itemsChanged | ||
| ? newItems | ||
| : prevState.items, | ||
| selectedItem: selectedItemChanged ? newSelectedItem : prevState.selectedItem, | ||
| items: itemsChanged ? newItems : prevState.items, | ||
| selectedItem: selectedItemChanged ? selectedItem : prevState.selectedItem, | ||
| }; | ||
@@ -62,5 +72,6 @@ } | ||
| const items = handlePlaceholder({ placeholder: props.placeholder }).concat(props.items); | ||
| const { selectedItem } = getSelectedItem({ items, value: props.value }); | ||
| this.state = { | ||
| items, | ||
| selectedItem: getSelectedItem({ items, value: props.value }), | ||
| selectedItem, | ||
| showPicker: false, | ||
@@ -267,3 +278,3 @@ animationType: undefined, | ||
| return ( | ||
| <View style={{ borderWidth: 0 }}> | ||
| <View style={[{ borderWidth: 0 }, this.props.style.headlessAndroidContainer]}> | ||
| {this.props.children} | ||
@@ -270,0 +281,0 @@ <Picker |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by4.94%
24041
- Lines of code
- increased by2.84%
399
- Number of lines in readme file
- increased by1.39%
73
No dependency changes