Skip to content

Commit e886fdc

Browse files
hepterhepter
committed
searchText, onCancel props added. README table alignment fix
1 parent 743e292 commit e886fdc

3 files changed

Lines changed: 91 additions & 67 deletions

File tree

‎README.md‎

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -124,68 +124,70 @@ return (
124124

125125
## API
126126
### Props
127-
Prop | Type | Optional | Default | Description
128-
------------------- | -------- | -------- | ------------ | -----------
129-
`data` | array | No | [] | array of objects with a unique `key` and `label` to select in the modal. Optional `component` overrides label text. Optional unique `testID` for each item.
130-
`search` | bool | Yes | true | Control the search box visibility
131-
`hideSectionOnSearch`| bool | Yes | false | Hide the caption of related matched items
132-
`caseSensitiveSearch`| bool | Yes | false | Sensitive mode on search
133-
`frozenSearch`| bool | Yes | false | Preserve initial modal size on search
134-
`fullHeight`| bool | Yes | false | Keep the modal size to the maximum regardless of the listed items
135-
`onSearchFilterer` | function | Yes |(searchText, data) => filteredData| Custom search filterer function.
136-
`onChange` | function | Yes | () => {} | callback function, when the users has selected an option
137-
`onChangeSearch` | function | Yes | (searchData) => {} | Callback function, when the users has typed in search box
138-
`onModalOpen` | function | Yes | () => {} | callback function, when modal is opening
139-
`onModalClose` | function | Yes | (item) => {} | callback function, when modal is closing. Returns the selected item.
140-
`keyExtractor`      | function | Yes     | (data) => data.key   | extract the key from the data item
141-
`labelExtractor`    | function | Yes     | (data) => data.label | extract the label from the data item
142-
`componentExtractor`| function | Yes     | (data) => data.component | extract the component from the data item
143-
`visible` | bool | Yes | false | control open/close state of modal
144-
`closeOnChange` | bool | Yes | true | control if modal closes on select
145-
`initValue` | string | Yes | `Select me!` | text that is initially shown on the button
146-
`cancelText` | string | Yes | `cancel` | text of the cancel button
147-
`disabled` | bool | Yes | false | `true` disables opening of the modal
148-
`supportedOrientations` | ['portrait', 'landscape'] | Yes | both | orientations the modal supports
149-
`keyboardShouldPersistTaps`| `string` / `bool` | Yes | `always` | passed to underlying ScrollView
150-
`listType` | string | Yes | `SCROLLVIEW` | scroller type: `SCROLLVIEW` or `FLATLIST`
151-
`animationType` | string | Yes | `slide` | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`.
152-
`style` | object | Yes | | style definitions for the root element
153-
`childrenContainerStyle`| object | Yes | {} | style definitions for the children container view
154-
`touchableStyle` | object | Yes | {} | style definitions for the touchable element
155-
`touchableActiveOpacity` | number | Yes | 0.2 | opacity for the touchable element on touch
156-
`selectStyle`       | object   | Yes     | {}         | style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass `flex:1` explicitly to `selectStyle` as a prop.
157-
`selectTextStyle` | object | Yes | {} | style definitions for the select element (available in default mode only!)
158-
`overlayStyle` | object | Yes | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
159-
`sectionStyle` | object | Yes | {} | style definitions for the section element
160-
`sectionTextStyle` | object | Yes | {} | style definitions for the select text element
161-
`selectedItemTextStyle` | object | Yes | {} | style definitions for the currently selected text element
162-
`optionStyle` | object | Yes | {} | style definitions for the option element
163-
`optionTextStyle` | object | Yes | {} | style definitions for the option text element
164-
`optionContainerStyle`| object | Yes | {} | style definitions for the option container element
165-
`cancelStyle` | object | Yes | {} | style definitions for the cancel element
166-
`cancelTextStyle` | object | Yes | {} | style definitions for the cancel text element
167-
`initValueTextStyle`| object | Yes | {} | style definitions for the initValue text element
168-
`cancelContainerStyle`| object | Yes | {} | style definitions for the cancel container
169-
`searchStyle` | object | Yes | {} | Style definitions for the search view element
170-
`searchTextStyle` | object | Yes | {} | Style definitions for the search text element
171-
`backdropPressToClose`| bool | Yes | false | `true` makes the modal close when the overlay is pressed
172-
`passThruProps`| object | Yes | {} | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
173-
`selectTextPassThruProps`| object | Yes | {} | props to pass through to the select text component
174-
`optionTextPassThruProps`| object | Yes | {} | props to pass through to the options text components in the modal
175-
`cancelTextPassThruProps`| object | Yes | {} | props to pass through to the cancel text components in the modal
176-
`scrollViewPassThruProps`| object | Yes | {} | props to pass through to the internal ScrollView
177-
`openButtonContainerAccessible`| bool | Yes | false | `true` enables accessibility for the open button container. Note: if `false` be sure to define accessibility props directly in the wrapped component.
178-
`listItemAccessible`| bool | Yes | false | `true` enables accessibility for data items. Note: data items should have an `accessibilityLabel` property if this is enabled
179-
`cancelButtonAccessible`| bool | Yes | false | `true` enables accessibility for cancel button.
180-
`scrollViewAccessible`| bool | Yes | false | `true` enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items.
181-
`scrollViewAccessibilityLabel` | string | Yes | undefined | Accessibility label for the modal ScrollView
182-
`cancelButtonAccessibilityLabel` | string | Yes | undefined | Accessibility label for the cancel button
183-
`modalOpenerHitSlop` | object | Yes | {} | How far touch can stray away from touchable that opens modal ([RN docs](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#hitslop))
184-
`customSelector` | node | Yes | undefined | Render a custom node instead of the built-in select box.
185-
`selectedKey` | any | Yes | '' | Key of the item to be initially selected
186-
`enableShortPress` | bool | Yes | true | enables short press. This is regular touch behavior.
187-
`enableLongPress` | bool | Yes | false | enables long press. When true, `onModalOpen` returns `{longPress: true}`
188-
`optionsTestIDPrefix` | string | Yes | `'default'` | This prefixes each selectable option's testID prop if no testID keys are provided in `props.data` array objects. Default for each option's testID: 'default-\<optionLabel\>'
127+
Prop | Type | Optional | Default | Description
128+
------------------------------- | ------------------------ | -------- | ------------------------------ | -----------
129+
`data` | array | No | [] | array of objects with a unique `key` and `label` to select in the modal. Optional `component` overrides label text. Optional unique `testID` for each item.
130+
`search` | bool | Yes | true | Control the search box visibility
131+
`hideSectionOnSearch` | bool | Yes | false | Hide the caption of related matched items
132+
`caseSensitiveSearch` | bool | Yes | false | Sensitive mode on search
133+
`frozenSearch` | bool | Yes | false | Preserve initial modal size on search
134+
`fullHeight` | bool | Yes | false | Keep the modal size to the maximum regardless of the listed items
135+
`onSearchFilterer` | function | Yes |(searchText, data) => filteredData | Custom search filterer function.
136+
`onChange` | function | Yes | () => {} | callback function, when the users has selected an option
137+
`onChangeSearch` | function | Yes | (searchData) => {} | Callback function, when the users has typed in search box
138+
`onModalOpen` | function | Yes | () => {} | callback function, when modal is opening
139+
`onModalClose` | function | Yes | (item) => {} | callback function, when modal is closing. Returns the selected item.
140+
`onCancel` | function | Yes | () => {} | callback function, when clicking the cancel button
141+
`keyExtractor` | function | Yes | (data) => data.key | extract the key from the data item
142+
`labelExtractor` | function | Yes | (data) => data.label | extract the label from the data item
143+
`componentExtractor` | function | Yes | (data) => data.component | extract the component from the data item
144+
`visible` | bool | Yes | false | control open/close state of modal
145+
`closeOnChange` | bool | Yes | true | control if modal closes on select
146+
`initValue` | string | Yes | `Select me!` | text that is initially shown on the button
147+
`cancelText` | string | Yes | `cancel` | text of the cancel button
148+
`searchText` | string | Yes | `search` | text of the search placeholder
149+
`disabled` | bool | Yes | false | `true` disables opening of the modal
150+
`supportedOrientations` | ['portrait', 'landscape'] | Yes | both | orientations the modal supports
151+
`keyboardShouldPersistTaps` | `string` / `bool` | Yes | `always` | passed to underlying ScrollView
152+
`listType` | string | Yes | `SCROLLVIEW` | scroller type: `SCROLLVIEW` or `FLATLIST`
153+
`animationType` | string | Yes | `slide` | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`.
154+
`style` | object | Yes | | style definitions for the root element
155+
`childrenContainerStyle` | object | Yes | {} | style definitions for the children container view
156+
`touchableStyle` | object | Yes | {} | style definitions for the touchable element
157+
`touchableActiveOpacity` | number | Yes | 0.2 | opacity for the touchable element on touch
158+
`selectStyle` | object | Yes | {} | style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass `flex:1` explicitly to `selectStyle` as a prop.
159+
`selectTextStyle` | object | Yes | {} | style definitions for the select element (available in default mode only!)
160+
`overlayStyle` | object | Yes | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
161+
`sectionStyle` | object | Yes | {} | style definitions for the section element
162+
`sectionTextStyle` | object | Yes | {} | style definitions for the select text element
163+
`selectedItemTextStyle` | object | Yes | {} | style definitions for the currently selected text element
164+
`optionStyle` | object | Yes | {} | style definitions for the option element
165+
`optionTextStyle` | object | Yes | {} | style definitions for the option text element
166+
`optionContainerStyle` | object | Yes | {} | style definitions for the option container element
167+
`cancelStyle` | object | Yes | {} | style definitions for the cancel element
168+
`cancelTextStyle` | object | Yes | {} | style definitions for the cancel text element
169+
`initValueTextStyle` | object | Yes | {} | style definitions for the initValue text element
170+
`cancelContainerStyle` | object | Yes | {} | style definitions for the cancel container
171+
`searchStyle` | object | Yes | {} | Style definitions for the search view element
172+
`searchTextStyle` | object | Yes | {} | Style definitions for the search text element
173+
`backdropPressToClose` | bool | Yes | false | `true` makes the modal close when the overlay is pressed
174+
`passThruProps` | object | Yes | {} | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
175+
`selectTextPassThruProps` | object | Yes | {} | props to pass through to the select text component
176+
`optionTextPassThruProps` | object | Yes | {} | props to pass through to the options text components in the modal
177+
`cancelTextPassThruProps` | object | Yes | {} | props to pass through to the cancel text components in the modal
178+
`scrollViewPassThruProps` | object | Yes | {} | props to pass through to the internal ScrollView
179+
`openButtonContainerAccessible` | bool | Yes | false | `true` enables accessibility for the open button container. Note: if `false` be sure to define accessibility props directly in the wrapped component.
180+
`listItemAccessible` | bool | Yes | false | `true` enables accessibility for data items. Note: data items should have an `accessibilityLabel` property if this is enabled
181+
`cancelButtonAccessible` | bool | Yes | false | `true` enables accessibility for cancel button.
182+
`scrollViewAccessible` | bool | Yes | false | `true` enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items.
183+
`scrollViewAccessibilityLabel` | string | Yes | undefined | Accessibility label for the modal ScrollView
184+
`cancelButtonAccessibilityLabel`| string | Yes | undefined | Accessibility label for the cancel button
185+
`modalOpenerHitSlop` | object | Yes | {} | How far touch can stray away from touchable that opens modal ([RN docs](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#hitslop))
186+
`customSelector` | node | Yes | undefined | Render a custom node instead of the built-in select box.
187+
`selectedKey` | any | Yes | '' | Key of the item to be initially selected
188+
`enableShortPress` | bool | Yes | true | enables short press. This is regular touch behavior.
189+
`enableLongPress` | bool | Yes | false | enables long press. When true, `onModalOpen` returns `{longPress: true}`
190+
`optionsTestIDPrefix` | string | Yes | `'default'` | This prefixes each selectable option's testID prop if no testID keys are provided in `props.data` array objects. Default for each option's testID: 'default-\<optionLabel\>'
189191

190192
### Methods
191193

‎index.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,13 @@ interface IModalSelectorProps<TOption> {
9494
*/
9595
onModalClose?: () => void;
9696

97+
/**
98+
* Callback function, when clicking the cancel button
99+
*
100+
* Default is `() => {}`
101+
*/
102+
onCancel?: () => void;
103+
97104
/**
98105
* Extract the key from the data item
99106
*
@@ -143,6 +150,13 @@ interface IModalSelectorProps<TOption> {
143150
*/
144151
cancelText?: string;
145152

153+
/**
154+
* Text of the search placeholder
155+
*
156+
* Default is `'search'`
157+
*/
158+
searchText?: string;
159+
146160
/**
147161
* Type of animation to be used to show the modal.
148162
*

0 commit comments

Comments
 (0)