118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
import React, { useState, useEffect, useRef } from "react";
|
|
import CommonPopup from "@/components/CommonPopup";
|
|
import Taro from "@tarojs/taro";
|
|
import { View } from "@tarojs/components";
|
|
import CalendarUI, {
|
|
CalendarUIRef,
|
|
} from "@/components/Picker/CalendarUI/CalendarUI";
|
|
import dayjs from "dayjs";
|
|
import styles from "../CalendarDialog/index.module.scss";
|
|
export interface DayDialogProps {
|
|
value?: Date | Date[];
|
|
searchType?: "single" | "range" | "multiple";
|
|
onChange?: (date: string | string[]) => void;
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
title?: React.ReactNode;
|
|
}
|
|
|
|
const DayDialog: React.FC<DayDialogProps> = ({
|
|
visible,
|
|
searchType,
|
|
onClose,
|
|
title,
|
|
value,
|
|
onChange,
|
|
}) => {
|
|
const [selected, setSelected] = useState<Date | Date[]>(value || new Date());
|
|
const calendarRef = useRef<CalendarUIRef>(null);
|
|
const [type, setType] = useState<"year" | "month" | "time">("year");
|
|
const [pendingJump, setPendingJump] = useState<{
|
|
year: number;
|
|
month: number;
|
|
} | null>(null);
|
|
const handleConfirm = () => {
|
|
console.log(selected, 'selectedselected');
|
|
if (!selected) {
|
|
Taro.showToast({
|
|
title: '请选择日期',
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
const finalDate = dayjs(selected as Date).format("YYYY-MM-DD");
|
|
if (onChange){
|
|
onChange(finalDate)
|
|
}
|
|
onClose();
|
|
};
|
|
const dialogClose = () => {
|
|
setType("year");
|
|
onClose();
|
|
}
|
|
|
|
const handleChange = (d: Date | Date[]) => {
|
|
if (Array.isArray(d)) {
|
|
setSelected(d[0]);
|
|
} else {
|
|
setSelected(d);
|
|
}
|
|
};
|
|
const onHeaderClick = (date: Date) => {
|
|
console.log("onHeaderClick", date);
|
|
setSelected(date);
|
|
setType("month");
|
|
};
|
|
const getConfirmText = () => {
|
|
return "完成"
|
|
};
|
|
const onCancel = () => {
|
|
onClose();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (visible && value) {
|
|
setSelected(value || new Date());
|
|
}
|
|
}, [value, visible]);
|
|
|
|
useEffect(() => {
|
|
if (type === "year" && pendingJump && calendarRef.current) {
|
|
calendarRef.current.jumpTo(pendingJump.year, pendingJump.month);
|
|
setPendingJump(null);
|
|
}
|
|
}, [type, pendingJump]);
|
|
|
|
|
|
return (
|
|
<CommonPopup
|
|
visible={visible}
|
|
onClose={dialogClose}
|
|
onCancel={onCancel}
|
|
showHeader={!!title}
|
|
title={title}
|
|
hideFooter={false}
|
|
cancelText="取消"
|
|
confirmText={getConfirmText()}
|
|
onConfirm={handleConfirm}
|
|
className={styles["calendar-popup"]}
|
|
position="bottom"
|
|
round
|
|
zIndex={1000}
|
|
>
|
|
<View className={styles["calendar-container"]}>
|
|
<CalendarUI
|
|
ref={calendarRef}
|
|
type={searchType}
|
|
value={selected}
|
|
onChange={handleChange}
|
|
showQuickActions={false}
|
|
onHeaderClick={onHeaderClick}
|
|
/>
|
|
</View>
|
|
</CommonPopup>
|
|
);
|
|
};
|
|
|
|
export default DayDialog;
|