Skip to content

Commit 23e43ed

Browse files
jeremydumaisjeremydumais
committed
Integrated the pull request danish1658#86 of KoalaBear
1 parent f4f01ab commit 23e43ed

File tree

2 files changed

+71
-63
lines changed

2 files changed

+71
-63
lines changed

‎components/MultipleSelectList.tsx

Lines changed: 62 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import {
1212
Pressable,
1313
Keyboard
1414
} from 'react-native';
15+
import {MultipleSelectListProps} from "..";
1516

16-
import { MultipleSelectListProps } from '..';
1717

1818
type L1Keys = { key?: any; value?: any; disabled?: boolean | undefined }
1919

@@ -28,6 +28,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
2828
dropdownTextStyles,
2929
maxHeight,
3030
data,
31+
defaultOptions,
3132
searchicon = false,
3233
arrowicon = false,
3334
closeicon = false,
@@ -58,21 +59,21 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
5859

5960
const slidedown = () => {
6061
setDropdown(true)
61-
62+
6263
Animated.timing(animatedvalue,{
6364
toValue:height,
6465
duration:500,
6566
useNativeDriver:false,
66-
67+
6768
}).start()
6869
}
6970
const slideup = () => {
70-
71+
7172
Animated.timing(animatedvalue,{
7273
toValue:0,
7374
duration:500,
7475
useNativeDriver:false,
75-
76+
7677
}).start(() => setDropdown(false))
7778
}
7879

@@ -81,7 +82,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
8182
setHeight(maxHeight)
8283
},[maxHeight])
8384

84-
85+
8586
React.useEffect(() => {
8687
setFilteredData(data);
8788
},[data])
@@ -93,18 +94,25 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
9394
return;
9495
}
9596
onSelect()
96-
97+
9798
},[selectedval])
9899

100+
React.useEffect(() => {
101+
if(defaultOptions && _firstRender){
102+
setSelected(defaultOptions);
103+
setSelectedVal(defaultOptions);
104+
}
105+
})
106+
99107
React.useEffect(() => {
100108
if(!_firstRender){
101109
if(dropdownShown)
102110
slidedown();
103111
else
104112
slideup();
105-
113+
106114
}
107-
115+
108116
},[dropdownShown])
109117

110118

@@ -118,20 +126,20 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
118126
(dropdown && search)
119127
?
120128
<View style={[styles.wrapper,boxStyles]}>
121-
<View style={{flexDirection:'row',alignItems:'center',flex:1}}>
129+
<View style={{flexDirection:'row',alignItems:'center',flex:1}}>
122130
{
123131
(!searchicon)
124132
?
125-
<Image
133+
<Image
126134
source={require('../assets/images/search.png')}
127135
resizeMode='contain'
128136
style={{width:20,height:20,marginRight:7}}
129137
/>
130138
:
131139
searchicon
132140
}
133-
134-
<TextInput
141+
142+
<TextInput
135143
placeholder={searchPlaceholder}
136144
onChangeText={(val) => {
137145
let result = data.filter((item: L1Keys) => {
@@ -150,7 +158,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
150158
{
151159
(!closeicon)
152160
?
153-
<Image
161+
<Image
154162
source={require('../assets/images/close.png')}
155163
resizeMode='contain'
156164
style={{width:17,height:17}}
@@ -159,10 +167,10 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
159167
closeicon
160168
}
161169
</TouchableOpacity>
162-
163-
170+
171+
164172
</View>
165-
173+
166174
</View>
167175
:
168176

@@ -191,18 +199,18 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
191199
{
192200
(!arrowicon)
193201
?
194-
<Image
202+
<Image
195203
source={require('../assets/images/chevron.png')}
196204
resizeMode='contain'
197205
style={{width:20,height:20}}
198206
/>
199207
:
200208
arrowicon
201209
}
202-
210+
203211
</TouchableOpacity>
204212
}
205-
213+
206214
{
207215
(dropdown)
208216
?
@@ -221,18 +229,18 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
221229
return(
222230
<TouchableOpacity style={[styles.disabledoption,disabledItemStyles]} key={index}>
223231
<View style={[{width:15,height:15,marginRight:10,borderRadius:3,justifyContent:'center',alignItems:'center',backgroundColor:'#c4c5c6'},disabledCheckBoxStyles]}>
224-
232+
225233
{
226234
(selectedval?.includes(value))
227235
?
228-
229-
<Image
236+
237+
<Image
230238
key={index}
231239
source={require('../assets/images/check.png')}
232240
resizeMode='contain'
233241
style={[{width:8,height:8,paddingLeft:7}]}
234242
/>
235-
243+
236244
:
237245
null
238246

@@ -245,7 +253,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
245253
return(
246254
<TouchableOpacity style={[styles.option,dropdownItemStyles]} key={index} onPress={ () => {
247255

248-
256+
249257
let existing = selectedval?.indexOf(value)
250258

251259

@@ -254,16 +262,16 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
254262
if(existing != -1 && existing != undefined){
255263

256264
let sv = [...selectedval];
257-
sv.splice(existing,1)
265+
sv.splice(existing,1)
258266
setSelectedVal(sv);
259267

260268

261269
setSelected((val: any) => {
262270
let temp = [...val];
263-
temp.splice(existing,1)
271+
temp.splice(existing,1)
264272
return temp;
265273
});
266-
274+
267275
// onSelect()
268276
}else{
269277
if(save === 'value'){
@@ -277,62 +285,62 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
277285
return temp;
278286
})
279287
}
280-
288+
281289
setSelectedVal((val: any )=> {
282290
let temp = [...new Set([...val,value])];
283291
return temp;
284292
})
285-
286-
293+
294+
287295
// onSelect()
288296
}
289-
290-
291-
297+
298+
299+
292300
}}>
293301
<View style={[{width:15,height:15,borderWidth:1,marginRight:10,borderColor:'gray',borderRadius:3,justifyContent:'center',alignItems:'center'},checkBoxStyles]}>
294-
302+
295303
{
296304
(selectedval?.includes(value))
297305
?
298-
299-
<Image
306+
307+
<Image
300308
key={index}
301309
source={require('../assets/images/check.png')}
302310
resizeMode='contain'
303311
style={{width:8,height:8,paddingLeft:7}}
304312
/>
305-
313+
306314
:
307315
null
308316

309317
}
310-
311318

312-
313-
319+
320+
321+
314322
</View>
315323
<Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
316324
</TouchableOpacity>
317325
)
318326
}
319-
327+
320328
})
321329
:
322330
<TouchableOpacity style={[styles.option,dropdownItemStyles]} onPress={ () => {
323331
setSelected(undefined)
324332
setSelectedVal("")
325333
slideup()
326-
setTimeout(() => setFilteredData(data), 800)
334+
setTimeout(() => setFilteredData(data), 800)
327335
}}>
328336
<Text style={dropdownTextStyles}>{notFoundText}</Text>
329337
</TouchableOpacity>
330338
}
331-
332-
333-
339+
340+
341+
334342
</ScrollView>
335-
343+
336344
{
337345
(selectedval?.length > 0)
338346
?
@@ -342,7 +350,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
342350
<View style={{height: 1, flex: 1, backgroundColor: 'gray'}} />
343351
</View>
344352
<View style={{flexDirection:'row',paddingHorizontal:20,marginBottom:20,flexWrap:'wrap'}}>
345-
353+
346354
{
347355
selectedval?.map((item,index) => {
348356
return (
@@ -358,17 +366,17 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
358366
:
359367
null
360368
}
361-
362-
363-
369+
370+
371+
364372
</View>
365-
373+
366374
</Animated.View>
367375
:
368376
null
369377
}
370-
371-
378+
379+
372380
</View>
373381
)
374382
}

‎index.d.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export interface SelectListProps {
7979
onSelect?: () => void,
8080

8181
/**
82-
* set fontFamily of whole component Text
82+
* set fontFamily of whole component Text
8383
*/
8484
fontFamily?: string,
8585

@@ -137,7 +137,7 @@ export interface MultipleSelectListProps {
137137
inputStyles?: TextStyle,
138138

139139
/**
140-
* Additional styles for dropdown scrollview
140+
* Additional styles for dropdown scrollview
141141
*/
142142
dropdownStyles?:ViewStyle,
143143

@@ -162,9 +162,9 @@ export interface MultipleSelectListProps {
162162
data: Array<{}>,
163163

164164
/**
165-
* The default option of the select list
166-
*/
167-
defaultOption?: { key: any, value: any },
165+
* The default option of the multi select list
166+
*/
167+
defaultOptions?: Array<{}>,
168168

169169
/**
170170
* Pass any JSX to this prop like Text, Image or Icon to show instead of search icon
@@ -197,7 +197,7 @@ export interface MultipleSelectListProps {
197197
label?: string,
198198

199199
/**
200-
* set fontFamily of whole component Text
200+
* set fontFamily of whole component Text
201201
*/
202202
fontFamily?: string,
203203

@@ -231,7 +231,7 @@ export interface MultipleSelectListProps {
231231
* What to store inside your local state (key or value)
232232
*/
233233
save?: 'key' | 'value',
234-
234+
235235
/**
236236
* Control the dropdown with this prop
237237
*/
@@ -242,7 +242,7 @@ export interface MultipleSelectListProps {
242242
*/
243243
closeicon?: JSX.Element,
244244

245-
245+
246246
/**
247247
* Additional styles for multiselect badge
248248
*/
@@ -266,4 +266,4 @@ declare class SelectList extends React.Component<SelectListProps> {}
266266
export {
267267
MultipleSelectList,
268268
SelectList
269-
};
269+
};

0 commit comments

Comments
 (0)