GabrielTrettel
3 years ago
2 changed files with 82 additions and 131 deletions
@ -1,131 +0,0 @@ |
|||||
import React, { useState, Fragment } from "react"; |
|
||||
import { StyleSheet, View } from "react-native"; |
|
||||
|
|
||||
import { FontAwesome5 } from "@expo/vector-icons"; |
|
||||
import colors from "../config/colors"; |
|
||||
import SearchableDropdown from "react-native-searchable-dropdown"; |
|
||||
|
|
||||
const items = [ |
|
||||
//substituir posteriormente pelas escolas
|
|
||||
{ |
|
||||
id: 1, |
|
||||
name: "JavaScript", |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
name: "Java", |
|
||||
}, |
|
||||
{ |
|
||||
id: 3, |
|
||||
name: "Ruby", |
|
||||
}, |
|
||||
{ |
|
||||
id: 4, |
|
||||
name: "React Native", |
|
||||
}, |
|
||||
{ |
|
||||
id: 5, |
|
||||
name: "PHP", |
|
||||
}, |
|
||||
{ |
|
||||
id: 6, |
|
||||
name: "Python", |
|
||||
}, |
|
||||
{ |
|
||||
id: 7, |
|
||||
name: "Python", |
|
||||
}, |
|
||||
{ |
|
||||
id: 8, |
|
||||
name: "Python", |
|
||||
}, |
|
||||
|
|
||||
{ |
|
||||
id: 9, |
|
||||
name: "Python", |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
function SchoolPicker(props) { |
|
||||
const [selectedItems, setSelectedItems] = useState(null); |
|
||||
|
|
||||
const selected = (i) => { |
|
||||
setSelectedItems(i); |
|
||||
props.itemSelected(i); |
|
||||
//console.log(i.name);
|
|
||||
}; |
|
||||
|
|
||||
return ( |
|
||||
<View style={{ width: "100%" }}> |
|
||||
<View style={styles.location}> |
|
||||
<View style={styles.mapIcon}> |
|
||||
<FontAwesome5 |
|
||||
name="university" |
|
||||
size={30} |
|
||||
color={colors.primary} |
|
||||
/> |
|
||||
</View> |
|
||||
<View style={styles.adressText}> |
|
||||
<Fragment> |
|
||||
<SearchableDropdown |
|
||||
multi={false} |
|
||||
selectedItems={selectedItems} |
|
||||
onItemSelect={(item) => { |
|
||||
selected(item); |
|
||||
}} |
|
||||
itemStyle={{ |
|
||||
padding: 10, |
|
||||
marginTop: 2, |
|
||||
backgroundColor: "#fff", |
|
||||
borderColor: "#bbb", |
|
||||
borderWidth: 1, |
|
||||
borderRadius: 6, |
|
||||
width: "100%", |
|
||||
}} |
|
||||
itemTextStyle={{ color: "#222" }} |
|
||||
itemsContainerStyle={{ maxHeight: "100%" }} |
|
||||
items={items} |
|
||||
chip={true} |
|
||||
resetValue={false} |
|
||||
textInputProps={{ |
|
||||
placeholder: "Escola onde você estuda...", |
|
||||
underlineColorAndroid: "transparent", |
|
||||
style: { |
|
||||
padding: 12, |
|
||||
borderWidth: 1, |
|
||||
borderColor: "#ccc", |
|
||||
borderRadius: 5, |
|
||||
alignItems: "flex-start", |
|
||||
backgroundColor: colors.white, |
|
||||
alignContent: "flex-start", |
|
||||
}, |
|
||||
onTextChange: (text) => console.log(text), |
|
||||
}} |
|
||||
/> |
|
||||
</Fragment> |
|
||||
</View> |
|
||||
</View> |
|
||||
</View> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
SchoolPicker.defaultProps = { |
|
||||
itemSelected: () => {}, |
|
||||
}; |
|
||||
|
|
||||
const styles = StyleSheet.create({ |
|
||||
location: { |
|
||||
flexDirection: "row", |
|
||||
}, |
|
||||
adressText: { |
|
||||
flex: 1 |
|
||||
}, |
|
||||
mapIcon: { |
|
||||
paddingTop: 10, |
|
||||
alignSelf: "flex-start", |
|
||||
paddingRight: 12, |
|
||||
|
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
export default SchoolPicker; |
|
@ -0,0 +1,82 @@ |
|||||
|
import React, { useState } from "react"; |
||||
|
import { StyleSheet, View } from "react-native"; |
||||
|
|
||||
|
import colors from "../config/colors"; |
||||
|
import DropDownPicker from "react-native-dropdown-picker"; |
||||
|
import { Shadow } from "react-native-shadow-2"; |
||||
|
|
||||
|
|
||||
|
function DropDown({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder }) { |
||||
|
const [open, setOpen] = useState(false); |
||||
|
|
||||
|
return ( |
||||
|
<DropDownPicker |
||||
|
open={open} |
||||
|
listMode="MODAL" |
||||
|
value={value} |
||||
|
items={items} |
||||
|
setValue={setValue} |
||||
|
setItems={setItems} |
||||
|
setOpen={setOpen} |
||||
|
searchable={true} |
||||
|
translation={{ |
||||
|
PLACEHOLDER: formPlaceholder, |
||||
|
SEARCH_PLACEHOLDER: searchPlaceholder, |
||||
|
SELECTED_ITEMS_COUNT_TEXT: "Item selecionado", |
||||
|
NOTHING_TO_SHOW: "Não encontramos nada com esse termo" |
||||
|
}} |
||||
|
style={{ |
||||
|
backgroundColor: colors.white, |
||||
|
borderRadius: 6, |
||||
|
borderColor: colors.grayBG, |
||||
|
borderWidth: 1, |
||||
|
}} |
||||
|
textStyle={{ |
||||
|
color: colors.medium, |
||||
|
fontSize: 18, |
||||
|
}} |
||||
|
labelStyle={{ |
||||
|
color: colors.medium, |
||||
|
fontSize: 18, |
||||
|
}} |
||||
|
modalProps={{ |
||||
|
animationType: "fade", |
||||
|
}} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function SearchablePicker({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder }) { |
||||
|
console.log(items ) |
||||
|
return ( |
||||
|
<View style={styles.location}> |
||||
|
<Shadow |
||||
|
offset={[0, 4]} |
||||
|
distance={4} |
||||
|
radius={4} |
||||
|
startColor="rgba(0, 0, 0, 0.25)" |
||||
|
paintInside={true} |
||||
|
> |
||||
|
<DropDown |
||||
|
value={value} |
||||
|
setValue={setValue} |
||||
|
items={items} |
||||
|
setItems={setItems} |
||||
|
formPlaceholder={formPlaceholder} |
||||
|
searchPlaceholder={searchPlaceholder} |
||||
|
/> |
||||
|
</Shadow> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
location: { |
||||
|
flex: 1, |
||||
|
alignSelf: "flex-start", |
||||
|
marginRight: 12, |
||||
|
marginLeft: 12, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
export default SearchablePicker; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue