gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues 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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 271
      src/app/components/forms/FormDatePicker.js
  2. 16
      src/app/screens/PluviometerSharingDataScreen.js

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

@ -1,151 +1,152 @@
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 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 [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false);
const onChange = (e, selectedDate) => {
setDate(moment(selectedDate));
};
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 { 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 onCancelPress = () => {
setDate(moment(defaultDate));
setShow(false);
//console.log(moment(defaultDate).format("DD-MM-YYYY"))
};
const onDonePress = () => {
props.onDateChange(date);
setShow(false);
//console.log("done");
//console.log(date.format("DD-MM-YYYY"));
};
const renderDatePicker = () => {
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}
/>
)
}
return ( return (
<DateTimePicker
timeZoneOffsetInMinutes={0}
value={new Date(date)}
mode="date"
minimumDate={new Date(moment().subtract(1, "month"))}
maximumDate={new Date(moment())}
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",
}}
<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={{ marginTop: 20 }}>{renderDatePicker()}</View>
<TouchableHighlight
underlayColor={"transparent"}
onPress={() => onCancelPress()}
style={[styles.btnText, styles.btnCancel]}
>
<Text style={{ color: colors.primary }}>Cancel</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor={"transparent"}
onPress={() => onDonePress()}
style={[styles.btnText, styles.btnDone]}
>
<Text style={{ color: colors.primary }}>Done</Text>
</TouchableHighlight>
</View>
</TouchableHighlight>
</TouchableHighlight>
</View>
</Modal>
)}
</TouchableOpacity>
);
<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 = { FormDatePicker.defaultProps = {
textStyle: {},
defaultDate: moment(),
onDateChange: () => {},
};
textStyle: {},
defaultDate: moment(),
onDateChange: () => { },
}
const styles = StyleSheet.create({ 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; 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
Loading…
Cancel
Save