20260623212917

code/app/app-rn/src/components/DateTime.tsx

@@ -1,15 +1,19 @@
-import { DatePicker as YzDatePicker } from "@yz1311/react-native-wheel-picker";
+import DateTimePicker from "react-native-dates-picker";
 import dayjs from "dayjs";
 import { BottomSheet, Button, Spinner } from "heroui-native";
-import { useState, useEffect } from "react";
-import { toDate } from "@/utils/time";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { View } from "react-native";
 import { CheckIcon } from "lucide-react-native";
 import { FadeIn } from "react-native-reanimated";
 
 export type DatePickerMode = "year" | "month" | "date" | "time" | "datetime";
 
-export type DateFormatType = "YYYY" | "YYYY-MM" | "YYYY-MM-DD" | "HH:mm:ss" | "YYYY-MM-DD HH:mm";
+export type DateFormatType =
+  | "YYYY"
+  | "YYYY-MM"
+  | "YYYY-MM-DD"
+  | "HH:mm:ss"
+  | "YYYY-MM-DD HH:mm";
 
 interface DatePickerProps {
   value: Date | string;
@@ -28,6 +32,14 @@ const defaultFormatMap: Record<DatePickerMode, DateFormatType> = {
   datetime: "YYYY-MM-DD HH:mm",
 };
 
+const modeViewMap: Record<DatePickerMode, "day" | "month" | "year"> = {
+  year: "year",
+  month: "month",
+  date: "day",
+  time: "day",
+  datetime: "day",
+};
+
 export default function DateTime({
   value,
   show = false,
@@ -38,51 +50,60 @@ export default function DateTime({
 }: DatePickerProps) {
   const finalFormat = format ?? defaultFormatMap[mode];
 
-  const [tempDate, setTempDate] = useState<Date>(toDate(value) ?? new Date());
+  const [open, setOpen] = useState(false);
+  const [tempDate, setTempDate] = useState<dayjs.Dayjs | undefined>(dayjs());
   const [loading, setLoading] = useState(false);
 
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  // 打开
   useEffect(() => {
     if (show) {
-      setTempDate(toDate(value) ?? new Date());
+      const d = dayjs(value);
+      setTempDate(d.isValid() ? d : dayjs());
+      setOpen(true);
     }
   }, [show, value]);
 
-  const handleClose = () => {
-    if (loading) return;
-    onClose?.();
-  };
+  // 关闭：BottomSheet 的 onOpenChange(false) 或 confirm 后 setOpen(false)
+  // 立刻通知父组件，不延迟 — BottomSheet 自身驱动关闭动画
+  useEffect(() => {
+    if (!open && show) {
+      onCloseRef.current?.();
+    }
+  }, [open, show]);
 
-  const handleConfirm = async () => {
-    if (!tempDate || loading) return;
+  const handleConfirm = useCallback(async () => {
+    if (loading || !tempDate) return;
 
     try {
       setLoading(true);
-
-      const result = dayjs(tempDate).format(finalFormat);
-
+      const result = tempDate.format(finalFormat);
       await onConfirm?.(result);
-
-      handleClose();
+      setOpen(false);
     } catch (e) {
       console.log(e);
     } finally {
       setLoading(false);
     }
-  };
+  }, [loading, tempDate, finalFormat, onConfirm]);
 
   return (
-    <BottomSheet isOpen={show} onOpenChange={(v) => !v && handleClose()}>
+    <BottomSheet isOpen={open} onOpenChange={setOpen}>
       <BottomSheet.Portal>
         <BottomSheet.Overlay />
-
         <BottomSheet.Content>
           <View style={{ width: "100%", alignItems: "center" }}>
-            <YzDatePicker
-              showHeader={false}
+            <DateTimePicker
+              mode="single"
               date={tempDate}
-              mode={mode}
-              isModal={false}
-              onDateChange={(d: Date) => setTempDate(d)}
+              initialView={modeViewMap[mode]}
+              timePicker={mode === "time" || mode === "datetime"}
+              selectedItemColor="#0d9488"
+              onChange={({ date }) => {
+                if (date) setTempDate(dayjs(date));
+              }}
             />
 
             <Button className="w-full" onPress={handleConfirm} isDisabled={loading}>