Browse Source

updating date input layout

master
analuizaff 4 years ago
parent
commit
06a18715c0
  1. 21
      src/app/components/forms/FormDatePicker.js
  2. 20
      src/app/screens/PluviometerSharingDataScreen.js

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

@ -8,6 +8,7 @@ import {
Platform, Platform,
TouchableOpacity, TouchableOpacity,
} from "react-native"; } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker"; import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment"; import moment from "moment";
@ -64,7 +65,16 @@ const FormDatePicker = (props) => {
return ( return (
<TouchableOpacity onPress={() => setShow(true)}> <TouchableOpacity onPress={() => setShow(true)}>
<Text> {date.format("DD/MM/YYYY")}</Text>
<View style={{ flex: 1, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }}>
<View style={ styles.dateInput }>
<Text> {date.format("DD/MM/YYYY")}</Text>
</View>
<FontAwesome5
name="calendar-day"
size={30}
color="grey"
/>
</View>
{Platform.OS !== "ios" && show && renderDatePicker()} {Platform.OS !== "ios" && show && renderDatePicker()}
{Platform.OS === "ios" && show && ( {Platform.OS === "ios" && show && (
@ -130,7 +140,7 @@ const FormDatePicker = (props) => {
FormDatePicker.defaultProps = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => {},
onDateChange: () => { },
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -149,6 +159,13 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
dateInput: {
flex: 0.97,
backgroundColor: colors.light,
borderRadius: 25,
padding: 18,
marginVertical: 10,
}
}); });
export default FormDatePicker; export default FormDatePicker;

20
src/app/screens/PluviometerSharingDataScreen.js

@ -19,9 +19,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 { FontAwesome5 } from "@expo/vector-icons";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions"; import { scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker"; import FormDatePicker from "../components/forms/FormDatePicker";
@ -83,7 +81,7 @@ function PluviometerSharingDataScreen(props) {
/> />
</View> </View>
<View style={{ marginTop: 10 }}>
<View style={{ marginTop: 10, flex: 1 }}>
<Text style={styles.labelStyle}>Data da coleta:</Text> <Text style={styles.labelStyle}>Data da coleta:</Text>
<FormDatePicker <FormDatePicker
textStyle={{ textStyle={{
@ -122,22 +120,6 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
datePickerView: {
flexDirection: "row",
justifyContent: "space-between",
paddingVertical: 15,
flex: 1,
},
datepickerStyle: {
borderRadius: 25,
backgroundColor: "#f8f4f4",
flex: 0.9,
flexDirection: "row"
},
dateIcon: {
marginTop: 25,
marginLeft: 15,
},
labelStyle: { labelStyle: {
fontSize: 16, fontSize: 16,
fontWeight: "bold", fontWeight: "bold",

Loading…
Cancel
Save