WPD-MobileApp/src/app/components/DataMenu.js

import React, { Component, useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
import { FontAwesome5 } from '@expo/vector-icons';

import colors from "../config/colors";
import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons';
import { dimensions } from "../config/dimensions";

import { Dimensions } from "react-native";


export default class DataMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            layers: [
                {
                    id: 1,
                    name: 'Chuva',
                },
                {
                    id: 2,
                    name: 'Ponto de alagamento',
                },
                {
                    id: 3,
                    name: 'Pluviômetro artesanal',
                },
                {
                    id: 4,
                    name: 'Pluviômetro oficial',
                },
                {
                    id: 5,
                    name: 'Água no rio',
                },
                {
                    id: 6,
                    name: 'Área de inundação',                    
                },
            ],
            selectedValue: {},
        }
    }
    toggleItem = (itemId) => {
        const { selectedValue } = this.state;
        const isSelected = selectedValue[itemId];
        selectedValue[itemId] = !isSelected;


        this.setState({
            selectedValue: { ...selectedValue },
        })
    }

    render() {
        const screenHeight = Dimensions.get("window").height;
        const screenWidth = Dimensions.get("window").width;
        const { layers, selectedValue } = this.state;
        return (

            <View style={styles.container} >

                <View style={{
                    flex: 1,
                    height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
                    paddingTop:  (screenHeight > 600 ? 0 : screenHeight * 0.09)
                }}>
                    <FlatList
                        data={layers}
                        keyExtractor={(datas) => datas.id.toString()}
                        renderItem={({ item }) => {
                            const isSelected = selectedValue[item.id];
                            return (
                                <View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}>
                                    <View style={{ flexDirection: "row", flex: 0.80 }}>
                                        <Fontisto name="rain" color={colors.lightBlue} size={20} />
                                        <Text style={styles.item}> {item.name} </Text>
                                    </View>
                                    <View
                                        style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}>
                                        <CheckBox
                                            value={isSelected}
                                            onChange={() => this.toggleItem(item.id)}
                                            tintColors={{ true: colors.lightBlue, false: 'black' }}
                                        />
                                    </View>
                                </View>
                            );
                        }}
                        extraData={[selectedValue]}
                    />
                    <View style={styles.submit_btn}>
                        <TouchableOpacity onPress={() => console.log("Aplicar camadas")}>
                            <View style={styles.button}>
                                <Text style={styles.text}>Confirmar</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    };


};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        alignSelf: "flex-end",        
    backgroundColor: colors.white,
    },
    submit_btn: {
        bottom: 0,
        width: "100%",
        padding: 20,
    },
    button: {
        backgroundColor: "#1976D2",
        borderRadius: 20,
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: 42,
        textAlign: "center",
    },
    text: {
        color: colors.white,
        fontSize: 16,
        textTransform: "uppercase",
        fontWeight: "bold",
    },
    item: {
        color: colors.lightBlue,
        fontSize: dimensions.text.tertiary,
        fontWeight: "bold",
    }

});