Skip to content

Commit 2a2cc25

Browse files
dravecmirco123
dravec
and
mirco123
authored
Added support for diacritics, match suggestions from start, expose blur function (#90)
* fork related changes * bugfixing android * returning to the original version * diacriticless , part 1 * diacriticless, next part * configurable ignoreAccents * implementing matchFromStart * exporting blur to be able to close the component from outside * documentation update * 1.1.0 --------- Co-authored-by: mirco123 <[email protected]>
1 parent 1f21163 commit 2a2cc25

File tree

7 files changed

+206
-62
lines changed

7 files changed

+206
-62
lines changed

‎.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,3 +349,13 @@ MigrationBackup/
349349

350350
# Ionide (cross platform F# VS Code tools) working folder
351351
.ionide/
352+
353+
# macOS
354+
.DS_Store
355+
356+
#windows
357+
desktop.ini
358+
359+
# .idea
360+
/.idea
361+
.idea

‎README.md‎

Lines changed: 43 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
Dropdown Item picker with search and autocomplete (typeahead) functionality for react native
44

55
[![license](https://img.shields.io/github/license/onmotion/react-native-autocomplete-dropdown)](https://img.shields.io/github/license/onmotion/react-native-autocomplete-dropdown)
6-
[![npm](https://img.shields.io/npm/v/react-native-autocomplete-dropdown.svg)](https://npmjs.com/package/react-native-autocomplete-dropdown)
7-
[![npm](https://img.shields.io/npm/dm/react-native-autocomplete-dropdown.svg)](https://npmjs.com/package/react-native-autocomplete-dropdown)
8-
9-
> This is documentation for version 3.x, if you are looking docs for version 2.x, you can find it [here](https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/README%5E2.md)
106

117
<p style="text-align: center;" align="center">
128
<img src="./screens/Example.png" width="500px" >
@@ -19,10 +15,6 @@ Dropdown Item picker with search and autocomplete (typeahead) functionality for
1915
<img src="./screens/ios.gif" width="280px" >
2016
</p>
2117

22-
> Run expo snack demo [@onmotion/react-native-autocomplete-dropdown](https://snack.expo.io/@onmotion/react-native-autocomplete-dropdown-v3)
23-
24-
<img src="./screens/expo-qr.png" width="150">
25-
2618
## Nav
2719

2820
- [react-native-autocomplete-dropdown](#react-native-autocomplete-dropdown)
@@ -43,13 +35,13 @@ Dropdown Item picker with search and autocomplete (typeahead) functionality for
4335
Run:
4436

4537
```bash
46-
npm install --save react-native-autocomplete-dropdown
38+
npm install --save react-native-autocomplete-dropdown-extended
4739
```
4840

4941
or
5042

5143
```bash
52-
yarn add react-native-autocomplete-dropdown
44+
yarn add react-native-autocomplete-dropdown-extended
5345
```
5446

5547
## Post-install Steps
@@ -82,7 +74,7 @@ Wrap your root component in `AutocompleteDropdownContextProvider` from `react-na
8274
import the package
8375

8476
```js
85-
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
77+
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown-extended';
8678
```
8779

8880
### Dataset item format
@@ -225,7 +217,7 @@ export const RemoteDataSetExample2 = memo(() => {
225217

226218
```
227219

228-
More examples see at <https://github.com/onmotion/react-native-autocomplete-dropdown/tree/main/example>
220+
More examples see at <https://github.com/dravec/react-native-autocomplete-dropdown/tree/main/example>
229221

230222
## Playground
231223

@@ -239,40 +231,42 @@ yarn ios
239231

240232
## Options
241233

242-
| **Option** | **Description** | **Type** | **Default** |
243-
|--- |--- |--- |--- |
244-
| `dataSet` | set of list items | array | null |
245-
| `initialValue` | string (**id**) or object that contain **id** | string \| object | null |
246-
| `loading` | loading state | bool | false |
247-
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
248-
| `showClear` | show clear button | bool | true |
249-
| `showChevron` | show chevron (open/close) button | bool | true |
250-
| `closeOnBlur` | whether to close dropdown on blur | bool | false |
251-
| `closeOnSubmit` | whether to close dropdown on submit | bool | false |
252-
| `clearOnFocus` | whether to clear typed text on focus | bool | true |
253-
| `debounce` | wait **ms** before call `onChangeText` | number | 0 |
254-
| `suggestionsListMaxHeight` | max height of dropdown | number | 200 |
255-
| `direction` | "up" or "down" | string | down + auto calculate |
256-
| `bottomOffset` | for calculate dropdown direction (e.g. tabbar) | number | 0 |
257-
| `onChangeText` | event textInput onChangeText | function | |
258-
| `onSelectItem` | event onSelectItem | function | |
259-
| `onOpenSuggestionsList` | event onOpenSuggestionsList | function | |
260-
| `onChevronPress` | event onChevronPress | function | |
261-
| `onClear` | event on clear button press | function | |
262-
| `onSubmit` | event on submit KB button press | function | |
263-
| `onBlur` | event fired on text input blur | function | |
264-
| `onFocus` | event on focus text input | function | |
265-
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
266-
| `controller` | return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
267-
| `containerStyle` | | ViewStyle | |
268-
| `rightButtonsContainerStyle` | | ViewStyle | |
269-
| `suggestionsListContainerStyle` | | ViewStyle | |
270-
| `suggestionsListTextStyle` | | TextStyle | styles of suggestions list text items |
271-
| `ChevronIconComponent` | | React.Component | Feather chevron icon |
272-
| `ClearIconComponent` | | React.Component | Feather x icon |
273-
| ~~ScrollViewComponent~~ | removed in 2.0.0 based on FlatList | React.Component name | ScrollView that provide suggestions content |
274-
| `EmptyResultComponent` | replace the default `` Component on empty result | React.Component | |
275-
| `InputComponent` | input element component | React.ComponentType | TextInput |
276-
| `emptyResultText` | replace the default "Nothing found" text on empty result | string | "Nothing found" |
277-
| `textInputProps` | text input props | TextInputProps | |
278-
| `flatListProps` | props for \ component | FlatListProps\ | |
234+
| **Option** | **Description** | **Type** | **Default** |
235+
|--- |-----------------------------------------------------------------------------------------------------------------|--- |-----------------------------------------------|
236+
| `dataSet` | set of list items | array | null |
237+
| `initialValue` | string (**id**) or object that contain **id** | string \| object | null |
238+
| `loading` | loading state | bool | false |
239+
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
240+
| `showClear` | show clear button | bool | true |
241+
| `showChevron` | show chevron (open/close) button | bool | true |
242+
| `closeOnBlur` | whether to close dropdown on blur | bool | false |
243+
| `closeOnSubmit` | whether to close dropdown on submit | bool | false |
244+
| `clearOnFocus` | whether to clear typed text on focus | bool | true |
245+
| `ignoreAccents` | ignore diacritics | bool | true |
246+
| `debounce` | wait **ms** before call `onChangeText` | number | 0 |
247+
| `suggestionsListMaxHeight` | max height of dropdown | number | 200 |
248+
| `direction` | "up" or "down" | string | down + auto calculate |
249+
| `matchFrom` | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | string | any |
250+
| `bottomOffset` | for calculate dropdown direction (e.g. tabbar) | number | 0 |
251+
| `onChangeText` | event textInput onChangeText | function | |
252+
| `onSelectItem` | event onSelectItem | function | |
253+
| `onOpenSuggestionsList` | event onOpenSuggestionsList | function | |
254+
| `onChevronPress` | event onChevronPress | function | |
255+
| `onClear` | event on clear button press | function | |
256+
| `onSubmit` | event on submit KB button press | function | |
257+
| `onBlur` | event fired on text input blur | function | |
258+
| `onFocus` | event on focus text input | function | |
259+
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
260+
| `controller` | return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
261+
| `containerStyle` | | ViewStyle | |
262+
| `rightButtonsContainerStyle` | | ViewStyle | |
263+
| `suggestionsListContainerStyle` | | ViewStyle | |
264+
| `suggestionsListTextStyle` | | TextStyle | styles of suggestions list text items |
265+
| `ChevronIconComponent` | | React.Component | Feather chevron icon |
266+
| `ClearIconComponent` | | React.Component | Feather x icon |
267+
| ~~ScrollViewComponent~~ | removed in 2.0.0 based on FlatList | React.Component name | ScrollView that provide suggestions content |
268+
| `EmptyResultComponent` | replace the default `` Component on empty result | React.Component | |
269+
| `InputComponent` | input element component | React.ComponentType | TextInput |
270+
| `emptyResultText` | replace the default "Nothing found" text on empty result | string | "Nothing found" |
271+
| `textInputProps` | text input props | TextInputProps | |
272+
| `flatListProps` | props for \ component | FlatListProps\ | |

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
"name": "react-native-autocomplete-dropdown",
3-
"version": "3.0.2",
4-
"description": "Dropdown Item picker with search and autocomplete (typeahead) functionality for react native",
2+
"name": "react-native-autocomplete-dropdown-extended",
3+
"version": "1.1.0",
4+
"description": "Dropdown Item picker with search, support for accents and autocomplete (typeahead) functionality for react native",
55
"main": "src/index.js",
66
"typings": "src/index.d.ts",
77
"repository": {
88
"type": "git",
9-
"url": "git+ssh://[email protected]/onmotion/react-native-autocomplete-dropdown.git"
9+
"url": "git+ssh://[email protected]/dravec/react-native-autocomplete-dropdown.git"
1010
},
11-
"homepage": "https://github.com/onmotion/react-native-autocomplete-dropdown",
11+
"homepage": "https://github.com/dravec/react-native-autocomplete-dropdown",
1212
"keywords": [
1313
"react-native",
1414
"dropdown",
@@ -51,7 +51,7 @@
5151
"react-native-size-matters": "^0.4.0"
5252
},
5353
"bugs": {
54-
"url": "https://github.com/onmotion/react-native-autocomplete-dropdown/issues"
54+
"url": "https://github.com/dravec/react-native-autocomplete-dropdown/issues"
5555
},
5656
"directories": {
5757
"example": "example"

‎src/ScrollViewListItem.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import React, { memo, useMemo } from 'react'
22
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
3+
import diacriticless from './diacriticless';
34

4-
export const ScrollViewListItem = memo(({ highlight, title, style, onPress, numberOfLines = 2 }) => {
5+
export const ScrollViewListItem = memo(({ highlight, title, style, onPress, ignoreAccents, numberOfLines = 2 }) => {
56
const titleParts = useMemo(() => {
67
let titleHighlighted = ''
78
let titleStart = title
89
let titleEnd = ''
910

1011
if (typeof title === 'string' && title.length > 0 && highlight.length > 0) {
11-
const substrIndex = title.toLowerCase().indexOf(highlight.toLowerCase())
12+
13+
const highlightIn = ignoreAccents ? diacriticless( title.toLowerCase()) : title.toLowerCase()
14+
const highlightWhat = ignoreAccents ? diacriticless( highlight.toLowerCase()) : highlight.toLowerCase()
15+
16+
const substrIndex = highlightIn.indexOf( highlightWhat )
1217
if (substrIndex !== -1) {
1318
titleStart = title.slice(0, substrIndex)
1419
titleHighlighted = title.slice(substrIndex, substrIndex + highlight.length)

0 commit comments

Comments
 (0)