Data menu modal principal logic implemented

src/app/assets/dataMenu/chuva.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="f817185d-370e-4e96-a1e6-422cebaa6c80" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="f31556a3-2e8c-4c6d-b9ee-ad9bb4bcd49d" data-name="Camada 1"><path d="M133.24,76a21.77,21.77,0,0,1-21.76,21.77H40.53A21.77,21.77,0,0,1,28.35,57.94a3.58,3.58,0,0,0,1.22-4.51,20.16,20.16,0,0,1-2-8.83,20.53,20.53,0,0,1,20.5-20.51,20.23,20.23,0,0,1,9.07,2.11A3.58,3.58,0,0,0,61,25.75,34.11,34.11,0,0,1,116.76,52.1v.13a3.58,3.58,0,0,0,2.33,3.35A21.87,21.87,0,0,1,133.24,76Z" fill="#3b7097" opacity="0.2"/><path d="M34.76,75.64a25.34,25.34,0,0,1,7.43-17.93,25.62,25.62,0,0,1,3.74-3.08A24.1,24.1,0,0,1,57.3,22.49c.47-.23.94-.44,1.43-.63A24.1,24.1,0,0,0,28,54.63,25.35,25.35,0,0,0,42.22,101H56.11l.06-.31A25.37,25.37,0,0,1,34.76,75.64Z" fill="#fff"/><path d="M140.4,76v0a28.91,28.91,0,0,1-28.92,28.9H40.53A28.92,28.92,0,0,1,20.08,55.53c.6-.6,1.24-1.18,1.9-1.74A27.67,27.67,0,0,1,48.07,16.94a27.26,27.26,0,0,1,10.14,1.92,41.26,41.26,0,0,1,65.64,31A29.07,29.07,0,0,1,140.4,76ZM126.87,91.37A21.61,21.61,0,0,0,133.24,76a21.87,21.87,0,0,0-14.15-20.4,3.58,3.58,0,0,1-2.33-3.35V52.1A34.11,34.11,0,0,0,61,25.75a3.58,3.58,0,0,1-3.86.45,20.23,20.23,0,0,0-9.07-2.11A20.53,20.53,0,0,0,27.57,44.6a20.16,20.16,0,0,0,2,8.83,3.58,3.58,0,0,1-1.22,4.51A21.77,21.77,0,0,0,40.53,97.75h71A21.62,21.62,0,0,0,126.87,91.37Z" fill="#3b7097"/><path d="M120.07,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63,0,0a3.58,3.58,0,0,1-5-5.08l3.62-3.63,0,0A3.58,3.58,0,0,1,120.07,113.05Z" fill="#3b7097"/><path d="M105.2,131a3.57,3.57,0,0,1-1,3.48l-3.62,3.62,0,0a3.58,3.58,0,1,1-5-5.08l3.62-3.62a3.58,3.58,0,0,1,6,1.58Z" fill="#3b7097"/><path d="M97.58,113.05a3.58,3.58,0,0,1,0,5.06L94,121.74a3.58,3.58,0,0,1-5.06-5.06l3.63-3.63A3.58,3.58,0,0,1,97.58,113.05Z" fill="#3b7097"/><path d="M81.77,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62a3.57,3.57,0,1,1-5-5.06l3.62-3.62A3.57,3.57,0,0,1,81.77,129.38Z" fill="#3b7097"/><path d="M75.12,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,75.12,113.05Z" fill="#3b7097"/><path d="M59.3,129.38a3.57,3.57,0,0,1,0,5.06l-3.62,3.62A3.58,3.58,0,0,1,50.62,133l3.62-3.62A3.57,3.57,0,0,1,59.3,129.38Z" fill="#3b7097"/><path d="M52.65,113.05a3.57,3.57,0,0,1,0,5.06L49,121.74l-.05,0a3.57,3.57,0,1,1-5-5.1l3.63-3.63A3.58,3.58,0,0,1,52.65,113.05Z" fill="#3b7097"/><path d="M36.84,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62A3.57,3.57,0,1,1,28.16,133l3.62-3.62A3.57,3.57,0,0,1,36.84,129.38Z" fill="#3b7097"/><path d="M30.19,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,30.19,113.05Z" fill="#3b7097"/></g></svg>

src/app/assets/dataMenu/pluviometroArtesanal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="a038fce1-27a2-498a-bfa8-8124710f6976" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="ac559167-f77d-4c9d-a667-cdf90aebb90c" data-name="Camada 1"><rect x="61.2" y="36.69" width="27.54" height="102.74" fill="#ececec"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#3b7097"/><rect x="63.13" y="35.56" width="11.95" height="103.42" fill="#d9d9d9"/><path d="M62.53,110.68l1.09-2.05c4.32-2.66,5.51-4,9.36-1.16.34.26.68.51,1,.74l2.84,2.06c2.68,2.15,5-.31,5.72-.89l2.87-2.17a2,2,0,0,1,3.19,1.53v27.71a2,2,0,0,1-1.88,2l-22.1,1a2,2,0,0,1-2-1.88l-1-25.06A1.94,1.94,0,0,1,62.53,110.68Z" fill="#9fdfff"/><path d="M75.07,109l-1-.75c-.37-.23-.71-.48-1-.74-3.85-2.86-5-1.5-9.36,1.16l-1.09,2.05a1.94,1.94,0,0,0-.93,1.75l1,25.06a2,2,0,0,0,2,1.88l10.4-.45Z" fill="#7dd6f9"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#727272"/><path d="M42.45,10.57h65.09a0,0,0,0,1,0,0v3.17A21.71,21.71,0,0,1,85.84,35.45H64.16A21.71,21.71,0,0,1,42.45,13.73V10.57A0,0,0,0,1,42.45,10.57Z" fill="#ececec"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#3b7097"/><path d="M45,10.5H74.9a0,0,0,0,1,0,0V35.56a0,0,0,0,1,0,0h-8A21.87,21.87,0,0,1,45,13.69V10.5A0,0,0,0,1,45,10.5Z" fill="#d9d9d9"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#727272"/><rect x="58.91" y="58.81" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="72.94" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="87.07" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="101.19" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="115.32" width="19.68" height="2.05" fill="#727272"/></g></svg>

src/app/assets/dataMenu/pluviometroOficial.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="f377c9e6-a8c3-4a87-aff8-7b8fd8304542" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="a195a4b6-c3c8-4b0e-abdd-1b56fb675640" data-name="Camada 1"><rect x="61.2" y="36.69" width="27.54" height="102.74" fill="#ececec"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#3b7097"/><rect x="63.13" y="35.56" width="11.95" height="103.42" fill="#d9d9d9"/><path d="M62.53,110.68l1.09-2.05c4.32-2.66,5.51-4,9.36-1.16.34.26.68.51,1,.74l2.84,2.06c2.68,2.15,5-.31,5.72-.89l2.87-2.17a2,2,0,0,1,3.19,1.53v27.71a2,2,0,0,1-1.88,2l-22.1,1a2,2,0,0,1-2-1.88l-1-25.06A1.94,1.94,0,0,1,62.53,110.68Z" fill="#9fdfff"/><path d="M75.07,109l-1-.75c-.37-.23-.71-.48-1-.74-3.85-2.86-5-1.5-9.36,1.16l-1.09,2.05a1.94,1.94,0,0,0-.93,1.75l1,25.06a2,2,0,0,0,2,1.88l10.4-.45Z" fill="#7dd6f9"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#727272"/><path d="M42.45,10.57h65.09a0,0,0,0,1,0,0v3.17A21.71,21.71,0,0,1,85.84,35.45H64.16A21.71,21.71,0,0,1,42.45,13.73V10.57a0,0,0,0,1,0,0Z" fill="#ececec"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#3b7097"/><path d="M45,10.5H74.9a0,0,0,0,1,0,0V35.56a0,0,0,0,1,0,0h-8A21.87,21.87,0,0,1,45,13.69V10.5A0,0,0,0,1,45,10.5Z" fill="#d9d9d9"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#727272"/><rect x="58.91" y="58.81" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="72.94" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="87.07" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="101.19" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="115.32" width="19.68" height="2.05" fill="#727272"/><circle cx="99.74" cy="32.38" r="13.26" fill="#4086f4"/><polygon points="98.47 37.7 92.67 31.9 94.05 30.52 98.39 34.86 105.36 27.06 106.81 28.35 98.47 37.7" fill="#fff"/></g></svg>

src/app/components/MapDataMenu.js

@@ -1,12 +1,20 @@
 import React, { useState } from "react";
-
-import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
+import { dimensions, screen_width } from "../config/dimensions";
+import {
+  View,
+  StyleSheet,
+  Text,
+  Button,
+  TouchableOpacity,
+  ScrollView,
+} from "react-native";
 import SelfClosingModal from "./SelfClosingModal";
 import colors from "../config/colors";
-import { FontAwesome5 } from '@expo/vector-icons';
+import { FontAwesome5 } from "@expo/vector-icons";
 import { MaterialIcons } from "@expo/vector-icons";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Shadow } from "react-native-shadow-2";
+import assets from "../config/assets";
 
 function DataMenuHeader({ setShowModal }) {
   return (
@@ -32,9 +40,9 @@ function DataMenuHeader({ setShowModal }) {
   );
 }
 
-function DataOriginSelector() {
-  const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
-  const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
+function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
+  const bgToUse = (selected) =>
+    dataOriginToShow == selected ? colors.secondary : colors.gray;
 
   return (
     <Shadow
@@ -67,7 +75,6 @@ function DataOriginSelector() {
           <Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text>
         </TouchableOpacity>
 
-
         <TouchableOpacity
           style={[styles.choicesBtn, { backgroundColor: bgToUse("citzen") }]}
           onPress={() => setDataOriginToShow("citzen")}
@@ -85,7 +92,164 @@ function DataOriginSelector() {
   );
 }
 
+// FIXME: Change icon values in the future 
+const dataOptions = {
+  oficial: [
+    {
+      name: "Área de suscetibilidade",
+      code: "susceptibilityAreas",
+      source: "CPRM",
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+    {
+      name: "Pluviômetro automático",
+      code: "automaticPluviometer",
+      source: "Cemaden",
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+  ],
+  citzen: [
+    {
+      name: "Risco de inundação",
+      code: "floodRisk",
+      source: null,
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+    {
+      name: "Pluviômetro artesanal",
+      code: "pluviometer",
+      source: null,
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+    {
+      name: "Intensidade de chuva",
+      code: "rain",
+      source: null,
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+    {
+      name: "Área de alagamento",
+      code: "floodZones",
+      source: null,
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+    {
+      name: "Água do rio",
+      code: "riverFlood",
+      source: null,
+      icon: assets.floodZones.FloodZonesIcon,
+    },
+  ],
+};
+
+function Border() {
+  return (
+    <View
+      style={{
+        width: 0.95 * screen_width,
+        alignSelf: "center",
+        height: 2,
+        borderRadius: 2,
+        paddingHorizontal: 16,
+        backgroundColor: colors.lightestGray,
+      }}
+    />
+  );
+}
+
+function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
+  const item = dataOptionsToShow[dataOriginToShow][option.code];
+  const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]:  {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
+
+
+  return (
+    <View>
+      <View
+        style={{
+          flex: 1,
+          height: 76,
+          flexDirection: "row",
+          paddingTop: 16,
+          alignItems: "center",
+          paddingHorizontal: 16,
+          paddingBottom: 16,
+        }}
+      >
+        <option.icon width={34} height={24} />
+
+        <View
+          style={{
+            flex: 1,
+            marginLeft: 16,
+            alignItems: "flex-start",
+          }}
+        >
+          <Text style={styles.itensText}>{option.name}</Text>
+          {option.source && (
+            <Text
+              style={[
+                styles.itensText,
+                { color: colors.subText, fontSize: 14 },
+              ]}
+            >
+              Fonte: {option.source}
+            </Text>
+          )}
+        </View>
+
+
+        <TouchableOpacity
+          onPress={() => {setDataOptionsToShow(dataOptionObject)}}
+        >
+          <View
+            style={{
+              alignContent: "flex-end",
+              width: 100,
+              height: 36,
+              justifyContent: "center",
+              borderRadius: 6,
+              backgroundColor:  item  ? colors.activated : colors.notActivated,
+            }}
+          >
+            <Text style={styles.text}>
+              {item ? "ADICIONAR" : "REMOVER"}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      <Border />
+    </View>
+  );
+}
+
+function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
+  return (
+    <View paddingTop={8} height={"100%"}>
+      <ScrollView        >
+        {dataOptions[dataOriginToShow].map((option) =>
+          ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
 function DataMenuBody({ setShowModal }) {
+  const [dataOriginToShow, setDataOriginToShow] = useState("oficial");
+  const [dataOptionsToShow, setDataOptionsToShow] = useState({
+    oficial: {
+      automaticPluviometer: false,
+      susceptibilityAreas: false,
+    },
+    citzen: {
+      floodRisk: false,
+      pluviometer: true,
+      rain: false,
+      floodZones: true,
+      riverFlood: true,
+    },
+  });
+  console.log(dataOptionsToShow)
   return (
     <View
       style={{
@@ -94,7 +258,15 @@ function DataMenuBody({ setShowModal }) {
       }}
     >
       <DataMenuHeader setShowModal={setShowModal} />
-      <DataOriginSelector />
+      <DataOriginSelector
+        dataOriginToShow={dataOriginToShow}
+        setDataOriginToShow={setDataOriginToShow}
+      />
+      <DataOriginOptions
+        dataOptionsToShow={dataOptionsToShow}
+        dataOriginToShow={dataOriginToShow}
+        setDataOptionsToShow={setDataOptionsToShow}
+      />
     </View>
   );
 }
@@ -128,7 +300,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     alignItems: "center",
     justifyContent: "flex-start",
-    flexDirection: "row"
+    flexDirection: "row",
+  },
+  itensText: {
+    color: colors.black,
+    fontWeight: "500",
+    fontSize: 16,
   },
   text: {
     color: colors.white,

src/app/config/colors.js

@@ -7,8 +7,11 @@ export default {
   light: "#f8f4f4",
   dark: "#0c0c0c",
   danger: "#ff5252",
+  notActivated: "rgba(201, 69, 54, 0.87)",
+  activated: "rgba(26, 138, 17, 0.63)",
   lightGray: "#C4C4C4",
   gray: "#999999",
+  subText: "#8B8C8C",
   lightestGray: "#F0F0F0",
   lightBlue: "#1976D2",
   gold: "#ffd700",