Fix Component Datetime IOS
Components - components/DateInput/DataTimeAndroid.tsx - components/DateInput/DateTimeIOS.tsx - components/Notification/NotificationInitializer.tsx Screens - screens/Event/ScreenStatus.tsx Docs - docs/prompt-for-qwen-code.md ### No Issue
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
// DateTimeInput.tsx
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
@@ -7,7 +6,14 @@ import DateTimePicker, {
|
||||
DateTimePickerEvent,
|
||||
} from "@react-native-community/datetimepicker";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { Pressable, StyleProp, Text, View, ViewStyle } from "react-native";
|
||||
import {
|
||||
Keyboard,
|
||||
Pressable,
|
||||
StyleProp,
|
||||
Text,
|
||||
View,
|
||||
ViewStyle,
|
||||
} from "react-native";
|
||||
import Grid from "../Grid/GridCustom";
|
||||
import TextCustom from "../Text/TextCustom";
|
||||
|
||||
@@ -53,7 +59,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(value as any);
|
||||
const [selectedTime, setSelectedTime] = useState<Date>(value as any);
|
||||
|
||||
console.log("Date Android", value)
|
||||
console.log("Date Android", value);
|
||||
|
||||
// Fungsi untuk menggabungkan tanggal dan waktu
|
||||
const combineDateAndTime = useCallback((date: Date, time: Date): Date => {
|
||||
@@ -62,7 +68,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
|
||||
time.getHours(),
|
||||
time.getMinutes(),
|
||||
time.getSeconds(),
|
||||
time.getMilliseconds()
|
||||
time.getMilliseconds(),
|
||||
);
|
||||
return combined;
|
||||
}, []);
|
||||
@@ -92,10 +98,12 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
|
||||
};
|
||||
|
||||
const toggleDatePicker = () => {
|
||||
Keyboard.dismiss();
|
||||
setShowDate(!showDate);
|
||||
};
|
||||
|
||||
const toggleTimePicker = () => {
|
||||
Keyboard.dismiss();
|
||||
setShowTime(!showTime);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
// DateTimeInput.tsx
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { GStyles } from "@/styles/global-styles";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import DateTimePicker, {
|
||||
DateTimePickerEvent,
|
||||
} from "@react-native-community/datetimepicker";
|
||||
import dayjs from "dayjs";
|
||||
import React, { useState } from "react";
|
||||
import { Button, StyleProp, Text, View, ViewStyle } from "react-native";
|
||||
import React, { useState, useRef } from "react";
|
||||
import {
|
||||
Button,
|
||||
StyleProp,
|
||||
Text,
|
||||
View,
|
||||
ViewStyle,
|
||||
Keyboard,
|
||||
TouchableOpacity,
|
||||
Modal,
|
||||
} from "react-native";
|
||||
import ClickableCustom from "../Clickable/ClickableCustom";
|
||||
import TextCustom from "../Text/TextCustom";
|
||||
|
||||
@@ -50,20 +59,35 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
|
||||
}) => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>(
|
||||
value as any
|
||||
value as any,
|
||||
);
|
||||
// State sementara untuk menyimpan nilai yang dipilih
|
||||
const [tempSelectedDate, setTempSelectedDate] = useState<Date | undefined>(
|
||||
value as any,
|
||||
);
|
||||
|
||||
const handleConfirm = (event: any, date?: Date) => {
|
||||
if (event.type === "set" && date !== undefined) {
|
||||
setSelectedDate(date);
|
||||
onChange(date as any);
|
||||
// Hanya perbarui state sementara, bukan state utama
|
||||
setTempSelectedDate(date);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePress = () => {
|
||||
// Sembunyikan keyboard sebelum menampilkan date picker
|
||||
Keyboard.dismiss();
|
||||
// Set state sementara ke nilai saat ini
|
||||
setTempSelectedDate(selectedDate);
|
||||
setShow(!show);
|
||||
};
|
||||
|
||||
// Fungsi untuk menangani klik di luar area picker
|
||||
const handleOutsidePress = () => {
|
||||
if (show) {
|
||||
setShow(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ClickableCustom
|
||||
@@ -112,84 +136,125 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
|
||||
))}
|
||||
</ClickableCustom>
|
||||
|
||||
{show && (
|
||||
<>
|
||||
<View
|
||||
<Modal
|
||||
animationType="fade"
|
||||
transparent={true}
|
||||
visible={show}
|
||||
onRequestClose={() => setShow(false)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)", // Efek blur dengan background semi-transparan
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 15,
|
||||
backgroundColor: "white",
|
||||
borderRadius: 8,
|
||||
padding: 10,
|
||||
// top: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderColor: "#ccc",
|
||||
}}
|
||||
activeOpacity={1}
|
||||
onPress={handleOutsidePress}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<View
|
||||
style={{
|
||||
zIndex: 15,
|
||||
backgroundColor: MainColor.white_gray,
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
marginHorizontal: 20,
|
||||
width: "95%",
|
||||
maxWidth: 400,
|
||||
borderColor: MainColor.placeholder,
|
||||
borderWidth: 1,
|
||||
}}
|
||||
onStartShouldSetResponder={() => true} // Mencegah event bubbling ke TouchableOpacity induk
|
||||
onResponderRelease={() => {}} // Handler kosong untuk mencegah event bubbling
|
||||
>
|
||||
{/* <View style={{ alignItems: "flex-start" }}>
|
||||
<Ionicons
|
||||
name="close"
|
||||
size={20}
|
||||
color="black"
|
||||
onPress={() => {
|
||||
setShow(false);
|
||||
setSelectedDate(undefined);
|
||||
{/* <View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: MainColor.black,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
Pilih Tanggal & Waktu
|
||||
</Text>
|
||||
<TouchableOpacity onPress={() => setShow(false)}>
|
||||
<Ionicons
|
||||
name="close"
|
||||
size={24}
|
||||
color={AccentColor.blackgray}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View> */}
|
||||
|
||||
<DateTimePicker
|
||||
value={selectedDate || new Date()}
|
||||
value={tempSelectedDate || new Date()}
|
||||
mode={"datetime"}
|
||||
display="spinner"
|
||||
display="inline"
|
||||
onChange={handleConfirm}
|
||||
minimumDate={minimumDate}
|
||||
maximumDate={maximumDate}
|
||||
themeVariant="light"
|
||||
/>
|
||||
<View style={{ flexDirection: "row", gap: 10 }}>
|
||||
<ClickableCustom
|
||||
<View style={{ flexDirection: "row", gap: 10, marginTop: 15 }}>
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setShow(false)
|
||||
setSelectedDate(undefined)
|
||||
setShow(false);
|
||||
// Kembalikan ke nilai sebelumnya jika batal
|
||||
setTempSelectedDate(selectedDate);
|
||||
}}
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 12,
|
||||
borderRadius: 10,
|
||||
backgroundColor: MainColor.placeholder,
|
||||
marginTop: 10,
|
||||
width: "48%",
|
||||
}}
|
||||
>
|
||||
<TextCustom color="black">Batal</TextCustom>
|
||||
</ClickableCustom>
|
||||
</TouchableOpacity>
|
||||
|
||||
<ClickableCustom
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
setShow(false)
|
||||
onChange(selectedDate as any)
|
||||
// Simpan nilai yang dipilih ke state utama hanya saat OK ditekan
|
||||
setSelectedDate(tempSelectedDate);
|
||||
onChange(tempSelectedDate as any);
|
||||
setShow(false);
|
||||
}}
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 12,
|
||||
borderRadius: 10,
|
||||
backgroundColor: MainColor.darkblue,
|
||||
marginTop: 10,
|
||||
width: "48%",
|
||||
}}
|
||||
>
|
||||
<TextCustom>OK</TextCustom>
|
||||
</ClickableCustom>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user