Browse Source

creating datepicker for ios

master
analuizaff 4 years ago
parent
commit
f0694fb142
  1. 195
      src/app/screens/PluviometerSharingDataScreen.js

195
src/app/screens/PluviometerSharingDataScreen.js

@ -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}
/> />
) )
} }
@ -67,60 +84,113 @@ function PluviometerSharingDataScreen(props) {
</Text> </Text>
</View> </View>
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
<Form
initialValues={{
pluviometer: "",
images: [],
}}
onSubmit={(values) => {
insertPluviometerData({ ...values, dateTime, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View style={{ marginTop: 30 }}>
<Text style={styles.labelStyle}>
Quantidade de chuva:
<Form
initialValues={{
pluviometer: "",
images: [],
}}
onSubmit={(values) => {
insertPluviometerData({ ...values, dateTime, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View style={{ marginTop: 30 }}>
<Text style={styles.labelStyle}>
Quantidade de chuva:
</Text> </Text>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
width={280}
/>
</View>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
width={280}
/>
</View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<Text style={styles.labelStyle}>
Data da coleta:
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<Text style={styles.labelStyle}>
Data da coleta:
</Text> </Text>
<TouchableOpacity style={styles.datepickerStyle}
onPress={() => setShow(true)}>
<View style={styles.datePickerView}>
<Text style={{ fontSize: 16, marginLeft: 15 }}>
{date.format('DD/MM/YYYY')}
</Text>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
{show && renderDatePicker()}
</View>
</TouchableOpacity>
</View>
<FormImagePicker
backgroundColor="#1976D2"
name="images"
styles={{ width: 50 }}
/>
<SubmitButton title="Enviar" style={{marginBottom:100}}/>
<View style={{ flex: 1 }}>
</View>
</Form>
<TouchableOpacity style={styles.datepickerStyle}
onPress={() => setShow(true)}>
<View style={styles.datePickerView}>
<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" />
</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>
</TouchableOpacity>
</View>
<FormImagePicker
backgroundColor="#1976D2"
name="images"
styles={{ width: 50 }}
/>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
<View style={{ flex: 1 }}>
</View>
</Form>
</ScrollView> </ScrollView>
</Screen> </Screen>
); );
@ -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;
Loading…
Cancel
Save