Skip to content

Commit

Permalink
v5 (lawnstarter#91)
Browse files Browse the repository at this point in the history 
* set base placeholder color to match iOS "disabled" state

* pickerProps prop

* destructure modalProps

* readme updates

* version-bump

* added changelong
  • Loading branch information
@lfkwtz
lfkwtz committed Oct 19, 2018
1 parent 54f6f24 commit b5c4cc8
Show file tree
Hide file tree
Showing 7 changed files with 1,192 additions and 126 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
### v5.0.0

##### Breaking Changes

- `styles.placeholderColor` has been replaced with `placeholderTextColor`
- `mode` prop is now accessible via `pickerProps`
- `animationType` prop is now accessible via `modalProps` (see warning in README)

##### New

- Default placeholder now includes default `color` of #9EA0A4
- `pickerProps`, `modalProps`, and `textInputProps` have been added (see README)
38 changes: 20 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,38 +34,40 @@ For either platform, you can alternatively pass down a child element that will b

### Props

| 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 |
| 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 |
| onUpArrow / onDownArrow | function | _ Presence enables the corresponding arrow<br>_ Closes the picker<br>\* Calls the callback provided | N | iOS |
| onDonePress | function | Callback when the 'done' button is pressed | 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<br> - 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<br>- The key and color are optional<br>- The key will be set to the label if not included<br>- The value can be any data type | 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 |
| hideIcon | boolean | Hides the floating downward arrow on the right side of the input box | N | Both |
| pickerProps | object | Additional props to pass to the Picker (some props are used in core functionality so use this carefully) | N | Both |
| placeholderTextColor | color | Overrides the default placeholder color shown | N | iOS |
| 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 |
| onUpArrow / onDownArrow | function | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided | N | iOS |
| onDonePress | function | Callback when the 'Done' button is pressed | N | iOS |
| modalProps | object | Additional props to pass to the Modal (some props are used in core functionality so use this carefully) | N | iOS |
| textInputProps | object | Additional props to pass to the TextInput (some props are used in core functionality so use this carefully) | N | iOS |

### 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`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `done`, `modalViewTop`, `modalViewMiddle`, and `modalViewBottom`
- Other styles that can be modified for iOS are named `inputIOSContainer`, `viewContainer`, `icon`, `chevron`, `chevronUp`, `chevronDown`, `chevronActive`, `done`, `modalViewTop`, `modalViewMiddle`, and `modalViewBottom`
- 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`
- Other styles that can be modified for Android are named `headlessAndroidContainer` and `viewContainer`

## Testing

This component has been tested on React Native v0.51 - v0.55
This component has been tested on React Native v0.51 - v0.57

[![BrowserStack](https://i.imgur.com/cOdhMed.png)](https://www.browserstack.com/)

Expand Down
14 changes: 9 additions & 5 deletions index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,28 @@ declare module 'react-native-picker-select' {
export interface Item {
label: string;
value: any;
key?: string;
key?: string | number;
color?: string;
}
type ModeOptions = 'dialog' | 'dropdown';
export interface PickerProps {
onValueChange: (value: any, index: number) => void;
items: Item[];
value?: any;
placeholder?: Item | {};
disabled?: boolean;
value?: any;
itemKey?: string | number;
style?: object;
children?: any;
hideIcon?: boolean;
placeholderTextColor?: string;
hideDoneBar?: boolean;
doneText?: string;
onDonePress?: () => void;
onUpArrow?: () => void;
onDownArrow?: () => void;
mode?: ModeOptions;
onDonePress?: () => void;
modalProps?: object;
textInputProps?: object;
pickerProps?: object;
}
class Picker extends React.Component<PickerProps> {}
export default Picker;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-picker-select",
"version": "4.4.0",
"version": "5.0.0",
"description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
"license": "MIT",
"author": "Michael Lefkowitz <[email protected]>",
Expand Down
Loading

0 comments on commit b5c4cc8

Please sign in to comment.