gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Lightening shadows and adjusting component size in the user registration screen

master
GabrielTrettel 3 years ago
parent
59a3590fa8
commit
d4b5655bf4
4 changed files with 100 additions and 38 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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,
},
});
Write Preview
Loading…
Cancel
Save