Browse Source

Fixing typo and changing tabs to 2 spaces in datepicker custom

component.
master
GabrielTrettel 4 years ago
parent
commit
ed189b2272
  1. 78
      src/app/components/forms/FormDatePicker.js

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

@ -1,19 +1,26 @@
import React, { useState } from 'react'; 7
import { Modal, StyleSheet, Text, TouchableHighlight, View, Platform, TouchableOpacity } from 'react-native';
import React, { useState } from "react";
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 { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate)); const [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const onChange = (e, selectedDate) => { const onChange = (e, selectedDate) => {
setDate(moment(selectedDate)); setDate(moment(selectedDate));
}
};
const androidOnChange = (e, selectedDate) => { const androidOnChange = (e, selectedDate) => {
setShow(false); setShow(false);
@ -23,21 +30,20 @@ const FormDatePicker = (props) => {
// console.log(moment(selectedDate).format("DD-MM-YYYY")); // console.log(moment(selectedDate).format("DD-MM-YYYY"));
// console.log(date.format("DD-MM-YYYY")); // console.log(date.format("DD-MM-YYYY"));
} }
}
};
const onCancelPress = () => { const onCancelPress = () => {
setDate(moment(defaultDate)); setDate(moment(defaultDate));
setShow(false); setShow(false);
//console.log(moment(defaultDate).format("DD-MM-YYYY")) //console.log(moment(defaultDate).format("DD-MM-YYYY"))
}
};
const onDonePress = () => { const onDonePress = () => {
props.onDateChange(date); props.onDateChange(date);
setShow(false); setShow(false);
//console.log("done"); //console.log("done");
//console.log(date.format("DD-MM-YYYY")); //console.log(date.format("DD-MM-YYYY"));
}
};
const renderDatePicker = () => { const renderDatePicker = () => {
return ( return (
@ -45,26 +51,25 @@ const FormDatePicker = (props) => {
timeZoneOffsetInMinutes={0} timeZoneOffsetInMinutes={0}
value={new Date(date)} value={new Date(date)}
mode="date" mode="date"
minimumDate={new Date(moment().subtract(1, 'month'))}
minimumDate={new Date(moment().subtract(1, "month"))}
maximumDate={new Date(moment())} maximumDate={new Date(moment())}
display={Platform.OS === 'ios' ? 'spinner' : 'default'}
onChange={Platform.OS === 'ios' ? onChange : androidOnChange}
display={Platform.OS === "ios" ? "spinner" : "default"}
onChange={Platform.OS === "ios" ? onChange : androidOnChange}
/> />
)
}
);
};
return ( return (
<TouchableOpacity
onPress={() => setShow(true)}>
<TouchableOpacity onPress={() => setShow(true)}>
<Text> {date.format("DD-MM-YYYY")}</Text> <Text> {date.format("DD-MM-YYYY")}</Text>
{Platform.OS !== 'ios' && show && renderDatePicker()}
{Platform.OS !== "ios" && show && renderDatePicker()}
{Platform.OS === 'ios' && show && (
{Platform.OS === "ios" && show && (
<Modal <Modal
transparent={true} transparent={true}
animationType="slide" animationType="slide"
visible={show} visible={show}
supportedOrientations={['portrait']}
supportedOrientations={["portrait"]}
onRequestClose={() => setShow(false)} onRequestClose={() => setShow(false)}
> >
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
@ -76,45 +81,40 @@ const FormDatePicker = (props) => {
}} }}
activeOpacity={1} activeOpacity={1}
visible={show} visible={show}
onPress={() => setShow(false)}>
onPress={() => setShow(false)}
>
<TouchableHighlight <TouchableHighlight
underlayColor={'#ffffff'}
underlayColor={"#ffffff"}
style={{ style={{
flex: 1, flex: 1,
borderTopColor: '#d3d3d3',
borderTopColor: "#d3d3d3",
borderTopWidth: 1, borderTopWidth: 1,
}} }}
onPress={() => console.log("datepicker clicked")} onPress={() => console.log("datepicker clicked")}
> >
<View style={{
backgroundColor: '#ffffff',
<View
style={{
backgroundColor: "#ffffff",
height: 256, height: 256,
overflow: 'hidden',
}}>
<View style={{ marginTop: 20 }}>
{ renderDatePicker() }
</View>
overflow: "hidden",
}}
>
<View style={{ marginTop: 20 }}>{renderDatePicker()}</View>
<TouchableHighlight <TouchableHighlight
underlayColor={"transparent"} underlayColor={"transparent"}
onPress={() => onCancelPress()} onPress={() => onCancelPress()}
style={[styles.btnText, styles.btnCancel]} style={[styles.btnText, styles.btnCancel]}
> >
<Text style={{ color: colors.primary }}>
Cancel
</Text>
<Text style={{ color: colors.primary }}>Cancel</Text>
</TouchableHighlight> </TouchableHighlight>
<TouchableHighlight <TouchableHighlight
underlayColor={"transparent"} underlayColor={"transparent"}
onPress={() => onDonePress()} onPress={() => onDonePress()}
style={[styles.btnText, styles.btnDone]} style={[styles.btnText, styles.btnDone]}
> >
<Text style={{ color: colors.primary }}>
Done
</Text>
<Text style={{ color: colors.primary }}>Done</Text>
</TouchableHighlight> </TouchableHighlight>
</View> </View>
</TouchableHighlight> </TouchableHighlight>
</TouchableHighlight> </TouchableHighlight>
</View> </View>
@ -127,8 +127,8 @@ const FormDatePicker = (props) => {
FormDatePicker.defaultProps = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => { },
}
onDateChange: () => {},
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
btnCancel: { btnCancel: {

Loading…
Cancel
Save