u

2026-04-22 17:28:50 +08:00
1 parent b7f2efc7c3
commit cc88205cba
@@ -0,0 +1,97 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { DateRangePicker as YzDateRangePicker } from "@yz1311/react-native-wheel-picker";
+import { BottomSheet, Button } from "heroui-native";
+import { View, Text } from "react-native";
+import dayjs from "dayjs";
+import { toDate } from "@/utils/time";
+
+interface DateRangePickerProps {
+  startDate: Date | string;
+  endDate: Date | string;
+  show?: boolean;
+  onClose?: () => void;
+  onConfirm?: (start: string, end: string) => void;
+}
+
+export default function DateRangePicker({
+  startDate,
+  endDate,
+  show = false,
+  onClose,
+  onConfirm,
+}: DateRangePickerProps) {
+  const [tempStart, setTempStart] = useState<Date | undefined>(() => toDate(startDate));
+  const [tempEnd, setTempEnd] = useState<Date | undefined>(() => toDate(endDate));
+
+  useEffect(() => {
+    setTempStart(toDate(startDate));
+    setTempEnd(toDate(endDate));
+  }, [startDate, endDate]);
+
+  const isOpen = show;
+
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  const handleCancel = () => {
+    setTempStart(toDate(startDate));
+    setTempEnd(toDate(endDate));
+    handleClose();
+  };
+
+  const handleConfirm = () => {
+    const start = dayjs(tempStart).format("YYYY-MM-DD");
+    const end = dayjs(tempEnd).format("YYYY-MM-DD");
+
+    onConfirm?.(start, end);
+    handleClose();
+  };
+
+  const key = useMemo(
+    () => `${dayjs(startDate).format("YYYY-MM-DD")}_${dayjs(endDate).format("YYYY-MM-DD")}`,
+    [startDate, endDate],
+  );
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      onOpenChange={(v) => {
+        if (!v) handleClose();
+      }}
+    >
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay />
+
+        <BottomSheet.Content>
+          <View style={{ width: "100%" }}>
+            {/* Header */}
+            <View className="flex-row items-center justify-between w-full">
+              <Button size="sm" variant="tertiary" onPress={handleCancel}>
+                取消
+              </Button>
+
+              <Text className="text-gray-800 text-base font-medium">选择日期区间</Text>
+
+              <Button size="sm" onPress={handleConfirm}>
+                确认
+              </Button>
+            </View>
+
+            {/* Range Picker */}
+            <YzDateRangePicker
+              key={`${dayjs(startDate).valueOf()}_${dayjs(endDate).valueOf()}`}
+              showHeader={false}
+              startDate={tempStart}
+              endDate={tempEnd}
+              onValueChange={(start: Date, end: Date) => {
+                setTempStart(start);
+                setTempEnd(end);
+              }}
+            />
+          </View>
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </BottomSheet>
+  );
+}