|
@ -1,6 +1,6 @@ |
|
|
import React, { useState } from "react"; |
|
|
import React, { useState } from "react"; |
|
|
|
|
|
|
|
|
import { StyleSheet, Text, View, Image, ScrollView } from "react-native"; |
|
|
|
|
|
|
|
|
import { StyleSheet, Text, View, Image, ScrollView, Modal, Platform } from "react-native"; |
|
|
import * as Yup from "yup"; |
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
@ -13,7 +13,7 @@ import Screen from "../components/Screen"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import { insertPluviometerData } from "../database/databaseLoader"; |
|
|
import { insertPluviometerData } from "../database/databaseLoader"; |
|
|
import { TouchableOpacity } from "react-native-gesture-handler"; |
|
|
|
|
|
|
|
|
import { TouchableHighlight, TouchableOpacity } from "react-native-gesture-handler"; |
|
|
import DateTimePicker from '@react-native-community/datetimepicker'; |
|
|
import DateTimePicker from '@react-native-community/datetimepicker'; |
|
|
import { FontAwesome5 } from '@expo/vector-icons'; |
|
|
import { FontAwesome5 } from '@expo/vector-icons'; |
|
|
import { showMessage } from "react-native-flash-message"; |
|
|
import { showMessage } from "react-native-flash-message"; |
|
@ -33,6 +33,22 @@ function PluviometerSharingDataScreen(props) { |
|
|
const [date, setDate] = useState(moment(defaultDate)) |
|
|
const [date, setDate] = useState(moment(defaultDate)) |
|
|
const [show, setShow] = useState(false); |
|
|
const [show, setShow] = useState(false); |
|
|
let dateTime = new Date().toString(); |
|
|
let dateTime = new Date().toString(); |
|
|
|
|
|
//---------------ios------------------------
|
|
|
|
|
|
const onChange = (e, selectedDate) => { |
|
|
|
|
|
setShow(false); |
|
|
|
|
|
if (selectedDate) { |
|
|
|
|
|
setDate(moment(defaultDate)); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
const onCancelPress = () => { |
|
|
|
|
|
setDate(moment(defaultDate)); |
|
|
|
|
|
setShow(false); |
|
|
|
|
|
} |
|
|
|
|
|
const onDonePress = () => { |
|
|
|
|
|
setDate(moment(date)); |
|
|
|
|
|
setShow(false); |
|
|
|
|
|
} |
|
|
|
|
|
//-------------------------------------------
|
|
|
|
|
|
|
|
|
const onAndroidChange = (e, selectedDate) => { |
|
|
const onAndroidChange = (e, selectedDate) => { |
|
|
setShow(false); |
|
|
setShow(false); |
|
@ -42,6 +58,7 @@ function PluviometerSharingDataScreen(props) { |
|
|
//props.onDateChange(selectedDate);
|
|
|
//props.onDateChange(selectedDate);
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const renderDatePicker = () => { |
|
|
const renderDatePicker = () => { |
|
|
return ( |
|
|
return ( |
|
|
<DateTimePicker |
|
|
<DateTimePicker |
|
@ -49,7 +66,7 @@ function PluviometerSharingDataScreen(props) { |
|
|
value={new Date(date)} |
|
|
value={new Date(date)} |
|
|
mode="date" |
|
|
mode="date" |
|
|
maximumDate={new Date()} |
|
|
maximumDate={new Date()} |
|
|
onChange={onAndroidChange} |
|
|
|
|
|
|
|
|
onChange={Platform.OS === 'ios' ? onChange : onAndroidChange} |
|
|
/> |
|
|
/> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
@ -104,11 +121,64 @@ function PluviometerSharingDataScreen(props) { |
|
|
<TouchableOpacity style={styles.datepickerStyle} |
|
|
<TouchableOpacity style={styles.datepickerStyle} |
|
|
onPress={() => setShow(true)}> |
|
|
onPress={() => setShow(true)}> |
|
|
<View style={styles.datePickerView}> |
|
|
<View style={styles.datePickerView}> |
|
|
<Text style={{ fontSize: 16, marginLeft: 15 }}> |
|
|
|
|
|
{date.format('DD/MM/YYYY')} |
|
|
|
|
|
</Text> |
|
|
|
|
|
|
|
|
<View style={{ flexDirection:"row", justifyContent:"space-between", width: 280 }}> |
|
|
|
|
|
<Text style={{fontSize: 16, marginLeft: 15}}>{date.format('DD/MM/YYYY')}</Text> |
|
|
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" /> |
|
|
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" /> |
|
|
{show && renderDatePicker()} |
|
|
|
|
|
|
|
|
</View> |
|
|
|
|
|
{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={''} |
|
|
|
|
|
style={{ |
|
|
|
|
|
flex: 1, |
|
|
|
|
|
borderTopColor: 'primary', |
|
|
|
|
|
borderTopWidth: 1, |
|
|
|
|
|
}} |
|
|
|
|
|
onPress={() => console.log('Datepicker press')}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={{ |
|
|
|
|
|
backgroundColor: '#f8f8ff', |
|
|
|
|
|
height: 256, |
|
|
|
|
|
overflow: 'hidden', |
|
|
|
|
|
}}> |
|
|
|
|
|
<View style={{ marginTop:20 }}> |
|
|
|
|
|
{ renderDatePicker } |
|
|
|
|
|
</View> |
|
|
|
|
|
<TouchableHighlight |
|
|
|
|
|
underlayColor={'transparent'} |
|
|
|
|
|
onPress={() => onCancelPress()} |
|
|
|
|
|
style={(styles.btnText, styles.btnCancel)}> |
|
|
|
|
|
<Text>Cancelar</Text> |
|
|
|
|
|
</TouchableHighlight> |
|
|
|
|
|
|
|
|
|
|
|
<TouchableHighlight |
|
|
|
|
|
underlayColor={'transparent'} |
|
|
|
|
|
onPress={() => onDonePress()} |
|
|
|
|
|
style={(styles.btnText, styles.btnDone)}> |
|
|
|
|
|
<Text>OK</Text> |
|
|
|
|
|
</TouchableHighlight> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableHighlight> |
|
|
|
|
|
</TouchableHighlight> |
|
|
|
|
|
</View> |
|
|
|
|
|
</Modal> |
|
|
|
|
|
)} |
|
|
</View> |
|
|
</View> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
@ -148,7 +218,7 @@ const styles = StyleSheet.create({ |
|
|
backgroundColor: "#f8f4f4", |
|
|
backgroundColor: "#f8f4f4", |
|
|
}, |
|
|
}, |
|
|
dateIcon: { |
|
|
dateIcon: { |
|
|
marginRight: 15, |
|
|
|
|
|
|
|
|
marginRight: 25, |
|
|
}, |
|
|
}, |
|
|
labelStyle: { |
|
|
labelStyle: { |
|
|
fontSize: 16, |
|
|
fontSize: 16, |
|
@ -157,6 +227,21 @@ const styles = StyleSheet.create({ |
|
|
color: "#1976D2", |
|
|
color: "#1976D2", |
|
|
marginBottom: 5, |
|
|
marginBottom: 5, |
|
|
}, |
|
|
}, |
|
|
|
|
|
btnText: { |
|
|
|
|
|
position: "absolute", |
|
|
|
|
|
top: 0, |
|
|
|
|
|
height: 42, |
|
|
|
|
|
paddingHorizontal: 20, |
|
|
|
|
|
flexDirection: "row", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
justifyContent: "center" |
|
|
|
|
|
}, |
|
|
|
|
|
btnCancel: { |
|
|
|
|
|
left: 0, |
|
|
|
|
|
}, |
|
|
|
|
|
btnDone: { |
|
|
|
|
|
right: 0, |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
export default PluviometerSharingDataScreen; |
|
|
export default PluviometerSharingDataScreen; |