Skip to content

Commit ad4c5d0

Browse files
onmotiononmotion
committed
add CustomRightIconExample example
1 parent e7bc023 commit ad4c5d0

File tree

12 files changed

+76
-30
lines changed

12 files changed

+76
-30
lines changed

‎example/App.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { LocalDataSetExample2 } from './components/LocalDataSetExample2'
1717
import { RemoteDataSetExample3 } from './components/RemoteDataSetExample3'
1818
import { RemoteDataSetExample } from './components/RemoteDataSetExample'
1919
import { RemoteDataSetExample2 } from './components/RemoteDataSetExample2'
20+
import { CustomRightIconExample } from './components/CustomRightIconExample'
2021

2122
const App = () => {
2223
const isDarkMode = useColorScheme() === 'dark'
@@ -61,6 +62,10 @@ const App = () => {
6162
<Text style={styles.sectionTitle}>Remote list customization 2</Text>
6263
<RemoteDataSetExample3 />
6364
</View>
65+
<View style={[styles.section, Platform.select({ ios: { zIndex: 95 } })]}>
66+
<Text style={styles.sectionTitle}>Custom Right Icon Example</Text>
67+
<CustomRightIconExample />
68+
</View>
6469
</View>
6570
</ScrollView>
6671
</KeyboardAvoidingView>

‎example/components/CustomRightIconExample.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { memo, useState } from 'react'
2+
import { useMemo } from 'react'
3+
import { Text, View } from 'react-native'
4+
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
5+
import Feather from 'react-native-vector-icons/Feather'
6+
import { generateDataSet } from '../helpers'
7+
Feather.loadFont()
8+
9+
export const CustomRightIconExample = memo(() => {
10+
const [selectedItem, setSelectedItem] = useState(null)
11+
12+
const dataSet = useMemo(generateDataSet, [])
13+
14+
return (
15+
<View>
16+
<AutocompleteDropdown
17+
clearOnFocus={false}
18+
onSelectItem={setSelectedItem}
19+
dataSet={dataSet}
20+
direction="down"
21+
suggestionsListMaxHeight={200}
22+
renderItem={(item, text) => (
23+
<Text style={{ color: '#f00', padding: 28, textAlign: 'center', fontWeight: 'bold', fontSize: 16 }}>
24+
-= {item.title} =-
25+
</Text>
26+
)}
27+
RightIconComponent={<Feather name="smile" size={18} color="#f55" />}
28+
showChevron={false}
29+
/>
30+
<Text style={{ color: '#668', fontSize: 13 }}>Selected item: {JSON.stringify(selectedItem)}</Text>
31+
</View>
32+
)
33+
})

‎example/components/LocalDataSetExample.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import React, { memo, useState } from 'react'
1+
import React, { memo, useMemo, useState } from 'react'
22
import { Text, View } from 'react-native'
33
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown'
4+
import { generateDataSet } from '../helpers'
45

56
export const LocalDataSetExample = memo(() => {
67
const [selectedItem, setSelectedItem] = useState(null)
78

8-
const dataSet = new Array(450)
9-
.fill({ id: '1', title: 'test' })
10-
.map((item, i) => ({ ...item, id: i.toString(), title: item.title + i }))
9+
const dataSet = useMemo(generateDataSet, [])
1110

1211
return (
1312
<View>

‎example/helpers.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const generateDataSet = (n = 450) => {
2+
return new Array(n)
3+
.fill({ id: '1', title: 'test' })
4+
.map((item, i) => ({ ...item, id: i.toString(), title: item.title + i }))
5+
}

‎example/ios/Podfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -547,4 +547,4 @@ SPEC CHECKSUMS:
547547

548548
PODFILE CHECKSUM: 484fe1376c06087352962bbdbd1d7a4e78347649
549549

550-
COCOAPODS: 1.10.1
550+
COCOAPODS: 1.11.3

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"dependencies": {
1212
"react": "17.0.2",
1313
"react-native": "0.68.1",
14-
"react-native-autocomplete-dropdown": "^1.2.1",
14+
"react-native-autocomplete-dropdown": "file:./../",
1515
"react-native-vector-icons": "^9.1.0"
1616
},
1717
"devDependencies": {

‎example/yarn.lock

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6214,14 +6214,12 @@ react-is@^16.13.1:
62146214
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
62156215
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
62166216

6217-
react-native-autocomplete-dropdown@^1.2.1:
6218-
version "1.2.1"
6219-
resolved "https://registry.yarnpkg.com/react-native-autocomplete-dropdown/-/react-native-autocomplete-dropdown-1.2.1.tgz#404701c9797632be43af6a58a2a87168616228e2"
6220-
integrity sha512-g0AtN6MIaFEFtwCm/QwU4sLZ0cmaVgT1kGbjtihGg9uzj0gwnfRSZEBe1Qh1cjXgqjmXPVGJ51BhhGezvSm6fg==
6217+
"react-native-autocomplete-dropdown@file:./..":
6218+
version "2.0.7"
62216219
dependencies:
62226220
lodash.debounce "*"
62236221
prop-types "*"
6224-
react-native-size-matters "^0.3.0"
6222+
react-native-size-matters "^0.3.0 || ^0.4.0"
62256223
react-native-vector-icons ">=7.0.0"
62266224

62276225
react-native-codegen@^0.0.13:
@@ -6239,10 +6237,10 @@ react-native-gradle-plugin@^0.0.6:
62396237
resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz"
62406238
integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg==
62416239

6242-
react-native-size-matters@^0.3.0:
6243-
version "0.3.1"
6244-
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
6245-
integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
6240+
"react-native-size-matters@^0.3.0 || ^0.4.0":
6241+
version "0.4.0"
6242+
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.4.0.tgz#01bfd0d59454318f4e0b13fe9c1eb0523d70f2e0"
6243+
integrity sha512-8/C0htHrFWeUm9N8JegmadovUfgTWkGBkDPZ1N3YkXtDWb+98Ya2gThiKcu445r8c7YhcrBfnHz/mYsXIusaOQ==
62466244

62476245
react-native-vector-icons@>=7.0.0, react-native-vector-icons@^9.1.0:
62486246
version "9.1.0"

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-autocomplete-dropdown",
3-
"version": "2.0.7",
3+
"version": "2.1.0",
44
"description": "Dropdown Item picker with search and autocomplete (typeahead) functionality for react native",
55
"main": "src/index.js",
66
"typings": "src/index.d.ts",

‎src/RightButton.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const RightButton = memo(
1717
ChevronIconComponent,
1818
ClearIconComponent,
1919
RightIconComponent,
20-
onSubmit,
20+
onRightIconComponentPress
2121
}) => {
2222
const isOpenedAnimationValue = useRef(new Animated.Value(0)).current
2323

@@ -48,9 +48,11 @@ export const RightButton = memo(
4848
</TouchableOpacity>
4949
)}
5050
{loading && <ActivityIndicator color="#999" />}
51-
{RightIconComponent && <TouchableOpacity onPress={onSubmit} style={styles.chevronButton}>
52-
{RightIconComponent}
53-
</TouchableOpacity>}
51+
{RightIconComponent && (
52+
<TouchableOpacity onPress={onRightIconComponentPress} style={styles.chevronButton}>
53+
{RightIconComponent}
54+
</TouchableOpacity>
55+
)}
5456
{showChevron && (
5557
<Animated.View style={{ transform: [{ rotate: chevronSpin }] }}>
5658
<TouchableOpacity onPress={onChevronPress} style={styles.chevronButton}>

‎src/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ interface AutocompleteDropdownProps {
5454
onOpenSuggestionsList?: (isOpened: boolean) => void;
5555
onClear?: () => void;
5656
onChevronPress?: () => void;
57+
onRightIconComponentPress?: () => void;
5758
onSubmit?: TextInputProps['onSubmitEditing'];
5859
onBlur?: TextInputProps['onBlur'];
5960
onFocus?: TextInputProps['onFocus'];

‎src/index.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -212,10 +212,13 @@ export const AutocompleteDropdown = memo(
212212
[props.onChangeText]
213213
)
214214

215-
const onChangeText = useCallback(text => {
216-
setSearchText(text)
217-
debouncedEvent(text)
218-
}, [debouncedEvent])
215+
const onChangeText = useCallback(
216+
text => {
217+
setSearchText(text)
218+
debouncedEvent(text)
219+
},
220+
[debouncedEvent]
221+
)
219222

220223
const onChevronPress = useCallback(() => {
221224
toggle()
@@ -270,7 +273,7 @@ export const AutocompleteDropdown = memo(
270273
{/* it's necessary use onLayout here for Androd (bug?) */}
271274
<View
272275
ref={containerRef}
273-
onLayout={_ => { }}
276+
onLayout={_ => {}}
274277
style={[styles.inputContainerStyle, props.inputContainerStyle]}>
275278
<InputComponent
276279
ref={inputRef}
@@ -300,7 +303,7 @@ export const AutocompleteDropdown = memo(
300303
ChevronIconComponent={props.ChevronIconComponent}
301304
ClearIconComponent={props.ClearIconComponent}
302305
RightIconComponent={props.RightIconComponent}
303-
onSubmit={onSubmit}
306+
onRightIconComponentPress={props.onRightIconComponentPress}
304307
/>
305308
</View>
306309
{isOpened && Array.isArray(dataSet) && (

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2891,10 +2891,10 @@ react-is@^16.13.1:
28912891
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
28922892
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
28932893

2894-
react-native-size-matters@^0.3.0:
2895-
version "0.3.1"
2896-
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
2897-
integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
2894+
"react-native-size-matters@^0.3.0 || ^0.4.0":
2895+
version "0.4.0"
2896+
resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.4.0.tgz#01bfd0d59454318f4e0b13fe9c1eb0523d70f2e0"
2897+
integrity sha512-8/C0htHrFWeUm9N8JegmadovUfgTWkGBkDPZ1N3YkXtDWb+98Ya2gThiKcu445r8c7YhcrBfnHz/mYsXIusaOQ==
28982898

28992899
react-native-vector-icons@>=7.0.0:
29002900
version "9.1.0"

0 commit comments

Comments
 (0)