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
2026-02-04 12:00:00 +08:00
parent 771ae45f26
commit 60177a1087
5 changed files with 132 additions and 61 deletions
--- a/components/DateInput/DataTimeAndroid.tsx
+++ b/components/DateInput/DataTimeAndroid.tsx
@@ -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);
  };

--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -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>
    </>
  );
 };
--- a/components/Notification/NotificationInitializer.tsx
+++ b/components/Notification/NotificationInitializer.tsx
@@ -51,7 +51,6 @@ export default function NotificationInitializer() {
        if (!fcmToken) {
           console.warn("Tidak bisa mendapatkan FCM token");
          // logout();
-          return;
        }

        console.log("✅ FCM Token:", fcmToken);
--- a/docs/prompt-for-qwen-code.md
+++ b/docs/prompt-for-qwen-code.md
@@ -22,4 +22,5 @@ Gunakan bahasa indonesia pada cli agar saya mudah membacanya.

 <!-- Start Penerapan NewWrapper -->
 Terapkan NewWrapper pada file: screens/Forum/DetailForum.tsx
-Component yang digunakan: components/_ShareComponent/NewWrapper.tsx , karena ini adalah halaman detail saya ingin anda fokus pada props pada NewWrapper. Seperti 
+Component yang digunakan: components/_ShareComponent/NewWrapper.tsx , karena ini adalah halaman detail saya ingin anda fokus pada props pada NewWrapper. Seperti 
+<!--  -->
--- a/screens/Event/ScreenStatus.tsx
+++ b/screens/Event/ScreenStatus.tsx
@@ -26,7 +26,7 @@ export default function Event_ScreenStatus() {

  const id = user?.id || "";
  const [activeCategory, setActiveCategory] = useState<string | null>(
-    status || "publish"
+    status || "publish",
  );

  // Setup pagination
@@ -46,14 +46,15 @@ export default function Event_ScreenStatus() {
  });

  // Generate komponen
-  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
-    loading: pagination.loading,
-    refreshing: pagination.refreshing,
-    listData: pagination.listData,
-    emptyMessage: `Tidak ada data ${activeCategory}`,
-    skeletonCount: 5,
-    skeletonHeight: 100,
-  });
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: `Tidak ada data ${activeCategory}`,
+      skeletonCount: 5,
+      skeletonHeight: 100,
+    });

  // Render item event
  const renderEventItem = ({ item }: { item: any }) => (
@@ -100,11 +101,8 @@ export default function Event_ScreenStatus() {

  return (
    <NewWrapper
-      headerComponent={
-        <View style={{ paddingTop: 8 }}>
-          {tabsComponent}
-        </View>
-      }
+      hideFooter
+      headerComponent={<View style={{ paddingTop: 8 }}>{tabsComponent}</View>}
      listData={pagination.listData}
      renderItem={renderEventItem}
      refreshControl={