forked from cemaden-educacao/WPD-MobileApp
Browse Source
Decoupling logic of getting date and time from the UI that implements
Decoupling logic of getting date and time from the UI that implements
the componentmaster
GabrielTrettel
3 years ago
2 changed files with 220 additions and 186 deletions
@ -0,0 +1,204 @@ |
|||||
|
import React, { useState } from "react"; |
||||
|
import { |
||||
|
Modal, |
||||
|
StyleSheet, |
||||
|
Text, |
||||
|
TouchableHighlight, |
||||
|
View, |
||||
|
Platform, |
||||
|
TouchableOpacity, |
||||
|
Alert, |
||||
|
} from "react-native"; |
||||
|
import DateTimePicker from "@react-native-community/datetimepicker"; |
||||
|
|
||||
|
import moment from "moment"; |
||||
|
import colors from "../config/colors"; |
||||
|
|
||||
|
export default function DatePicker(props) { |
||||
|
const [disabled, setDisabled] = useState(props.disabled); |
||||
|
|
||||
|
const { textStyle, defaultDate } = props; |
||||
|
const [date, setDate] = useState(moment(defaultDate)); |
||||
|
const [show, setShow] = useState(false); |
||||
|
const [auxDate, setAuxDate] = useState(moment()); |
||||
|
const [mode, setMode] = useState("date"); |
||||
|
const [time, setTime] = useState(moment(defaultDate)); |
||||
|
|
||||
|
const validateTimeInput = (selectedDate) => { |
||||
|
if ( |
||||
|
!moment().isSameOrAfter(selectedDate) && |
||||
|
new Date(moment()).getDay() == new Date(date).getDay() |
||||
|
) { |
||||
|
Alert.alert("Horário inválido", "Selecione um horário válido", [ |
||||
|
{ text: "OK", onPress: () => renderDatePicker() }, |
||||
|
]); |
||||
|
return false; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
const onChange = (e, selectedDate) => { |
||||
|
setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
|
||||
|
}; |
||||
|
|
||||
|
const androidOnChange = (e, selectedDate) => { |
||||
|
console.log("selectedDate: " + selectedDate + " " + mode); |
||||
|
setShow(false); |
||||
|
|
||||
|
if (selectedDate) { |
||||
|
if (mode == "date") { |
||||
|
setDate(moment(selectedDate)); |
||||
|
props.onDateChange(date); |
||||
|
setMode("time"); |
||||
|
setShow(true); // to show the picker again in time mode
|
||||
|
} else { |
||||
|
if (validateTimeInput(selectedDate)) { |
||||
|
setTime(moment(selectedDate)); |
||||
|
props.onTimeChange(moment(selectedDate)); |
||||
|
setShow(false); |
||||
|
setMode("date"); |
||||
|
} else { |
||||
|
setTime(moment()); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const onCancelPress = () => { |
||||
|
setShow(false); |
||||
|
}; |
||||
|
|
||||
|
const onDonePress = () => { |
||||
|
setShow(false); |
||||
|
|
||||
|
if (mode == "date") { |
||||
|
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
|
||||
|
props.onDateChange(auxDate); |
||||
|
setMode("time"); |
||||
|
setShow(true); // to show the picker again in time mode
|
||||
|
} else { |
||||
|
if (validateTimeInput(auxDate)) { |
||||
|
setTime(moment(auxDate)); |
||||
|
props.onTimeChange(auxDate); |
||||
|
setShow(false); |
||||
|
setMode("date"); |
||||
|
} else { |
||||
|
setTime(moment()); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const renderDatePicker = () => { |
||||
|
return ( |
||||
|
<DateTimePicker |
||||
|
timeZoneOffsetInDays={-1} |
||||
|
value={new Date(auxDate)} |
||||
|
mode={mode} |
||||
|
is24Hour={true} |
||||
|
locale={"pt-br"} |
||||
|
minimumDate={new Date(moment().subtract(1, "month"))} |
||||
|
maximumDate={new Date(moment())} |
||||
|
// formatChosenDate={(selectedDate) => {
|
||||
|
// if (mode == "date") {
|
||||
|
// return moment(selectedDate).format("DD/mm/YYYY");
|
||||
|
// } else {
|
||||
|
// return moment(selectedDate).format("HH:mm");
|
||||
|
// }
|
||||
|
// }} //formatar a data e hora do selected date
|
||||
|
display={Platform.OS === "ios" ? "spinner" : "default"} |
||||
|
onChange={Platform.OS === "ios" ? onChange : androidOnChange} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View> |
||||
|
<TouchableOpacity disabled={disabled} onPress={() => setShow(true)}> |
||||
|
{props.children} |
||||
|
</TouchableOpacity> |
||||
|
{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 }}>Cancelar</Text> |
||||
|
</TouchableHighlight> |
||||
|
<TouchableHighlight |
||||
|
underlayColor={"transparent"} |
||||
|
onPress={() => onDonePress()} |
||||
|
style={[styles.btnText, styles.btnDone]} |
||||
|
> |
||||
|
<Text style={{ color: colors.primary }}>Confirmar</Text> |
||||
|
</TouchableHighlight> |
||||
|
</View> |
||||
|
</TouchableHighlight> |
||||
|
</TouchableHighlight> |
||||
|
</View> |
||||
|
</Modal> |
||||
|
)} |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
DatePicker.defaultProps = { |
||||
|
textStyle: {}, |
||||
|
defaultDate: moment(), |
||||
|
onDateChange: () => {}, |
||||
|
onTimeChange: () => {}, |
||||
|
}; |
||||
|
|
||||
|
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", |
||||
|
}, |
||||
|
}); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue