98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
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>
|
|
);
|
|
}
|