Browse Source

Preparing FormField changing shadow props to secure-field

master
GabrielTrettel 3 years ago
parent
commit
90d753d60b
  1. 38
      src/app/components/TextInput.js
  2. 44
      src/app/components/forms/FormField.js
  3. 13
      src/app/config/styles.js
  4. 6
      src/app/screens/ActivateInstitutionCode.js
  5. 2
      src/app/screens/LoginScreen.js
  6. 2
      src/app/screens/PluviometerSharingDataScreen.js
  7. 6
      src/app/screens/RegisterScreen.js
  8. 2
      src/app/screens/SharingFloodZonesScreen.js

38
src/app/components/TextInput.js

@ -7,35 +7,27 @@ import { Shadow } from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) { function AppTextInput({ icon, width = "100%", ...otherProps }) {
return ( return (
<Shadow
viewStyle={{ width: width, height: otherProps.numberOfLines * 24 }}
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
>
<View style={[styles.container, { width }]}>
{icon && (
<MaterialCommunityIcons
name={icon}
size={20}
color={defaultStyles.colors.medium}
style={styles.icon}
/>
)}
<TextInput
style={defaultStyles.text}
placeholderTextColor={colors.medium}
{...otherProps}
<View style={[styles.container, { width }]}>
{icon && (
<MaterialCommunityIcons
name={icon}
size={20}
color={defaultStyles.colors.medium}
style={styles.icon}
/> />
</View>
</Shadow>
)}
<TextInput
style={defaultStyles.text}
placeholderTextColor={colors.medium}
{...otherProps}
/>
</View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...defaultStyles.shadow,
backgroundColor: colors.white, backgroundColor: colors.white,
borderRadius: 6, borderRadius: 6,
borderColor: colors.grayBG, borderColor: colors.grayBG,

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

@ -6,30 +6,23 @@ import ErrorMessage from "./ErrorMessage";
import { View, Text } from "react-native"; import { View, Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../../config/colors"; import colors from "../../config/colors";
import { Shadow } from "react-native-shadow-2";
import defaultStyles from "../../config/styles";
function IncreaseDecreaseButtons({ content }) { function IncreaseDecreaseButtons({ content }) {
return ( return (
<Shadow
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
<View
style={{
...defaultStyles.shadow,
backgroundColor: colors.primary,
width: 35,
height: 48,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
}}
> >
<View
style={{
backgroundColor: colors.primary,
width: 35,
height: 48,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
}}
>
<Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
</View>
</Shadow>
<Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
</View>
); );
} }
@ -48,11 +41,12 @@ function RenderPluviometerInput({
}, [fieldVal]); }, [fieldVal]);
const increase = () => { const increase = () => {
(Number(fieldVal) + 1) <= 999 && setFieldVal((Number(fieldVal) + 1).toString());
Number(fieldVal) + 1 <= 999 &&
setFieldVal((Number(fieldVal) + 1).toString());
}; };
const decrease = () => { const decrease = () => {
(Number(fieldVal) - 1) >= 0 && setFieldVal((Number(fieldVal) - 1).toString());
Number(fieldVal) - 1 >= 0 && setFieldVal((Number(fieldVal) - 1).toString());
}; };
return ( return (
@ -63,11 +57,11 @@ function RenderPluviometerInput({
> >
<View style={{ flex: 1, alignSelf: "stretch" }}> <View style={{ flex: 1, alignSelf: "stretch" }}>
<TextInput <TextInput
height={38}
onBlur={() => setFieldTouched(name)} onBlur={() => setFieldTouched(name)}
onChangeText={(val) => { onChangeText={(val) => {
setFieldVal(val); setFieldVal(val);
}} }}
width={width}
value={fieldVal.toString()} value={fieldVal.toString()}
{...otherProps} {...otherProps}
/> />
@ -79,7 +73,6 @@ function RenderPluviometerInput({
}} }}
style={{ style={{
paddingLeft: 4, paddingLeft: 4,
paddingBottom: 8,
paddingRight: 1.5, paddingRight: 1.5,
}} }}
> >
@ -92,7 +85,6 @@ function RenderPluviometerInput({
}} }}
style={{ style={{
paddingLeft: 1.5, paddingLeft: 1.5,
paddingBottom: 8,
paddingRight: 16, paddingRight: 16,
}} }}
> >
@ -109,6 +101,7 @@ function AppFormField({
flex = 0, flex = 0,
paddingLeft = 16, paddingLeft = 16,
paddingRight = 16, paddingRight = 16,
numberOfLines = 1,
...otherProps ...otherProps
}) { }) {
const { const {
@ -130,6 +123,7 @@ function AppFormField({
> >
{name != "pluviometer" ? ( {name != "pluviometer" ? (
<TextInput <TextInput
height={numberOfLines <= 1 ? 48 : 60}
onBlur={() => setFieldTouched(name)} onBlur={() => setFieldTouched(name)}
onChangeText={handleChange(name)} onChangeText={handleChange(name)}
width={width} width={width}

13
src/app/config/styles.js

@ -9,4 +9,17 @@ export default {
fontSize: 18, fontSize: 18,
fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir", fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
}, },
shadow: {
// IOS shadow config
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow config
elevation: 5,
},
}; };

6
src/app/screens/ActivateInstitutionCode.js

@ -40,7 +40,7 @@ function Header() {
); );
} }
function Institution({ user, institutionRole }) {
function Institution({ user }) {
const institutionMap = { const institutionMap = {
E: "Escola", E: "Escola",
D: "Defesa Civil", D: "Defesa Civil",
@ -81,7 +81,7 @@ function Institution({ user, institutionRole }) {
size={30} size={30}
color={colors.primary} color={colors.primary}
/> />
<Text style={styles.subText}>{roleMap[user.role]}</Text>
<Text style={styles.subText}>{roleMap[user?.roles[0]]}</Text>
</View> </View>
</View> </View>
); );
@ -110,7 +110,7 @@ function ValidateCode({ user }) {
flex={1} flex={1}
maxLength={36} maxLength={36}
name="code" name="code"
numberOfLines={2}
// numberOfLines={1}
placeholder="Digite o código de ativação" placeholder="Digite o código de ativação"
/> />
</View> </View>

2
src/app/screens/LoginScreen.js

@ -119,7 +119,6 @@ export default function LoginScreen(props) {
maxLength={12} maxLength={12}
name="name" name="name"
keyboardType="numeric" keyboardType="numeric"
numberOfLines={2}
placeholder="Número de telefone celular" placeholder="Número de telefone celular"
/> />
</View> </View>
@ -129,7 +128,6 @@ export default function LoginScreen(props) {
maxLength={12} maxLength={12}
name="password" name="password"
secureTextEntry={true} secureTextEntry={true}
numberOfLines={2}
placeholder="Senha" placeholder="Senha"
/> />
</View> </View>

2
src/app/screens/PluviometerSharingDataScreen.js

@ -68,7 +68,7 @@ function PluviometerSharingDataScreen(props) {
<FormField <FormField
keyboardType="number-pad" keyboardType="number-pad"
maxLength={200} maxLength={200}
numberOfLines={2}
numberOfLines={1}
name="pluviometer" name="pluviometer"
placeholder="Quantidade de chuva" placeholder="Quantidade de chuva"
increaseDecreaseButtons={true} increaseDecreaseButtons={true}

6
src/app/screens/RegisterScreen.js

@ -386,7 +386,6 @@ export default function RegisterScreen(props) {
flex={1} flex={1}
maxLength={40} maxLength={40}
name="name" name="name"
numberOfLines={2}
placeholder="Digite o apelido de usuário" placeholder="Digite o apelido de usuário"
/> />
</View> </View>
@ -397,7 +396,6 @@ export default function RegisterScreen(props) {
flex={1} flex={1}
maxLength={12} maxLength={12}
name="number" name="number"
numberOfLines={2}
placeholder="Digite o número de telefone celular" placeholder="Digite o número de telefone celular"
paddingRight={2} paddingRight={2}
/> />
@ -410,7 +408,6 @@ export default function RegisterScreen(props) {
maxLength={12} maxLength={12}
name="password" name="password"
secureTextEntry={true} secureTextEntry={true}
numberOfLines={2}
placeholder="Digite a senha" placeholder="Digite a senha"
paddingRight={2} paddingRight={2}
/> />
@ -423,7 +420,6 @@ export default function RegisterScreen(props) {
maxLength={12} maxLength={12}
name="confirmPassword" name="confirmPassword"
secureTextEntry={true} secureTextEntry={true}
numberOfLines={2}
placeholder="Repita a senha" placeholder="Repita a senha"
paddingRight={2} paddingRight={2}
/> />
@ -468,7 +464,6 @@ export default function RegisterScreen(props) {
flex={1} flex={1}
maxLength={12} maxLength={12}
name="institutionName" name="institutionName"
numberOfLines={2}
placeholder="Digite o nome da instituição" placeholder="Digite o nome da instituição"
paddingRight={2} paddingRight={2}
/> />
@ -494,7 +489,6 @@ export default function RegisterScreen(props) {
flex={1} flex={1}
maxLength={255} maxLength={255}
name="secQuestionAns" name="secQuestionAns"
numberOfLines={2}
placeholder="Degite a resposta à pergunta" placeholder="Degite a resposta à pergunta"
paddingRight={2} paddingRight={2}
paddingLeft={2} paddingLeft={2}

2
src/app/screens/SharingFloodZonesScreen.js

@ -123,7 +123,7 @@ function SharingFloodZonesScreen(props) {
maxLength={255} maxLength={255}
multiline multiline
name="description" name="description"
numberOfLines={3}
numberOfLines={2}
placeholder="Escreva um comentário (Opcional)..." placeholder="Escreva um comentário (Opcional)..."
/> />

Loading…
Cancel
Save