Skip to content

Commit 2dd9bf8

Browse files
bhavberibhavberi
committed
Added new prop - value to change value of selection by calling code
1 parent f4f01ab commit 2dd9bf8

File tree

4 files changed

+55
-30
lines changed

4 files changed

+55
-30
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@danish1658/react-native-d
140140
| maxHeight| Number | Maximum height of the dropdown wrapper to occupy
141141
| data| array or array[object]| Data which will be iterated as options of select list
142142
| setSelected| Function | For Setting the option value which will be stored in your local state
143+
| value | any (or any[]) | For changing the value of select list from outside
143144
| searchicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of search icon
144145
| arrowicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of chevron icon
145146
| closeicon| JSX Element | Pass any JSX to this prop like Text, Image or Icon to show instead of close icon

‎components/MultipleSelectList.tsx‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ import { MultipleSelectListProps } from '..';
1818
type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }
1919

2020
const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
21-
fontFamily,
21+
value=[],
2222
setSelected,
23+
fontFamily,
2324
placeholder,
2425
boxStyles,
2526
inputStyles,
@@ -50,7 +51,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
5051
const oldOption = React.useRef(null)
5152
const [_firstRender,_setFirstRender] = React.useState<boolean>(true);
5253
const [dropdown, setDropdown] = React.useState<boolean>(dropdownShown);
53-
const [selectedval, setSelectedVal] = React.useState<any>([]);
54+
const [selectedval, setSelectedVal] = React.useState<any>(value);
5455
const [height,setHeight] = React.useState<number>(350)
5556
const animatedvalue = React.useRef(new Animated.Value(0)).current;
5657
const [filtereddata,setFilteredData] = React.useState(data);
@@ -94,7 +95,13 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
9495
}
9596
onSelect()
9697

97-
},[selectedval])
98+
}, [selectedval])
99+
100+
101+
React.useEffect(() => {
102+
setSelectedVal(value);
103+
}, [value]);
104+
98105

99106
React.useEffect(() => {
100107
if(!_firstRender){
@@ -215,15 +222,15 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
215222
?
216223
filtereddata.map((item: L1Keys,index: number) => {
217224
let key = item.key ?? item.value ?? item;
218-
let value = item.value ?? item;
225+
let itemValue = item.value ?? item;
219226
let disabled = item.disabled ?? false;
220227
if(disabled){
221228
return(
222229
<TouchableOpacity style={[styles.disabledoption,disabledItemStyles]} key={index}>
223230
<View style={[{width:15,height:15,marginRight:10,borderRadius:3,justifyContent:'center',alignItems:'center',backgroundColor:'#c4c5c6'},disabledCheckBoxStyles]}>
224231

225232
{
226-
(selectedval?.includes(value))
233+
(selectedval?.includes(itemValue))
227234
?
228235

229236
<Image
@@ -238,15 +245,15 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
238245

239246
}
240247
</View>
241-
<Text style={[{fontFamily,color:'#c4c5c6'},disabledTextStyles]}>{value}</Text>
248+
<Text style={[{fontFamily,color:'#c4c5c6'},disabledTextStyles]}>{itemValue}</Text>
242249
</TouchableOpacity>
243250
)
244251
}else{
245252
return(
246253
<TouchableOpacity style={[styles.option,dropdownItemStyles]} key={index} onPress={ () => {
247254

248255

249-
let existing = selectedval?.indexOf(value)
256+
let existing = selectedval?.indexOf(itemValue)
250257

251258

252259
// console.log(existing);
@@ -268,7 +275,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
268275
}else{
269276
if(save === 'value'){
270277
setSelected((val: any) => {
271-
let temp = [...new Set([...val,value])];
278+
let temp = [...new Set([...val,itemValue])];
272279
return temp;
273280
})
274281
}else{
@@ -279,7 +286,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
279286
}
280287

281288
setSelectedVal((val: any )=> {
282-
let temp = [...new Set([...val,value])];
289+
let temp = [...new Set([...val,itemValue])];
283290
return temp;
284291
})
285292

@@ -293,7 +300,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
293300
<View style={[{width:15,height:15,borderWidth:1,marginRight:10,borderColor:'gray',borderRadius:3,justifyContent:'center',alignItems:'center'},checkBoxStyles]}>
294301

295302
{
296-
(selectedval?.includes(value))
303+
(selectedval?.includes(itemValue))
297304
?
298305

299306
<Image
@@ -312,7 +319,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
312319

313320

314321
</View>
315-
<Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
322+
<Text style={[{fontFamily},dropdownTextStyles]}>{itemValue}</Text>
316323
</TouchableOpacity>
317324
)
318325
}
@@ -321,7 +328,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
321328
:
322329
<TouchableOpacity style={[styles.option,dropdownItemStyles]} onPress={ () => {
323330
setSelected(undefined)
324-
setSelectedVal("")
331+
setSelectedVal([])
325332
slideup()
326333
setTimeout(() => setFilteredData(data), 800)
327334
}}>

‎components/SelectList.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import { SelectListProps } from '..';
1515

1616
type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }
1717

18-
const SelectList: React.FC<SelectListProps> = ({
18+
const SelectList: React.FC<SelectListProps> = ({
19+
value = "",
1920
setSelected,
2021
placeholder,
2122
boxStyles,
@@ -43,7 +44,7 @@ const SelectList: React.FC<SelectListProps> = ({
4344
const oldOption = React.useRef(null)
4445
const [_firstRender,_setFirstRender] = React.useState<boolean>(true);
4546
const [dropdown, setDropdown] = React.useState<boolean>(dropdownShown);
46-
const [selectedval, setSelectedVal] = React.useState<any>("");
47+
const [selectedval, setSelectedVal] = React.useState<any>(value);
4748
const [height,setHeight] = React.useState<number>(200)
4849
const animatedvalue = React.useRef(new Animated.Value(0)).current;
4950
const [filtereddata,setFilteredData] = React.useState(data)
@@ -102,18 +103,24 @@ const SelectList: React.FC<SelectListProps> = ({
102103
setSelectedVal(defaultOption.value);
103104
}
104105

105-
},[defaultOption])
106+
}, [defaultOption])
106107

108+
109+
React.useEffect(() => {
110+
setSelectedVal(value);
111+
}, [value]);
112+
113+
107114
React.useEffect(() => {
108-
if(!_firstRender){
109-
if(dropdownShown)
115+
if (!_firstRender) {
116+
if (dropdownShown)
110117
slidedown();
111118
else
112119
slideup();
113120

114121
}
115122

116-
},[dropdownShown])
123+
}, [dropdownShown]);
117124

118125

119126

@@ -197,29 +204,29 @@ const SelectList: React.FC<SelectListProps> = ({
197204
?
198205
filtereddata.map((item: L1Keys,index: number) => {
199206
let key = item.key ?? item.value ?? item;
200-
let value = item.value ?? item;
207+
let itemValue = item.value ?? item;
201208
let disabled = item.disabled ?? false;
202209
if(disabled){
203210
return(
204211
<TouchableOpacity style={[styles.disabledoption,disabledItemStyles]} key={index} onPress={ () => {}}>
205-
<Text style={[{color:'#c4c5c6',fontFamily},disabledTextStyles]}>{value}</Text>
212+
<Text style={[{color:'#c4c5c6',fontFamily},disabledTextStyles]}>{itemValue}</Text>
206213
</TouchableOpacity>
207214
)
208215
}else{
209216
return(
210217
<TouchableOpacity style={[styles.option,dropdownItemStyles]} key={index} onPress={ () => {
211218
if(save === 'value'){
212-
setSelected(value);
219+
setSelected(itemValue);
213220
}else{
214221
setSelected(key)
215222
}
216223

217-
setSelectedVal(value)
224+
setSelectedVal(itemValue)
218225
slideup()
219226
setTimeout(() => {setFilteredData(data)}, 800)
220227

221228
}}>
222-
<Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
229+
<Text style={[{fontFamily},dropdownTextStyles]}>{itemValue}</Text>
223230
</TouchableOpacity>
224231
)
225232
}

‎index.d.ts‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@
22
import type * as React from "react";
33
import { ViewStyle, TextStyle } from 'react-native';
44

5-
export interface SelectListProps {
5+
export interface SelectListProps {
66
/**
77
* Fn to set Selected option value which will be stored in your local state
88
*/
99
setSelected: Function,
1010

11+
/**
12+
* The value of the selected option to be updated in the local state
13+
*/
14+
value: any,
15+
1116
/**
1217
* Placeholder text that will be displayed in the select box
1318
*/
@@ -121,6 +126,11 @@ export interface MultipleSelectListProps {
121126
*/
122127
setSelected: Function,
123128

129+
/**
130+
* The value of the selected option to be updated in the local state
131+
*/
132+
value: any[],
133+
124134
/**
125135
* Placeholder text that will be displayed in the select box
126136
*/
@@ -139,7 +149,7 @@ export interface MultipleSelectListProps {
139149
/**
140150
* Additional styles for dropdown scrollview
141151
*/
142-
dropdownStyles?:ViewStyle,
152+
dropdownStyles?: ViewStyle,
143153

144154
/**
145155
* Additional styles for dropdown list item
@@ -184,7 +194,7 @@ export interface MultipleSelectListProps {
184194
/**
185195
* set to false if you dont want to use search functionality
186196
*/
187-
searchPlaceholder?: string,
197+
searchPlaceholder?: string,
188198

189199
/**
190200
* Trigger an action when option is selected
@@ -231,7 +241,7 @@ export interface MultipleSelectListProps {
231241
* What to store inside your local state (key or value)
232242
*/
233243
save?: 'key' | 'value',
234-
244+
235245
/**
236246
* Control the dropdown with this prop
237247
*/
@@ -242,7 +252,7 @@ export interface MultipleSelectListProps {
242252
*/
243253
closeicon?: JSX.Element,
244254

245-
255+
246256
/**
247257
* Additional styles for multiselect badge
248258
*/
@@ -259,9 +269,9 @@ export interface MultipleSelectListProps {
259269
labelStyles?: TextStyle,
260270
}
261271

262-
declare class MultipleSelectList extends React.Component<MultipleSelectListProps> {}
272+
declare class MultipleSelectList extends React.Component<MultipleSelectListProps> { }
263273

264-
declare class SelectList extends React.Component<SelectListProps> {}
274+
declare class SelectList extends React.Component<SelectListProps> { }
265275

266276
export {
267277
MultipleSelectList,

0 commit comments

Comments
 (0)