gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

creating datepicker as a custom hook

master
analuizaff 4 years ago
parent
be403f3d2a
commit
5a6ce13fc9
2 changed files with 174 additions and 120 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. 151
      src/app/components/forms/FormDatePicker.js
  2. 143
      src/app/screens/PluviometerSharingDataScreen.js

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

@ -0,0 +1,151 @@
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';
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 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 = () => {
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',
}}>
<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>
);
};
FormDatePicker.defaultProps = {
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",
},
});
export default FormDatePicker;

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

@ -6,8 +6,6 @@ import {
View, View,
Image, Image,
ScrollView, ScrollView,
Modal,
Platform,
} from "react-native"; } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
@ -21,16 +19,11 @@ 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 {
TouchableHighlight,
TouchableOpacity,
} from "react-native-gesture-handler";
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";
import moment from "moment";
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions"; import { scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
const dims = scaleDimsFromWidth(85, 85, 25); const dims = scaleDimsFromWidth(85, 85, 25);
@ -44,51 +37,12 @@ const validationSchema = Yup.object().shape({
images: Yup.array(), images: Yup.array(),
}); });
function PluviometerSharingDataScreen(props) { function PluviometerSharingDataScreen(props) {
const location = useLocation(); const location = useLocation();
//-------------------------------------------DATETIMEPICKER------------------------------------------------
const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false);
const [dateTime, setDateTime] = useState(moment(defaultDate)) //gambi pra inserir no BD
//---------------ios------------------------
const onChange = (e, selectedDate) => {
setDate(moment(selectedDate));
setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
}
const onCancelPress = () => {
setDate(moment(defaultDate));
setShow(false);
}
const onDonePress = () => {
setShow(false);
}
//-------------------------------------------
const [dateTime, setDateTime] = useState();
const onAndroidChange = (e, selectedDate) => {
setShow(false);
if (selectedDate) {
setDate(moment(selectedDate));
setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
}
}
const renderDatePicker = () => {
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 : onAndroidChange}
/>
)
}
// ---------------------------------------------------------------------------------------------------------*/
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignItems: "center" }}> <View style={{ alignItems: "center" }}>
@ -121,80 +75,27 @@ function PluviometerSharingDataScreen(props) {
> >
<View style={{ marginTop: 30, flex: 1 }}> <View style={{ marginTop: 30, flex: 1 }}>
<Text style={styles.labelStyle}>Quantidade de chuva:</Text> <Text style={styles.labelStyle}>Quantidade de chuva:</Text>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
/>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
/>
</View> </View>
<View style={{ marginTop: 10, flex: 1 }}>
<Text style={styles.labelStyle}>Data da coleta:</Text>
<TouchableOpacity style={styles.datepickerStyle}
onPress={() => setShow(true)}>
<View style={styles.datePickerView}>
<View style={{ flexDirection: "row", flex: 0.8}}>
<Text style={{ fontSize: 16, marginLeft: 15 }}>{date.format('DD/MM/YYYY')}</Text>
</View>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
{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={'#f8f4f4'}
style={{
flex: 1,
borderTopColor: colors.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>
</TouchableOpacity>
<View style={{ marginTop: 10 }}>
<Text style={styles.labelStyle}>Data da coleta:</Text>
<FormDatePicker
textStyle={{
padding: 15,
borderColor: "gray",
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
/>
</View> </View>
<FormImagePicker <FormImagePicker
backgroundColor="#1976D2" backgroundColor="#1976D2"
name="images" name="images"
@ -208,6 +109,8 @@ function PluviometerSharingDataScreen(props) {
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 10, padding: 10,

Write Preview
Loading…
Cancel
Save