Skip to content

Commit cffc495

Browse files
onmotiononmotion
authored
Merge pull request #30 from onmotion/issue-22
fix #22 filter custom rendered item
2 parents 9e8ea58 + 51c4506 commit cffc495

23 files changed

+685
-608
lines changed

‎.eslintrc.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
module.exports = {
22
root: true,
3-
extends: ['@react-native-community'],
4-
plugins: ['unused-imports'],
3+
extends: '@react-native-community',
54
rules: {
6-
'no-unused-vars': 'off', // or "@typescript-eslint/no-unused-vars": "off",
7-
'unused-imports/no-unused-imports': 'error',
8-
'react-native/no-inline-styles': 'off',
9-
'unused-imports/no-unused-vars': [
10-
'warn',
5+
'prettier/prettier': [
6+
'error',
117
{
12-
vars: 'all',
13-
varsIgnorePattern: '^_',
14-
args: 'after-used',
15-
argsIgnorePattern: '^_',
8+
printWidth: 110,
9+
arrowParens: 'avoid',
10+
bracketSameLine: true,
11+
bracketSpacing: true,
12+
singleQuote: true,
13+
trailingComma: 'all',
14+
tabWidth: 2,
15+
useTabs: false,
16+
semi: false,
1617
},
1718
],
19+
semi: 'off',
20+
'react-native/no-inline-styles': 'off',
21+
'react-hooks/exhaustive-deps': 'off',
1822
},
1923
}

‎.prettierrc.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ npm run ios
193193
| `dataSet` | set of list items | array | null |
194194
| `initialValue` | string (**id**) or object that contain **id** | string \| object | null |
195195
| `loading` | loading state | bool | false |
196-
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering) | bool | true |
196+
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
197197
| `showClear` | show clear button | bool | true |
198198
| `showChevron` | show chevron (open/close) button | bool | true |
199199
| `closeOnBlur` | whether to close dropdown on blur | bool | false |
@@ -211,6 +211,7 @@ npm run ios
211211
| `onSubmit` | event on submit KB button press | function | |
212212
| `onBlur` | event fired on text input blur | function | |
213213
| `onFocus` | event on focus text input | function | |
214+
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
214215
| `controller` | return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
215216
| `containerStyle` | | ViewStyle | |
216217
| `rightButtonsContainerStyle` | | ViewStyle | |
@@ -225,6 +226,8 @@ npm run ios
225226

226227
## Troubleshooting
227228

229+
230+
228231
### zIndex hell on iOS
229232

230233
As decribed here https://docs.expo.dev/ui-programming/z-index/ on iOS for absolute positioned items we must respect the zIndex of the element parent.

‎example/.eslintrc.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎example/.prettierrc.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎example/App.js‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React from 'react'
22
import {
33
SafeAreaView,
44
ScrollView,
@@ -8,57 +8,65 @@ import {
88
useColorScheme,
99
View,
1010
Platform,
11-
} from 'react-native';
11+
KeyboardAvoidingView,
12+
} from 'react-native'
1213

13-
import { Colors } from 'react-native/Libraries/NewAppScreen';
14-
import { LocalDataSetExample } from './components/LocalDataSetExample';
15-
import { RemoteDataSetExample3 } from './components/RemoteDataSetExample3';
16-
import { RemoteDataSetExample } from './components/RemoteDataSetExample';
17-
import { RemoteDataSetExample2 } from './components/RemoteDataSetExample2';
14+
import { Colors } from 'react-native/Libraries/NewAppScreen'
15+
import { LocalDataSetExample } from './components/LocalDataSetExample'
16+
import { LocalDataSetExample2 } from './components/LocalDataSetExample2'
17+
import { RemoteDataSetExample3 } from './components/RemoteDataSetExample3'
18+
import { RemoteDataSetExample } from './components/RemoteDataSetExample'
19+
import { RemoteDataSetExample2 } from './components/RemoteDataSetExample2'
1820

1921
const App = () => {
20-
const isDarkMode = useColorScheme() === 'dark';
22+
const isDarkMode = useColorScheme() === 'dark'
2123

2224
const backgroundStyle = {
2325
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
24-
};
26+
}
2527

2628
return (
2729
<SafeAreaView style={(backgroundStyle, { flex: 1 })}>
2830
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
29-
<ScrollView
30-
nestedScrollEnabled
31-
keyboardDismissMode="on-drag"
32-
keyboardShouldPersistTaps="handled"
33-
contentInsetAdjustmentBehavior="automatic"
34-
style={styles.scrollContainer}>
35-
<View style={[styles.container]}>
36-
<Text style={styles.title}>Autocomplete dropdown</Text>
37-
<View
38-
style={[styles.section, Platform.select({ ios: { zIndex: 100 } })]}>
39-
<Text style={styles.sectionTitle}>Local list</Text>
40-
<LocalDataSetExample />
31+
<KeyboardAvoidingView
32+
style={{ flex: 1 }}
33+
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
34+
enabled>
35+
<ScrollView
36+
nestedScrollEnabled
37+
keyboardDismissMode="on-drag"
38+
keyboardShouldPersistTaps="handled"
39+
contentInsetAdjustmentBehavior="automatic"
40+
contentContainerStyle={{ paddingBottom: 200 }}
41+
style={styles.scrollContainer}>
42+
<View style={[styles.container]}>
43+
<Text style={styles.title}>Autocomplete dropdown</Text>
44+
<View style={[styles.section, Platform.select({ ios: { zIndex: 100 } })]}>
45+
<Text style={styles.sectionTitle}>Local list</Text>
46+
<LocalDataSetExample />
47+
</View>
48+
<View style={[styles.section, Platform.select({ ios: { zIndex: 99 } })]}>
49+
<Text style={styles.sectionTitle}>Local list customization</Text>
50+
<LocalDataSetExample2 />
51+
</View>
52+
<View style={[styles.section, Platform.select({ ios: { zIndex: 98 } })]}>
53+
<Text style={styles.sectionTitle}>Remote list</Text>
54+
<RemoteDataSetExample />
55+
</View>
56+
<View style={[styles.section, Platform.select({ ios: { zIndex: 97 } })]}>
57+
<Text style={styles.sectionTitle}>Remote list customization</Text>
58+
<RemoteDataSetExample2 />
59+
</View>
60+
<View style={[styles.section, Platform.select({ ios: { zIndex: 96 } })]}>
61+
<Text style={styles.sectionTitle}>Remote list customization 2</Text>
62+
<RemoteDataSetExample3 />
63+
</View>
4164
</View>
42-
<View
43-
style={[styles.section, Platform.select({ ios: { zIndex: 99 } })]}>
44-
<Text style={styles.sectionTitle}>Remote list</Text>
45-
<RemoteDataSetExample />
46-
</View>
47-
<View
48-
style={[styles.section, Platform.select({ ios: { zIndex: 98 } })]}>
49-
<Text style={styles.sectionTitle}>Remote list customization</Text>
50-
<RemoteDataSetExample2 />
51-
</View>
52-
<View
53-
style={[styles.section, Platform.select({ ios: { zIndex: 97 } })]}>
54-
<Text style={styles.sectionTitle}>Remote list customization 2</Text>
55-
<RemoteDataSetExample3 />
56-
</View>
57-
</View>
58-
</ScrollView>
65+
</ScrollView>
66+
</KeyboardAvoidingView>
5967
</SafeAreaView>
60-
);
61-
};
68+
)
69+
}
6270

6371
const styles = StyleSheet.create({
6472
scrollContainer: {
@@ -79,6 +87,6 @@ const styles = StyleSheet.create({
7987
fontWeight: 'bold',
8088
marginBottom: 3,
8189
},
82-
});
90+
})
8391

84-
export default App;
92+
export default App

‎example/babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
22
presets: ['module:metro-react-native-babel-preset'],
3-
};
3+
}

‎example/components/LocalDataSetExample.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { memo, useState } from 'react';
2-
import { Text, View } from 'react-native';
3-
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
1+
import React, { memo, useState } from 'react'
2+
import { Text, View } from 'react-native'
3+
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
44

55
export const LocalDataSetExample = memo(() => {
6-
const [selectedItem, setSelectedItem] = useState(null);
6+
const [selectedItem, setSelectedItem] = useState(null)
77

88
return (
99
<View>
@@ -18,9 +18,7 @@ export const LocalDataSetExample = memo(() => {
1818
{ id: '3', title: 'Gamma' },
1919
]}
2020
/>
21-
<Text style={{ color: '#668', fontSize: 13 }}>
22-
Selected item: {JSON.stringify(selectedItem)}
23-
</Text>
21+
<Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
2422
</View>
25-
);
26-
});
23+
)
24+
})

‎example/components/LocalDataSetExample2.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { memo, useState } from 'react'
2+
import { Text, View } from 'react-native'
3+
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
4+
5+
export const LocalDataSetExample2 = memo(() => {
6+
const [selectedItem, setSelectedItem] = useState(null)
7+
8+
return (
9+
<View>
10+
<AutocompleteDropdown
11+
clearOnFocus={false}
12+
closeOnBlur={true}
13+
onSelectItem={setSelectedItem}
14+
dataSet={[
15+
{ id: '1', title: '🐑' },
16+
{ id: '2', title: '✨' },
17+
{ id: '3', title: '👌' },
18+
]}
19+
suggestionsListMaxHeight={500}
20+
renderItem={(item, text) => (
21+
<Text style={{ color: '#f00', padding: 28, textAlign: 'center', fontWeight: 'bold', fontSize: 16 }}>
22+
-= {item.title} =-
23+
</Text>
24+
)}
25+
/>
26+
<Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
27+
</View>
28+
)
29+
})

‎example/components/RemoteDataSetExample.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,53 @@
1-
import React, { memo, useCallback, useState } from 'react';
2-
import { Text } from 'react-native';
3-
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
1+
import React, { memo, useCallback, useState } from 'react'
2+
import { Text } from 'react-native'
3+
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
44

55
export const RemoteDataSetExample = memo(() => {
6-
const [loading, setLoading] = useState(false);
7-
const [remoteDataSet, setRemoteDataSet] = useState(null);
8-
const [selectedItem, setSelectedItem] = useState(null);
6+
const [loading, setLoading] = useState(false)
7+
const [remoteDataSet, setRemoteDataSet] = useState(null)
8+
const [selectedItem, setSelectedItem] = useState(null)
99

1010
const getSuggestions = useCallback(async q => {
11-
console.log('getSuggestions', q);
11+
const filterToken = q.toLowerCase()
12+
console.log('getSuggestions', filterToken)
1213
if (typeof q !== 'string' || q.length < 3) {
13-
setRemoteDataSet(null);
14-
return;
14+
setRemoteDataSet(null)
15+
return
1516
}
16-
setLoading(true);
17-
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
18-
const items = await response.json();
19-
const suggestions = items.map(item => ({
20-
id: item.id,
21-
title: item.title,
22-
}));
23-
setRemoteDataSet(suggestions);
24-
setLoading(false);
25-
}, []);
17+
setLoading(true)
18+
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
19+
const items = await response.json()
20+
21+
const suggestions = items
22+
.filter(item => item.title.toLowerCase().includes(filterToken))
23+
.map(item => ({
24+
id: item.id,
25+
title: item.title,
26+
}))
27+
28+
setRemoteDataSet(suggestions)
29+
setLoading(false)
30+
}, [])
2631

2732
return (
2833
<>
2934
<AutocompleteDropdown
3035
dataSet={remoteDataSet}
31-
// closeOnBlur={true}
36+
closeOnBlur={false}
37+
useFilter={false}
3238
clearOnFocus={false}
3339
textInputProps={{
34-
placeholder: 'Start typing...',
40+
placeholder: 'Start typing est...',
3541
}}
3642
onSelectItem={setSelectedItem}
3743
loading={loading}
3844
onChangeText={getSuggestions}
3945
suggestionsListTextStyle={{
4046
color: '#8f3c96',
4147
}}
42-
// EmptyResultComponent={
43-
// <Text style={{padding: 10, fontSize: 15}}>Oops ¯\_(ツ)_/¯</Text>
44-
// }
48+
EmptyResultComponent={<Text style={{ padding: 10, fontSize: 15 }}>Oops ¯\_(ツ)_/¯</Text>}
4549
/>
46-
<Text style={{ color: '#668', fontSize: 13 }}>
47-
Selected item: {JSON.stringify(selectedItem)}
48-
</Text>
50+
<Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
4951
</>
50-
);
51-
});
52+
)
53+
})

0 commit comments

Comments
 (0)