Browse Source

creating datepicker as a custom hook

master
analuizaff 4 years ago
parent
commit
5a6ce13fc9
  1. 151
      src/app/components/forms/FormDatePicker.js
  2. 143
      src/app/screens/PluviometerSharingDataScreen.js

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

@ -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

@ -6,8 +6,6 @@ import {
View,
Image,
ScrollView,
Modal,
Platform,
} from "react-native";
import * as Yup from "yup";
@ -21,16 +19,11 @@ import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
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 { showMessage } from "react-native-flash-message";
import moment from "moment";
import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
const dims = scaleDimsFromWidth(85, 85, 25);
@ -44,51 +37,12 @@ const validationSchema = Yup.object().shape({
images: Yup.array(),
});
function PluviometerSharingDataScreen(props) {
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 (
<Screen style={styles.container}>
<View style={{ alignItems: "center" }}>
@ -121,80 +75,27 @@ function PluviometerSharingDataScreen(props) {
>
<View style={{ marginTop: 30, flex: 1 }}>
<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 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>
<FormImagePicker
backgroundColor="#1976D2"
name="images"
@ -208,6 +109,8 @@ function PluviometerSharingDataScreen(props) {
);
}
const styles = StyleSheet.create({
container: {
padding: 10,

Loading…
Cancel
Save