Browse Source

Changing SchoolPicker to SearchablePicker and switching to new component

master
GabrielTrettel 3 years ago
parent
commit
e250602858
  1. 131
      src/app/components/SchoolPicker.js
  2. 82
      src/app/components/SearchablePicker.js

131
src/app/components/SchoolPicker.js

@ -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;

82
src/app/components/SearchablePicker.js

@ -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;
Loading…
Cancel
Save