diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..cb213284 --- /dev/null +++ b/CHANGELOG.md @@ -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) diff --git a/README.md b/README.md index 8bb97254..561fbe2d 100644 --- a/README.md +++ b/README.md @@ -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:
`{label: 'Orange',value: 'orange',key: 'orange', color: 'orange'}`
_ The label and the value are required, but the key will be based upon the label if it isn't included
\* 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`
_ 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
_ Closes the picker
\* 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
- Each item should be in the following format:
`{label: 'Orange', value: 'orange', key: 'orange', color: 'orange'}`
- The label and the value are required
- The key and color are optional
- The key will be set to the label if not included
- 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`
- 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
- Closes the picker
- 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/) diff --git a/index.d.ts b/index.d.ts index e71da177..35c2f853 100644 --- a/index.d.ts +++ b/index.d.ts @@ -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 {} export default Picker; diff --git a/package.json b/package.json index 22e458b1..2485356e 100644 --- a/package.json +++ b/package.json @@ -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