Implementación de pantalla - Modificar material.

listaMatRes.js

@@ -3,6 +3,7 @@ import { DefaultTheme, NavigationContainer} from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {Text, View, SafeAreaView, Image, StyleSheet, Dimensions, ScrollView, TouchableOpacity} from 'react-native';
 import BotonAdd from './BotonAdd.js';
+import ListaMateriales from './materialesLista.js';
 
 const styles = StyleSheet.create({
   margenTextoListas: {
@@ -147,6 +148,14 @@ const BarraTitulo = () => {
           title: 'Reservas de material',
           headerShadowVisible: false
           }}/>
+        <Stack.Screen
+          name="Materiales"
+          component={ListaMateriales}
+          options = {({route}) => ({
+            title: route.params.nombreListaMat,
+            headerStyle: { backgroundColor: '#7D9BFF' },
+            headerTintColor: 'white'
+          })}/>
       </Stack.Navigator>
     </NavigationContainer>
   );

materialesLista.js

+import React, { useEffect, Component} from 'react';
+import {FlatList, Text, TextInput, View, StyleSheet, TouchableOpacity, Image} from 'react-native';
+
+const estilosMaterialesLista = StyleSheet.create({
+    margenes: {
+        flex: 1,
+        marginLeft: 30, 
+        marginRight: 30
+    },  
+    contenedorMaterial: {
+        marginTop: 10,
+        marginBottom: 10
+    },
+    textoMaterial: {
+        fontSize: 14,
+        color: '#1f2d3d',
+        alignSelf: 'center'
+    },
+    elementosFila: {
+        flexDirection: 'row',
+        justifyContent: "space-between",
+    },
+    iconos: {
+        width: 15,
+        height: 15
+    },
+    botonMod: {
+        backgroundColor: '#7D9BFF',
+        height: 40,
+        bottom: 25,
+        justifyContent: 'center'
+    },
+    textoBoton: {
+        alignSelf: 'center',
+        color: 'white',
+        fontWeight: 'bold'
+    }
+  });
+
+/*const ListaMateriales = ({navigation, route}) => {
+    useEffect (() => {
+        navigation.setOptions({title: route.params.nombreListaMat});
+    })
+    const [actualizar, setActualizar] = useState(false)
+    const [texto, setTexto] = useState('')
+
+    const AumentarCantidad = (item) => {
+        setActualizar(!actualizar)
+        item.cantidadMaterial = item.cantidadMaterial + 1
+    }
+
+    const DisminuirCantidad = (item) => {
+        if(item.cantidadMaterial > 0) {
+            setActualizar(!actualizar)
+            item.cantidadMaterial = item.cantidadMaterial - 1
+        }
+    }
+
+    const Material = ({item}) => {
+        return (
+            <View>
+                <View style={[estilosMaterialesLista.elementosFila, estilosMaterialesLista.contenedorMaterial]}>
+                    <Text style={estilosMaterialesLista.textoMaterial}>{item.material}</Text>
+                    <View style={[estilosMaterialesLista.elementosFila, {width: 75}]}>
+                        <TouchableOpacity style={{marginRight: 3, alignSelf: 'center'}} onPress={() => DisminuirCantidad(item)}>
+                            <Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoElim.png")}/>
+                        </TouchableOpacity>
+                        <TextInput style={estilosMaterialesLista.textoMaterial} textAlign={'center'} maxLength={3} keyboardType={'numeric'}
+                            defaultValue={item.cantidadMaterial.toString()} onSubmitEditing={{
+                                newtext => setTexto(newtext);
+                                item.cantidadMaterial = newtext;
+                            }}/>
+                        <TouchableOpacity style={{marginLeft: 3, alignSelf: 'center'}} onPress={()=> AumentarCantidad(item)}>
+                            <Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoAñadir.png")}/>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    return (
+        <View style={estilosMaterialesLista.margenes}>
+            <FlatList
+            extraData={actualizar}
+            data = {route.params.listaMat}
+            renderItem={Material}
+            />
+            <TouchableOpacity style={estilosMaterialesLista.botonMod}>
+                    <Text style={estilosMaterialesLista.textoBoton}>MODIFICAR</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}*/
+
+class ListaMateriales extends Component {
+
+    state = {
+        listaMat: [],
+        cantidadTotal: 0
+    }
+
+    constructor(props) {
+        super(props);
+        this.state.listaMat = this.props.route.params.listaMat;
+        this.state.listaMat.map((item, index) =>
+            this.state.cantidadTotal = this.state.cantidadTotal + item.cantidadMaterial
+        )
+    }
+
+    AumentarCantidad = (index) => {
+        let {listaMat} = this.state;
+        listaMat[index].cantidadMaterial = listaMat[index].cantidadMaterial + 1;
+        this.state.cantidadTotal = this.state.cantidadTotal + 1;
+        this.setState({listaMat});
+    }
+
+    DisminuirCantidad = (index) => {
+        let {listaMat} = this.state;
+        if(listaMat[index].cantidadMaterial > 0) {
+            listaMat[index].cantidadMaterial = listaMat[index].cantidadMaterial - 1
+            this.state.cantidadTotal = this.state.cantidadTotal - 1;
+            this.setState({listaMat});
+        }
+    }
+
+    CambiarCantidad = (index, text) => {
+        const numeroTexto = Number(text)
+        if(!isNaN(numeroTexto)) {
+             let {listaMat} = this.state;
+            this.state.cantidadTotal = this.state.cantidadTotal + (numeroTexto - listaMat[index].cantidadMaterial);
+            listaMat[index].cantidadMaterial = Number(text);
+            this.setState({listaMat});
+        }
+    }
+
+    render() {
+        return (
+            <View style={estilosMaterialesLista.margenes}>
+                <FlatList
+                data = {this.state.listaMat}
+                keyExtractor={(item) => item.material}
+                renderItem={({item, index}) => {
+                    return (
+                    <View>
+                        <View style={[estilosMaterialesLista.elementosFila, estilosMaterialesLista.contenedorMaterial]}>
+                            <Text style={estilosMaterialesLista.textoMaterial}>{item.material}</Text>
+                            <View style={[estilosMaterialesLista.elementosFila, {width: 75}]}>
+                                <TouchableOpacity style={{marginRight: 3, alignSelf: 'center'}} onPress={() => {this.DisminuirCantidad(index)}}>
+                                    <Image style={estilosMaterialesLista.iconos} source={require("./assets/img/icons/iconoElim.png")}/>
+                                </TouchableOpacity>
+                                <TextInput style={estilosMaterialesLista.textoMaterial} textAlign={'center'} maxLength={3} keyboardType={'number-pad'}
+                                    value={item.cantidadMaterial.toString()} placeholder={item.cantidadMaterial.toString()} 
+                                    onChangeText={(text) => this.CambiarCantidad(index, text)}/>
+                                <TouchableOpacity style={{marginLeft: 3, alignSelf: 'center'}} onPress={() => {this.AumentarCantidad(index)}}>
+                                    <Image style={estilosMaterialesLista.iconos} source={require("./assets/img/icons/iconoAdd.png")}/>
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </View>
+                    );
+                }}
+                />
+                <TouchableOpacity style={estilosMaterialesLista.botonMod} onPress={() => this.props.navigation.goBack(null)}>
+                        <Text style={estilosMaterialesLista.textoBoton}>MODIFICAR ({this.state.cantidadTotal} materiales)</Text>
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+  export default ListaMateriales;
\ No newline at end of file