Browse Source

Preparing FormField changing shadow props to secure-field

master
GabrielTrettel 3 years ago
parent
commit
90d753d60b
  1. 10
      src/app/components/TextInput.js
  2. 22
      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

10
src/app/components/TextInput.js

@ -7,14 +7,6 @@ import { Shadow } from "react-native-shadow-2";
function AppTextInput({ icon, width = "100%", ...otherProps }) {
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
@ -30,12 +22,12 @@ function AppTextInput({ icon, width = "100%", ...otherProps }) {
{...otherProps}
/>
</View>
</Shadow>
);
}
const styles = StyleSheet.create({
container: {
...defaultStyles.shadow,
backgroundColor: colors.white,
borderRadius: 6,
borderColor: colors.grayBG,

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

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

13
src/app/config/styles.js

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

2
src/app/screens/LoginScreen.js

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

2
src/app/screens/PluviometerSharingDataScreen.js

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

6
src/app/screens/RegisterScreen.js

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

2
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save