From 143dcc2862f9f0880842439e18398b63cec87634 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Wed, 20 Jan 2021 15:33:48 -0300
Subject: [PATCH] Fixing minor bug in datePicker

---
 src/app/components/forms/FormDatePicker.js | 276 +++++++++++----------
 1 file changed, 139 insertions(+), 137 deletions(-)

diff --git a/src/app/components/forms/FormDatePicker.js b/src/app/components/forms/FormDatePicker.js
index b43fce9..89f79b0 100644
--- a/src/app/components/forms/FormDatePicker.js
+++ b/src/app/components/forms/FormDatePicker.js
@@ -1,152 +1,154 @@
-import React, { useState } from 'react'; 7
-import { Modal, StyleSheet, Text, TouchableHighlight, View, Platform, TouchableOpacity } from 'react-native';
+import React, { useState } from "react";
+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) => {
-        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);
-        }
-    }
-
-    const onCancelPress = () => {
-        //setDate(moment(defaultDate));
-        setShow(false);
-        //console.log(moment(defaultDate).format("DD-MM-YYYY"))
-    }
-
-    const onDonePress = () => {
-        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 { textStyle, defaultDate } = props;
+  const [date, setDate] = useState(moment(defaultDate));
+  const [show, setShow] = useState(false);
+  const [auxDate, setAuxDate] = useState(moment());
+
+  const onChange = (e, 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);
     }
-
-    const renderDatePicker = () => {
-        return (
-            <DateTimePicker
-                timeZoneOffsetInMinutes={0}
-                value={new Date(date)}
-                mode="date"
-                minimumDate={new Date(moment().subtract(1, 'month'))}
-                maximumDate={new Date(moment())}
-                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}
-            />
-        )
-    }
-
+  };
+
+  const onCancelPress = () => {
+    //setDate(moment(defaultDate));
+    setShow(false);
+    //console.log(moment(defaultDate).format("DD-MM-YYYY"))
+  };
+
+  const onDonePress = () => {
+    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 (
-        <TouchableOpacity
-            onPress={() => setShow(true)}>
-            <Text> {date.format("DD/MM/YYYY")}</Text>
-            {Platform.OS !== 'ios' && show && renderDatePicker()}
-
-            {Platform.OS === 'ios' && show && (
-                <Modal
-                    transparent={true}
-                    animationType="slide"
-                    visible={show}
-                    supportedOrientations={['portrait']}
-                    onRequestClose={() => setShow(false)}
-                >
-                    <View style={{ flex: 1 }}>
-                        <TouchableHighlight
-                            style={{
-                                flex: 1,
-                                alignItems: "flex-end",
-                                flexDirection: "row",
-                            }}
-                            activeOpacity={1}
-                            visible={show}
-                            onPress={() => setShow(false)}>
-                            <TouchableHighlight
-                                underlayColor={'#ffffff'}
-                                style={{
-                                    flex: 1,
-                                    borderTopColor: '#d3d3d3',
-                                    borderTopWidth: 1,
-                                }}
-                                onPress={() => console.log("datepicker clicked")}
-                            >
-                                <View style={{
-                                    backgroundColor: '#ffffff',
-                                    height: 256,
-                                    overflow: 'hidden',
-                                }}>
-                                    <View style={{ marginTop: 20 }}>
-                                        { renderDatePicker() }
-                                    </View>
-                                    <TouchableHighlight
-                                        underlayColor={"transparent"}
-                                        onPress={() => onCancelPress()}
-                                        style={[styles.btnText, styles.btnCancel]}
-                                    >
-                                        <Text style={{ color: colors.primary }}>
-                                            Cancelar
-                                        </Text>
-                                    </TouchableHighlight>
-                                    <TouchableHighlight
-                                        underlayColor={"transparent"}
-                                        onPress={() => onDonePress()}
-                                        style={[styles.btnText, styles.btnDone]}
-                                    >
-                                        <Text style={{ color: colors.primary }}>
-                                            Confirmar
-                                        </Text>
-                                    </TouchableHighlight>
-
-                                </View>
-
-                            </TouchableHighlight>
-                        </TouchableHighlight>
-                    </View>
-                </Modal>
-            )}
-        </TouchableOpacity>
+      <DateTimePicker
+        timeZoneOffsetInDays={-1}
+        value={new Date(auxDate)}
+        mode="date"
+        minimumDate={new Date(moment().subtract(1, "month"))}
+        maximumDate={new Date(moment())}
+        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()}
+
+      {Platform.OS === "ios" && show && (
+        <Modal
+          transparent={true}
+          animationType="slide"
+          visible={show}
+          supportedOrientations={["portrait"]}
+          onRequestClose={() => setShow(false)}
+        >
+          <View style={{ flex: 1 }}>
+            <TouchableHighlight
+              style={{
+                flex: 1,
+                alignItems: "flex-end",
+                flexDirection: "row",
+              }}
+              activeOpacity={1}
+              visible={show}
+              onPress={() => setShow(false)}
+            >
+              <TouchableHighlight
+                underlayColor={"#ffffff"}
+                style={{
+                  flex: 1,
+                  borderTopColor: "#d3d3d3",
+                  borderTopWidth: 1,
+                }}
+                onPress={() => console.log("datepicker clicked")}
+              >
+                <View
+                  style={{
+                    backgroundColor: "#ffffff",
+                    height: 256,
+                    overflow: "hidden",
+                  }}
+                >
+                  <View style={{ marginTop: 20 }}>{renderDatePicker()}</View>
+                  <TouchableHighlight
+                    underlayColor={"transparent"}
+                    onPress={() => onCancelPress()}
+                    style={[styles.btnText, styles.btnCancel]}
+                  >
+                    <Text style={{ color: colors.primary }}>Cancelar</Text>
+                  </TouchableHighlight>
+                  <TouchableHighlight
+                    underlayColor={"transparent"}
+                    onPress={() => onDonePress()}
+                    style={[styles.btnText, styles.btnDone]}
+                  >
+                    <Text style={{ color: colors.primary }}>Confirmar</Text>
+                  </TouchableHighlight>
+                </View>
+              </TouchableHighlight>
+            </TouchableHighlight>
+          </View>
+        </Modal>
+      )}
+    </TouchableOpacity>
+  );
 };
 
 FormDatePicker.defaultProps = {
-    textStyle: {},
-    defaultDate: moment(),
-    onDateChange: () => { },
-}
+  textStyle: {},
+  defaultDate: moment(),
+  onDateChange: () => {},
+};
 
 const styles = StyleSheet.create({
-    btnCancel: {
-        left: 0,
-    },
-    btnDone: {
-        right: 0,
-    },
-    btnText: {
-        position: "absolute",
-        top: 0,
-        height: 42,
-        paddingHorizontal: 20,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-    },
+  btnCancel: {
+    left: 0,
+  },
+  btnDone: {
+    right: 0,
+  },
+  btnText: {
+    position: "absolute",
+    top: 0,
+    height: 42,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
 
-export default FormDatePicker;
\ No newline at end of file
+export default FormDatePicker;