Merge branch 'main' of github.com:IGSD-UoW/WPD-MobileApp into main

src/app/components/forms/FormDatePicker.js

@@ -1,49 +1,43 @@
-import React, { useState } from "react";
-import {
-  Modal,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-  Platform,
-  TouchableOpacity,
-} from "react-native";
+import React, { useState } from 'react'; 7
+import { Modal, StyleSheet, Text, TouchableHighlight, View, Platform, TouchableOpacity } from 'react-native';
 import DateTimePicker from "@react-native-community/datetimepicker";
 
 import moment from "moment";
-import colors from "../../config/colors";
+import colors from '../../config/colors';
 
 const FormDatePicker = (props) => {
+
     const { textStyle, defaultDate } = props;
     const [date, setDate] = useState(moment(defaultDate));
     const [show, setShow] = useState(false);
+    const [auxDate, setAuxDate] = useState(moment());
 
     const onChange = (e, selectedDate) => {
-    setDate(moment(selectedDate));
-  };
+        setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
+    }
 
     const androidOnChange = (e, selectedDate) => {
         setShow(false);
         if (selectedDate) {
             setDate(moment(selectedDate));
             props.onDateChange(selectedDate);
-      //   console.log(moment(selectedDate).format("DD-MM-YYYY"));
-      //  console.log(date.format("DD-MM-YYYY"));
         }
-  };
+    }
 
     const onCancelPress = () => {
-    setDate(moment(defaultDate));
+        //setDate(moment(defaultDate));
         setShow(false);
         //console.log(moment(defaultDate).format("DD-MM-YYYY"))
-  };
+    }
 
     const onDonePress = () => {
-    props.onDateChange(date);
+        setDate(moment(auxDate));    //atualizar a data com a variável auxiliar
+        props.onDateChange(auxDate);
         setShow(false);
         //console.log("done");
         //console.log(date.format("DD-MM-YYYY"));
-  };
+
+    }
 
     const renderDatePicker = () => {
         return (
@@ -51,25 +45,27 @@ const FormDatePicker = (props) => {
                 timeZoneOffsetInMinutes={0}
                 value={new Date(date)}
                 mode="date"
-        minimumDate={new Date(moment().subtract(1, "month"))}
+                minimumDate={new Date(moment().subtract(1, 'month'))}
                 maximumDate={new Date(moment())}
-        display={Platform.OS === "ios" ? "spinner" : "default"}
-        onChange={Platform.OS === "ios" ? onChange : androidOnChange}
+                formatChosenDate={selectedDate => {return moment(selectedDate).format('DD/MM/YYYY');}} //formatar a data do selected date
+                display={Platform.OS === 'ios' ? 'spinner' : 'default'} 
+                onChange={Platform.OS === 'ios' ? onChange : androidOnChange}
             />
-    );
-  };
+        )
+    }
 
     return (
-    <TouchableOpacity onPress={() => setShow(true)}>
-      <Text> {date.format("DD-MM-YYYY")}</Text>
-      {Platform.OS !== "ios" && show && renderDatePicker()}
+        <TouchableOpacity
+            onPress={() => setShow(true)}>
+            <Text> {date.format("DD/MM/YYYY")}</Text>
+            {Platform.OS !== 'ios' && show && renderDatePicker()}
 
-      {Platform.OS === "ios" && show && (
+            {Platform.OS === 'ios' && show && (
                 <Modal
                     transparent={true}
                     animationType="slide"
                     visible={show}
-          supportedOrientations={["portrait"]}
+                    supportedOrientations={['portrait']}
                     onRequestClose={() => setShow(false)}
                 >
                     <View style={{ flex: 1 }}>
@@ -81,40 +77,45 @@ const FormDatePicker = (props) => {
                             }}
                             activeOpacity={1}
                             visible={show}
-              onPress={() => setShow(false)}
-            >
+                            onPress={() => setShow(false)}>
                             <TouchableHighlight
-                underlayColor={"#ffffff"}
+                                underlayColor={'#ffffff'}
                                 style={{
                                     flex: 1,
-                  borderTopColor: "#d3d3d3",
+                                    borderTopColor: '#d3d3d3',
                                     borderTopWidth: 1,
                                 }}
                                 onPress={() => console.log("datepicker clicked")}
                             >
-                <View
-                  style={{
-                    backgroundColor: "#ffffff",
+                                <View style={{
+                                    backgroundColor: '#ffffff',
                                     height: 256,
-                    overflow: "hidden",
-                  }}
-                >
-                  <View style={{ marginTop: 20 }}>{renderDatePicker()}</View>
+                                    overflow: 'hidden',
+                                }}>
+                                    <View style={{ marginTop: 20 }}>
+                                        { renderDatePicker() }
+                                    </View>
                                     <TouchableHighlight
                                         underlayColor={"transparent"}
                                         onPress={() => onCancelPress()}
                                         style={[styles.btnText, styles.btnCancel]}
                                     >
-                    <Text style={{ color: colors.primary }}>Cancel</Text>
+                                        <Text style={{ color: colors.primary }}>
+                                            Cancelar
+                                        </Text>
                                     </TouchableHighlight>
                                     <TouchableHighlight
                                         underlayColor={"transparent"}
                                         onPress={() => onDonePress()}
                                         style={[styles.btnText, styles.btnDone]}
                                     >
-                    <Text style={{ color: colors.primary }}>Done</Text>
+                                        <Text style={{ color: colors.primary }}>
+                                            Confirmar
+                                        </Text>
                                     </TouchableHighlight>
+
                                 </View>
+
                             </TouchableHighlight>
                         </TouchableHighlight>
                     </View>
@@ -128,7 +129,7 @@ FormDatePicker.defaultProps = {
     textStyle: {},
     defaultDate: moment(),
     onDateChange: () => { },
-};
+}
 
 const styles = StyleSheet.create({
     btnCancel: {

src/app/screens/PluviometerSharingDataScreen.js

@@ -145,22 +145,6 @@ const styles = StyleSheet.create({
     color: "#1976D2",
     marginBottom: 5,
   },
-  btnText: {
-    position: "absolute",
-    top: 0,
-    height: 42,
-    paddingHorizontal: 20,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    color: colors.primary,
-  },
-  btnCancel: {
-    left: 0,
-  },
-  btnDone: {
-    right: 0,
-  },
 });
 
 export default PluviometerSharingDataScreen;