cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
GabrielTrettel 4 years ago
parent
863f93431a ebfd23db39
commit
a42cc8d890
2 changed files with 137 additions and 152 deletions
Unified View
  1. 273
      src/app/components/forms/FormDatePicker.js
  2. 16
      src/app/screens/PluviometerSharingDataScreen.js

273
src/app/components/forms/FormDatePicker.js
View File

@ -1,151 +1,152 @@
import React, { useState } from "react"; import React, { useState } from 'react'; 7
import { import { Modal, StyleSheet, Text, TouchableHighlight, View, Platform, TouchableOpacity } from 'react-native';
Modal,
StyleSheet,
Text,
TouchableHighlight,
View,
Platform,
TouchableOpacity,
} from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker"; import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment"; import moment from "moment";
import colors from "../../config/colors"; import colors from '../../config/colors';
const FormDatePicker = (props) => { const FormDatePicker = (props) => {
const { textStyle, defaultDate } = props; const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate)); const [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [auxDate, setAuxDate] = useState(moment());
const onChange = (e, selectedDate) => { 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) => {
const androidOnChange = (e, selectedDate) => { setShow(false);
setShow(false); if (selectedDate) {
if (selectedDate) { setDate(moment(selectedDate));
setDate(moment(selectedDate)); props.onDateChange(selectedDate);
props.onDateChange(selectedDate); }
// console.log(moment(selectedDate).format("DD-MM-YYYY")); }
// console.log(date.format("DD-MM-YYYY")); 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 (
const onCancelPress = () => { <DateTimePicker
setDate(moment(defaultDate)); timeZoneOffsetInMinutes={0}
setShow(false); value={new Date(date)}
//console.log(moment(defaultDate).format("DD-MM-YYYY")) mode="date"
}; minimumDate={new Date(moment().subtract(1, 'month'))}
maximumDate={new Date(moment())}
const onDonePress = () => { formatChosenDate={selectedDate => {return moment(selectedDate).format('DD/MM/YYYY');}} //formatar a data do selected date
props.onDateChange(date); display={Platform.OS === 'ios' ? 'spinner' : 'default'}
setShow(false); onChange={Platform.OS === 'ios' ? onChange : androidOnChange}
//console.log("done"); />
//console.log(date.format("DD-MM-YYYY")); )
}; }
const renderDatePicker = () => {
return ( return (
<DateTimePicker <TouchableOpacity
timeZoneOffsetInMinutes={0} onPress={() => setShow(true)}>
value={new Date(date)} <Text> {date.format("DD/MM/YYYY")}</Text>
mode="date" {Platform.OS !== 'ios' && show && renderDatePicker()}
minimumDate={new Date(moment().subtract(1, "month"))} {Platform.OS === 'ios' && show && (
maximumDate={new Date(moment())} <Modal
display={Platform.OS === "ios" ? "spinner" : "default"} transparent={true}
onChange={Platform.OS === "ios" ? onChange : androidOnChange} animationType="slide"
/> visible={show}
); supportedOrientations={['portrait']}
}; onRequestClose={() => setShow(false)}
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> <View style={{ flex: 1 }}>
<TouchableHighlight <TouchableHighlight
underlayColor={"transparent"} style={{
onPress={() => onCancelPress()} flex: 1,
style={[styles.btnText, styles.btnCancel]} alignItems: "flex-end",
> flexDirection: "row",
<Text style={{ color: colors.primary }}>Cancel</Text> }}
</TouchableHighlight> activeOpacity={1}
<TouchableHighlight visible={show}
underlayColor={"transparent"} onPress={() => setShow(false)}>
onPress={() => onDonePress()} <TouchableHighlight
style={[styles.btnText, styles.btnDone]} underlayColor={'#ffffff'}
> style={{
<Text style={{ color: colors.primary }}>Done</Text> flex: 1,
</TouchableHighlight> borderTopColor: '#d3d3d3',
</View> borderTopWidth: 1,
</TouchableHighlight> }}
</TouchableHighlight> onPress={() => console.log("datepicker clicked")}
</View> >
</Modal> <View style={{
)} backgroundColor: '#ffffff',
</TouchableOpacity> 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 = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => {}, onDateChange: () => { },
}; }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
btnCancel: { btnCancel: {
left: 0, left: 0,
}, },
btnDone: { btnDone: {
right: 0, right: 0,
}, },
btnText: { btnText: {
position: "absolute", position: "absolute",
top: 0, top: 0,
height: 42, height: 42,
paddingHorizontal: 20, paddingHorizontal: 20,
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
}); });
export default FormDatePicker; export default FormDatePicker;

16
src/app/screens/PluviometerSharingDataScreen.js
View File

@ -145,22 +145,6 @@ 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",
color: colors.primary,
},
btnCancel: {
left: 0,
},
btnDone: {
right: 0,
},
}); });
export default PluviometerSharingDataScreen; export default PluviometerSharingDataScreen;
Write Preview
|||||||
100:0
Loading…
Cancel
Save