0.0.2 • Published 6 years ago

react-multi-select-v v0.0.2

Weekly downloads
8
License
-
Repository
-
Last release
6 years ago

IOS / ANDROID

add on long press, fix names, make props default values

npm i react-multi-select-v
import {Select} from "react-multi-select-v";
<Select
	is_title_visible={true}
	selection_name={"Colors"}
	modal_select_title={"Choose "}
	button_add_title={"Add"}
	modal_button_style={{text:"ok",width:100,height:50,backgroundColor:"#FFFFFF",borderColor:"#D7B8F3"}}
        
    minimum_selected={0}
    maximum_selected={4}
    styles={styles}
    modal_styles={modal_styles}
    is_modal={false}
    is_mqc={true}

    key_name={"id"}
    denomination_name={"name"}
    colorKey_name={"color"}
    data={Colors}
        
    selected_data_keys={SelectedColors}
    colored_selection={false}
        
    additional={element => (
      <View>
        {element != null && 
          <Text
            style={{fontSize:15, fontWeight:"200"}}
          >
            {element.price} €
          </Text>
        }
      </View>
    )}
    on_selected_change={selectedIds => {
      console.log(selectedIds)
    }}
/>

Default styles,modal_styles props

var styles = StyleSheet.create({
  Selection_Title: {justifyContent:"center", alignItems:"center", padding:5},
  Selection_Box_Title: {backgroundColor:"#dfdfdf", padding:5, width: 200, borderRadius: 15, alignItems: "center", justifyContent: "center"},
  Selection_Title_Text: {fontSize:13, fontWeight:"500"},
  Element_View: {padding:5},
  Element_List: {flexDirection:"row", justifyContent:"space-around", flexWrap: 'wrap'},
  Element: {borderRadius:15, padding:10, borderColor:"#FFFFFF", borderWidth:1.5},
  Element_Selected: {backgroundColor:"#fdb827", borderWidth:1.5, borderColor:"#000000"},
  Element_UnSelected: {backgroundColor:"#f7f7f1"},
  Border_Not_Colored: {borderWidth:0}
})

var modal_styles = StyleSheet.create({
  MainView: {flex: 1, justifyContent:"center", alignItems:"center"},
  FlatList_Container: {flexGrow: 1, justifyContent: "center"},
  No_Elements_Text: {fontSize:30, fontWeight:"100"},
  Element_Main_View: {padding:5},
  Element: {padding: 10, borderRadius: 15},
  button_Text: {color:"#000000"}
});

npm.io

PropDescriptionValue
is_title_visibleis the title visible ?bool
selection_nametitle namestring
modal_select_titlewhen no element is selected displays, that text on the button followed by the "selection_name"string
button_add_titleadd button title ex:"+"string
modal_button_stylestyle of the button see exempledict
minimum_selectedminimum value selectedint
maximum_selectedmaximum value selectedint
stylesStyleSheet.create({}) default in component js file
modal_stylesStyleSheet.create({}) default in component js file
is_modalis the window modal ?bool
is_mqcmultiple choice questions ?bool
key_namethe key that will be returned in an array must be unique
denomination_namethe display name
colorKey_namethe key of the color in the dict
datadata [{denomination:"hey",key:1},{...array
selected_data_keysselected data [key,key,...array
colored_selectionis the selection using the colorKey_name to display colorbool
additionaladditional info check exemple
on_selected_changewill trigger on new change