edit labels

Endurance-Soft · Mar 23, 2024 · bedfb5b · bedfb5b
1 parent f36a227
commit bedfb5b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git a/src/components/TouchableData.js b/src/components/TouchableData.js
@@ -1,13 +1,18 @@
-
 //TouchableData.js
-import React from 'react';
-import { Text, StyleSheet, Dimensions, View, TouchableOpacity } from 'react-native';
+import React,{useState} from 'react';
+import { Text, StyleSheet, Dimensions, View, TouchableOpacity, TextInput } from 'react-native';
 import { theme } from "../../constants";
 import StyledText from "../utils/StyledText";
 const { height } = Dimensions.get('window');
 import { Ionicons } from "@expo/vector-icons";
 
-const TouchableData = ({ label, icon, value }) => {
+const TouchableData = ({ label, icon, value, fieldName }) => {
+  const [valueEdit, setValueEdit] = useState(value);
+
+  const handleEditPress = () => {
+    // firebase.database().ref(`cobradores/${idCobrador}/${fieldName}`).set(valueEdit);
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.subcontainer}>
@@ -16,10 +21,20 @@ const TouchableData = ({ label, icon, value }) => {
         </TouchableOpacity>
         <View>
           <StyledText boldText style={styles.text}>{label}</StyledText>
-          <StyledText regularIntenceText style={styles.text}>{value}</StyledText>
+          <TextInput 
+            style={styles.text}
+            onChangeText={name => {
+              if(name.length <= 30 && name.match("^[a-zA-Z ]*$")){
+                 setValueEdit(name);
+              }}
+            }
+            defaultValue={value}
+            value={valueEdit}
+            keyboardType="default"
+          />
         </View>
       </View>
-      <TouchableOpacity>
+      <TouchableOpacity onPress={this.handleEditPress}>
         <StyledText regularText style={styles.textLink}>Editar </StyledText>
       </TouchableOpacity>
     </View>
@@ -28,15 +43,15 @@ const TouchableData = ({ label, icon, value }) => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.primary,
     paddingVertical: 10,
     paddingHorizontal: 15,
     marginVertical: 2,
     marginHorizontal: 20,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    borderWidth: 2,
+    borderWidth: 1,
     borderRadius: 20,
     borderColor: theme.colors.otherWhite,
     display: 'flex',

diff --git a/src/screens/ProfileScreen.js b/src/screens/ProfileScreen.js
@@ -1,47 +1,70 @@
 //ProfileScreen.js
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { Text, TouchableOpacity, View, StyleSheet, Dimensions, Image, SafeAreaView } from "react-native";
 import StyledText from "../utils/StyledText";
 import { theme } from "../../constants";
 import imgprofile from "../assets/imgprofile.png";
 import TouchableData from "../components/TouchableData";
 import Icon from "react-native-vector-icons/AntDesign";
 import { useNavigation } from "@react-navigation/native";
+import Cascading from "../animation/CascadingFadeInView";
+import { useFocusEffect } from "@react-navigation/native";
+// import { database } from "../../config/firebase";
+// import { collection, getDocs } from 'firebase/firestore';
 const screenWidth = Dimensions.get('window').width;
 
 const ProfileScreen = ({ route }) => {
   const { username } = route.params;
   const navigation = useNavigation();
+  const [animationKey, setAnimationKey] = useState(Date.now());
+
+  useFocusEffect(
+    useCallback(() => {
+      setAnimationKey(Date.now());
+    }, [])
+  );
   return (
     <SafeAreaView style={styles.container}>
+      <Cascading delay={150} animationKey={animationKey}>
       <View style={styles.headerAll}>
         <TouchableOpacity style={styles.back} onPress={() => navigation.goBack()}>
           <Icon name="back" size={30} color="black" />
         </TouchableOpacity>
+        <Cascading delay={200} animationKey={animationKey}>
         <View style={styles.header}>
           <StyledText boldText style={styles.text}>Perfil</StyledText>
           <Image source={imgprofile} style={styles.avatar}></Image>
           <StyledText boldText style={styles.text}>{username}</StyledText>
           <StyledText regularText style={styles.textSub}>Cobrador</StyledText>
         </View>
-
+        </Cascading>
       </View>
+      </Cascading>
       <View style={styles.containerInfo}>
+        <Cascading delay={200} animationKey={animationKey}>
         <TouchableData
           label="Nombre completo"
           icon="person-circle-outline"
           value="Ejemplo hoy dia"
+          fieldName="nombre"
         />
+        </Cascading>
+        <Cascading delay={300} animationKey={animationKey}>
         <TouchableData
           label="Empresa"
           icon="business-outline"
           value="AssureSoft"
+          fieldName="empresa"
         />
+        </Cascading>
+        <Cascading delay={400} animationKey={animationKey}>
         <TouchableData
           label="Email"
           icon="mail-open-outline"
           value="hola@gmail.com"
+          fieldName="email"
         />
+        </Cascading>
       </View>
     </SafeAreaView>
   )