Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-picker-select
Advanced tools
react-native-picker-select - npm Package Compare versions
Comparing version 4.0.0 to 4.1.0
| { | ||
| "name": "react-native-picker-select", | ||
| "version": "4.0.0", | ||
| "version": "4.1.0", | ||
| "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform", | ||
@@ -31,3 +31,3 @@ "license": "MIT", | ||
| "devDependencies": { | ||
| "babel-jest": "^23.2.0", | ||
| "babel-jest": "^23.4.0", | ||
| "babel-preset-react-native": "^4.0.0", | ||
@@ -39,3 +39,3 @@ "enzyme": "^3.3.0", | ||
| "husky": "^0.14.3", | ||
| "jest": "^23.2.0", | ||
| "jest": "^23.4.1", | ||
| "prettier": "^1.13.7", | ||
@@ -42,0 +42,0 @@ "pretty-quick": "^1.6.0", |
@@ -36,14 +36,15 @@ # react-native-picker-select | ||
| | 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 | | ||
| | 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 | | ||
| | 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 item 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 | | ||
| | itemKey | string, number | Will attempt to locate a matching item from the `items` array by checking each item's `key` property. If found, it will update the component to show that item as selected. If the key is not found, it will attempt to find a matching item by `value` as above. | 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 | | ||
@@ -67,8 +68,4 @@ ### Styling | ||
| ## Future Plans | ||
| - [ ] Update Android picker to look closer to platform's `<select>` | ||
| ## License | ||
| react-native-picker-select is [MIT licensed](https://github.com/lawnstarter/react-native-picker-select/tree/master/LICENSE) |
@@ -24,4 +24,7 @@ import React, { PureComponent } from 'react'; | ||
| function getSelectedItem({ items, value }) { | ||
| function getSelectedItem({ items, key, value }) { | ||
| let idx = items.findIndex((item) => { | ||
| if (item.key && key) { | ||
| return isEqual(item.key, key); | ||
| } | ||
| return isEqual(item.value, value); | ||
@@ -48,2 +51,3 @@ }); | ||
| items: newItems, | ||
| key: nextProps.itemKey, | ||
| value: nextProps.value, | ||
@@ -71,3 +75,7 @@ }); | ||
| const items = handlePlaceholder({ placeholder: props.placeholder }).concat(props.items); | ||
| const { selectedItem } = getSelectedItem({ items, value: props.value }); | ||
| const { selectedItem } = getSelectedItem({ | ||
| items, | ||
| key: props.itemKey, | ||
| value: props.value, | ||
| }); | ||
| this.state = { | ||
@@ -265,3 +273,3 @@ items, | ||
| selectedValue={this.state.selectedItem.value} | ||
| testId="RNPickerSelectIOS" | ||
| testID="RNPickerSelectIOS" | ||
| > | ||
@@ -284,3 +292,3 @@ {this.renderPickerItems()} | ||
| selectedValue={this.state.selectedItem.value} | ||
| testId="RNPickerSelectAndroid" | ||
| testID="RNPickerSelectAndroid" | ||
| mode={this.props.mode} | ||
@@ -306,3 +314,3 @@ enabled={!this.props.disabled} | ||
| selectedValue={this.state.selectedItem.value} | ||
| testId="RNPickerSelectAndroid" | ||
| testID="RNPickerSelectAndroid" | ||
| mode={this.props.mode} | ||
@@ -341,2 +349,3 @@ enabled={!this.props.disabled} | ||
| 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 | ||
@@ -360,2 +369,3 @@ children: PropTypes.any, // eslint-disable-line react/forbid-prop-types | ||
| value: undefined, | ||
| itemKey: null, | ||
| style: {}, | ||
@@ -362,0 +372,0 @@ children: null, |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2.75%
24703
- Lines of code
- increased by2.51%
409
Worsened metrics
- Number of lines in readme file
- decreased by-4.11%
70
No dependency changes