Browse Source

Lightening shadows and adjusting component size in the user registration screen

master
GabrielTrettel 3 years ago
parent
commit
d4b5655bf4
  1. 10
      src/app/components/SearchablePicker.js
  2. 9
      src/app/components/TextInput.js
  3. 20
      src/app/components/forms/FormField.js
  4. 97
      src/app/screens/RegisterScreen.js

10
src/app/components/SearchablePicker.js

@ -65,10 +65,10 @@ function SearchablePicker({
return (
<View style={styles.location}>
<Shadow
offset={[0, 4]}
distance={4}
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
>
<DropDown
@ -89,8 +89,8 @@ const styles = StyleSheet.create({
location: {
flex: 1,
alignSelf: "flex-start",
marginRight: 12,
marginLeft: 12,
marginRight: 2,
marginLeft: 16,
},
});

9
src/app/components/TextInput.js

@ -8,11 +8,11 @@ import { Shadow } from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) {
return (
<Shadow
viewStyle={{ width: width, height: otherProps.numberOfLines * 21 }}
offset={[0, 4]}
distance={4}
viewStyle={{ width: width, height: otherProps.numberOfLines * 24 }}
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
>
<View style={[styles.container, { width }]}>
@ -41,6 +41,7 @@ const styles = StyleSheet.create({
borderColor: colors.grayBG,
borderWidth: 1,
padding: 5,
paddingLeft: 12,
},
icon: {
marginRight: 10,

20
src/app/components/forms/FormField.js

@ -11,10 +11,10 @@ import { Shadow } from "react-native-shadow-2";
function IncreaseDecreaseButtons({ content }) {
return (
<Shadow
offset={[0, 4]}
distance={4}
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
>
<View
@ -75,7 +75,7 @@ function RenderPluviometerInput({
<TouchableOpacity
onPress={() => {
increase();
decrease();
}}
style={{
paddingLeft: 4,
@ -83,12 +83,12 @@ function RenderPluviometerInput({
paddingRight: 1.5,
}}
>
<IncreaseDecreaseButtons content={"+"} />
<IncreaseDecreaseButtons content={"-"} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
decrease();
increase();
}}
style={{
paddingLeft: 1.5,
@ -96,7 +96,7 @@ function RenderPluviometerInput({
paddingRight: 16,
}}
>
<IncreaseDecreaseButtons content={"-"} />
<IncreaseDecreaseButtons content={"+"} />
</TouchableOpacity>
</View>
);
@ -107,6 +107,8 @@ function AppFormField({
width,
increaseDecreaseButtons = false,
flex = 0,
paddingLeft = 16,
paddingRight = 16,
...otherProps
}) {
const {
@ -122,8 +124,8 @@ function AppFormField({
<View flex={flex}>
<View
style={{
paddingLeft: 16,
paddingRight: increaseDecreaseButtons ? 0 : 16,
paddingLeft: paddingLeft,
paddingRight: increaseDecreaseButtons ? 0 : paddingRight,
}}
>
{name != "pluviometer" ? (

97
src/app/screens/RegisterScreen.js

@ -50,23 +50,23 @@ function LocalDatePicker({ date, setDate, _moment }) {
minimumDate={new Date(moment().subtract(110, "year"))}
date={date}
>
<View style={[styles.dateInput, { flex: 1, marginRight: 12 }]}>
<View style={[styles.dateInput, { flex: 1, paddingRight: 2 }]}>
<Shadow
offset={[0, 4]}
distance={4}
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
viewStyle={{ width: "100%", height: 42 }}
viewStyle={{ width: "100%", height: 48 }}
>
<View
style={{
paddingLeft: 8,
paddingLeft: 12,
backgroundColor: colors.white,
height: 42,
height: 48,
borderColor: colors.grayBG,
borderWidth: 1,
borderRadius: 5,
borderRadius: 4,
flexDirection: "row",
alignItems: "center",
}}
@ -107,6 +107,26 @@ function GenderPicker({ value, setValue }) {
);
}
function InstitutionPicker({ value, setValue }) {
const [items, setItems] = useState([
{ value: "Escola", label: "Escola" },
{ value: "Defesa civil", label: "Defesa civil" },
{ value: "Não governamental", label: "Não governamental" },
{ value: "Outra", label: "Outra" },
{ value: "Nenhuma", label: "Nenhuma" },
]);
return (
<SearchablePicker
value={value}
setValue={setValue}
items={items}
setItems={setItems}
formPlaceholder={"Seleciona o tipo da instituição"}
searchPlaceholder={"Busca..."}
/>
);
}
function StatePicker({ value, setValue }) {
const [items, setItems] = useState(states);
return (
@ -122,11 +142,9 @@ function StatePicker({ value, setValue }) {
}
function CityPicker({ value, setValue, state }) {
console.log(state)
useEffect(() => {
state && setItems(statesToCities[state].cities)
}, [state])
state && setItems(statesToCities[state].cities);
}, [state]);
const [items, setItems] = useState([]);
return (
@ -136,7 +154,11 @@ function CityPicker({ value, setValue, state }) {
items={items}
setItems={setItems}
formPlaceholder={"Selecione a sua cidade"}
nothingToShow={state ? "Não encontramos nada com esse termo" : "Selecione o Estado primeiro"}
nothingToShow={
state
? "Não encontramos nada com esse termo"
: "Selecione o Estado primeiro"
}
searchPlaceholder={"Busca..."}
/>
);
@ -146,6 +168,8 @@ export default function RegisterScreen(props) {
const [gender, setGender] = useState("");
const [state, setState] = useState("");
const [city, setCity] = useState("");
const [institution, setInstitution] = useState("");
const [secQuestion, setSecQuestion] = useState("");
const _moment = moment();
const [date, setDate] = useState(_moment);
@ -169,6 +193,7 @@ export default function RegisterScreen(props) {
confirmPassword: "",
state: "",
gender: "",
institutionName: "",
}}
onSubmit={({ name, number, password, confirmPassword }) => {
comparePassword(password, confirmPassword);
@ -189,6 +214,7 @@ export default function RegisterScreen(props) {
color={colors.primary}
/>
<FormField
paddingRight={2}
flex={1}
maxLength={12}
name="name"
@ -201,7 +227,7 @@ export default function RegisterScreen(props) {
<View style={styles.iconField}>
<MaterialCommunityIcons
name="phone"
size={24}
size={25}
color={colors.primary}
/>
<FormField
@ -210,6 +236,7 @@ export default function RegisterScreen(props) {
name="number"
numberOfLines={2}
placeholder="Número de telefone celular"
paddingRight={2}
/>
</View>
@ -227,6 +254,7 @@ export default function RegisterScreen(props) {
secureTextEntry={true}
numberOfLines={2}
placeholder="Senha"
paddingRight={2}
/>
</View>
@ -244,6 +272,7 @@ export default function RegisterScreen(props) {
secureTextEntry={true}
numberOfLines={2}
placeholder="Repetir a senha"
paddingRight={2}
/>
</View>
<ErrorMessage
@ -251,11 +280,11 @@ export default function RegisterScreen(props) {
visible={singUpFailed}
/>
<Text style={styles.labelStyle}>Data de nascimento</Text>
<Text style={styles.labelStyle}>Data de nascimento:</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="calendar-today"
size={30}
size={25}
color={colors.primary}
/>
<LocalDatePicker
@ -295,7 +324,39 @@ export default function RegisterScreen(props) {
<CityPicker value={city} setValue={setCity} state={state} />
</View>
<Text style={styles.labelStyle}>Tipo de instituição:</Text>
<View style={[styles.iconField]}>
<MaterialCommunityIcons
name="bank"
size={25}
color={colors.primary}
/>
<InstitutionPicker
value={institution}
setValue={setInstitution}
/>
</View>
<Text style={styles.labelStyle}>Nome da instituição</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="bank"
size={25}
color={colors.primary}
/>
<FormField
flex={1}
maxLength={12}
name="institutionName"
numberOfLines={2}
placeholder="Digite o nome da instituição"
paddingRight={2}
/>
</View>
<SubmitButton
flex={1}
title="cadastrar"
backgroundColor={colors.primary}
marginTop={10}
@ -341,8 +402,6 @@ const styles = StyleSheet.create({
marginBottom: 24,
},
dateInput: {
paddingLeft: 12,
// flexDirection: "column",
// justifyContent: "center",
paddingLeft: 16,
},
});
Loading…
Cancel
Save