127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
import { ColorsStatus } from "@/constants/ColorsStatus";
|
|
import Styles from "@/constants/Styles";
|
|
import { stringToDate, stringToDateTime } from "@/lib/fun_stringToDate";
|
|
import { useTheme } from "@/providers/ThemeProvider";
|
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
|
import dayjs from "dayjs";
|
|
import { useEffect, useState } from "react";
|
|
import { Platform, Pressable, View } from "react-native";
|
|
import Text from "./Text";
|
|
import ModalFloat from "./modalFloat";
|
|
|
|
type Props = {
|
|
label?: string;
|
|
placeholder?: string;
|
|
onChange: (val: string) => void;
|
|
info?: string;
|
|
error?: boolean;
|
|
errorText?: string;
|
|
required?: boolean;
|
|
mode: 'date' | 'datetime' | 'time'
|
|
round?: boolean
|
|
width?: number
|
|
bg?: 'white' | 'transparent'
|
|
value?: string
|
|
disable?: boolean
|
|
};
|
|
|
|
|
|
export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
|
|
const { colors } = useTheme();
|
|
const [modal, setModal] = useState(false);
|
|
const [valueFix, setValueFix] = useState(new Date())
|
|
const [valueFirst, setValueFirst] = useState(mode == "date" ? dayjs(new Date()).format("DD-MM-YYYY") : mode == "time" ? dayjs(new Date()).format("HH:mm") : "")
|
|
|
|
const onChangeDate = (type: string, selectedDate: any) => {
|
|
if (type === "set") {
|
|
let formatted = ""
|
|
if (mode == "date") {
|
|
formatted = dayjs(selectedDate).format("DD-MM-YYYY")
|
|
} else if (mode == "time") {
|
|
formatted = dayjs(selectedDate).format("HH:mm")
|
|
}
|
|
|
|
setValueFirst(formatted)
|
|
|
|
if (Platform.OS == "android") {
|
|
onChange(formatted)
|
|
setModal(false)
|
|
}
|
|
} else if (type === "dismissed") {
|
|
setModal(false)
|
|
}
|
|
};
|
|
|
|
function onSetValue() {
|
|
onChange(valueFirst)
|
|
setModal(false)
|
|
}
|
|
|
|
function changeValue() {
|
|
if (value) {
|
|
let valDate = new Date()
|
|
if (mode == "date") {
|
|
valDate = stringToDate(value)
|
|
} else if (mode == "time") {
|
|
valDate = stringToDateTime("", value)
|
|
}
|
|
setValueFix(valDate)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (modal) changeValue()
|
|
}, [value, modal])
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<View style={[Styles.mb10]}>
|
|
{
|
|
label != undefined && (
|
|
<Text style={[Styles.mb05, error && { color: colors.error }]}>
|
|
{label}
|
|
{required && (<Text style={{ color: colors.error }}>*</Text>)}
|
|
</Text>
|
|
)
|
|
}
|
|
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, { borderColor: colors.icon + '20' }, error && { borderColor: colors.error }, { backgroundColor: colors.card }]} onPress={() => setModal(true)} disabled={disable}>
|
|
<Text style={!value && [{ color: colors.dimmed }]}>{value ? value : placeholder}</Text>
|
|
</Pressable>
|
|
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
|
|
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
|
|
</View>
|
|
{
|
|
Platform.OS === 'ios' ? (
|
|
modal && (
|
|
<ModalFloat
|
|
isVisible={modal}
|
|
setVisible={setModal}
|
|
onSubmit={() => { onSetValue() }}
|
|
title={mode == "date" ? "Pilih Tanggal" : mode == "time" ? "Pilih Jam" : "Pilih Tanggal & Jam"}>
|
|
<DateTimePicker
|
|
value={valueFix}
|
|
mode={mode}
|
|
display="spinner"
|
|
onChange={(event, date) => { onChangeDate(event.type, date) }}
|
|
onTouchCancel={() => setModal(false)}
|
|
textColor={colors.text}
|
|
/>
|
|
</ModalFloat>
|
|
)
|
|
) : (
|
|
modal && (
|
|
<DateTimePicker
|
|
value={valueFix}
|
|
mode={mode}
|
|
display="inline"
|
|
onChange={(event, date) => { onChangeDate(event.type, date) }}
|
|
onTouchCancel={() => { setModal(false) }}
|
|
/>
|
|
)
|
|
)
|
|
}
|
|
</>
|
|
)
|
|
} |