Skip to content

Added defaultOptions to Multi Select List #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added defaultOptions to Multi Select List #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 62 additions & 54 deletions components/MultipleSelectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {
Pressable,
Keyboard
} from 'react-native';
import {MultipleSelectListProps} from "..";

import { MultipleSelectListProps } from '..';

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

Expand All @@ -28,6 +28,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
dropdownTextStyles,
maxHeight,
data,
defaultOptions,
searchicon = false,
arrowicon = false,
closeicon = false,
Expand Down Expand Up @@ -58,21 +59,21 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({

const slidedown = () => {
setDropdown(true)

Animated.timing(animatedvalue,{
toValue:height,
duration:500,
useNativeDriver:false,

}).start()
}
const slideup = () => {

Animated.timing(animatedvalue,{
toValue:0,
duration:500,
useNativeDriver:false,

}).start(() => setDropdown(false))
}

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


React.useEffect(() => {
setFilteredData(data);
},[data])
Expand All @@ -93,18 +94,25 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
return;
}
onSelect()

},[selectedval])

React.useEffect(() => {
if(defaultOptions && _firstRender){
setSelected(defaultOptions);
setSelectedVal(defaultOptions);
}
})

React.useEffect(() => {
if(!_firstRender){
if(dropdownShown)
slidedown();
else
slideup();

}

},[dropdownShown])


Expand All @@ -118,20 +126,20 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
(dropdown && search)
?
<View style={[styles.wrapper,boxStyles]}>
<View style={{flexDirection:'row',alignItems:'center',flex:1}}>
<View style={{flexDirection:'row',alignItems:'center',flex:1}}>
{
(!searchicon)
?
<Image
<Image
source={require('../assets/images/search.png')}
resizeMode='contain'
style={{width:20,height:20,marginRight:7}}
/>
:
searchicon
}
<TextInput

<TextInput
placeholder={searchPlaceholder}
onChangeText={(val) => {
let result = data.filter((item: L1Keys) => {
Expand All @@ -150,7 +158,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
{
(!closeicon)
?
<Image
<Image
source={require('../assets/images/close.png')}
resizeMode='contain'
style={{width:17,height:17}}
Expand All @@ -159,10 +167,10 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
closeicon
}
</TouchableOpacity>


</View>

</View>
:

Expand Down Expand Up @@ -191,18 +199,18 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
{
(!arrowicon)
?
<Image
<Image
source={require('../assets/images/chevron.png')}
resizeMode='contain'
style={{width:20,height:20}}
/>
:
arrowicon
}

</TouchableOpacity>
}

{
(dropdown)
?
Expand All @@ -221,18 +229,18 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
return(
<TouchableOpacity style={[styles.disabledoption,disabledItemStyles]} key={index}>
<View style={[{width:15,height:15,marginRight:10,borderRadius:3,justifyContent:'center',alignItems:'center',backgroundColor:'#c4c5c6'},disabledCheckBoxStyles]}>

{
(selectedval?.includes(value))
?
<Image

<Image
key={index}
source={require('../assets/images/check.png')}
resizeMode='contain'
style={[{width:8,height:8,paddingLeft:7}]}
/>

:
null

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


let existing = selectedval?.indexOf(value)


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

let sv = [...selectedval];
sv.splice(existing,1)
sv.splice(existing,1)
setSelectedVal(sv);


setSelected((val: any) => {
let temp = [...val];
temp.splice(existing,1)
temp.splice(existing,1)
return temp;
});

// onSelect()
}else{
if(save === 'value'){
Expand All @@ -277,62 +285,62 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
return temp;
})
}

setSelectedVal((val: any )=> {
let temp = [...new Set([...val,value])];
return temp;
})


// onSelect()
}



}}>
<View style={[{width:15,height:15,borderWidth:1,marginRight:10,borderColor:'gray',borderRadius:3,justifyContent:'center',alignItems:'center'},checkBoxStyles]}>

{
(selectedval?.includes(value))
?
<Image

<Image
key={index}
source={require('../assets/images/check.png')}
resizeMode='contain'
style={{width:8,height:8,paddingLeft:7}}
/>

:
null

}







</View>
<Text style={[{fontFamily},dropdownTextStyles]}>{value}</Text>
</TouchableOpacity>
)
}

})
:
<TouchableOpacity style={[styles.option,dropdownItemStyles]} onPress={ () => {
setSelected(undefined)
setSelectedVal("")
slideup()
setTimeout(() => setFilteredData(data), 800)
setTimeout(() => setFilteredData(data), 800)
}}>
<Text style={dropdownTextStyles}>{notFoundText}</Text>
</TouchableOpacity>
}



</ScrollView>

{
(selectedval?.length > 0)
?
Expand All @@ -342,7 +350,7 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
<View style={{height: 1, flex: 1, backgroundColor: 'gray'}} />
</View>
<View style={{flexDirection:'row',paddingHorizontal:20,marginBottom:20,flexWrap:'wrap'}}>

{
selectedval?.map((item,index) => {
return (
Expand All @@ -358,17 +366,17 @@ const MultipleSelectList: React.FC<MultipleSelectListProps> = ({
:
null
}



</View>

</Animated.View>
:
null
}


</View>
)
}
Expand Down
16 changes: 8 additions & 8 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export interface SelectListProps {
onSelect?: () => void,

/**
* set fontFamily of whole component Text
* set fontFamily of whole component Text
*/
fontFamily?: string,

Expand Down Expand Up @@ -137,7 +137,7 @@ export interface MultipleSelectListProps {
inputStyles?: TextStyle,

/**
* Additional styles for dropdown scrollview
* Additional styles for dropdown scrollview
*/
dropdownStyles?:ViewStyle,

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

/**
* The default option of the select list
*/
defaultOption?: { key: any, value: any },
* The default option of the multi select list
*/
defaultOptions?: Array<{}>,

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

/**
* set fontFamily of whole component Text
* set fontFamily of whole component Text
*/
fontFamily?: string,

Expand Down Expand Up @@ -231,7 +231,7 @@ export interface MultipleSelectListProps {
* What to store inside your local state (key or value)
*/
save?: 'key' | 'value',

/**
* Control the dropdown with this prop
*/
Expand All @@ -242,7 +242,7 @@ export interface MultipleSelectListProps {
*/
closeicon?: JSX.Element,


/**
* Additional styles for multiselect badge
*/
Expand Down