diff --git a/src/components/FilterPopup/index.tsx b/src/components/FilterPopup/index.tsx index 1891814..02f800f 100644 --- a/src/components/FilterPopup/index.tsx +++ b/src/components/FilterPopup/index.tsx @@ -32,36 +32,52 @@ const FilterPopup = (props: FilterPopupProps) => { const { timeBubbleData, gamesNum } = store; /** - * @description 处理字典选项 - * @param dictionaryValue 字典选项 - * @returns 选项列表 + * @description 日期排序 + * @param a 日期字符串 + * @param b 日期字符串 + * @returns 日期差值 */ - // const [selectedDates, setSelectedDates] = useState([]) + const sortByDate = (a: string, b: string) => { + return new Date(a).getTime() - new Date(b).getTime(); + } const handleDateChange = (dates: Date[]) => { - let times: String[] = []; - if (dates.length > 1) { - times = [dayjs(dates[0]).format('YYYY-MM-DD'), dayjs(dates[dates.length - 1]).format('YYYY-MM-DD')] - onChange({ - 'dateRange': times, - }) + // ================================ 日期处理 ================================ + // 默认是是当前日期为开始日期,结束日期为当前日期 + 30天 + const defaultDateRange = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'M').format('YYYY-MM-DD')]; + // 处理空数组的情况 + if (!dates.length) { + onChange({ dateRange: defaultDateRange }); return; } - if (Array.isArray(dates)) { - - const currentDay = dayjs(dates[0]).format('YYYY-MM-DD'); - if (filterOptions.dateRange.length === 0 || filterOptions.dateRange.length === 2) { - times.push(currentDay); - } else { - times = [...filterOptions.dateRange, currentDay].sort( - (a, b) => new Date(a).getTime() - new Date(b).getTime() - ) - } + // 处理多日期范围选择(超过1个日期) + if (dates.length > 1) { + const dateRange = [ + dayjs(dates[0]).format('YYYY-MM-DD'), + dayjs(dates[dates.length - 1]).format('YYYY-MM-DD') + ]; + onChange({ dateRange }); + return; } - - onChange({ - 'dateRange': times, - }) + // 处理单个日期选择 + const currentFilterOptionsDateRange = Array.isArray(filterOptions?.dateRange) + ? filterOptions.dateRange + : defaultDateRange; + // 当前选择的日期 + const currentDay = dayjs(dates?.[0]).format('YYYY-MM-DD'); + // 当 dates 每次只返回单个日期时,使用已选范围判断是“第一次点”还是“第二次点” + let dateRange: string[]; + if ( + currentFilterOptionsDateRange.length === 2 && + currentFilterOptionsDateRange?.[0] === currentFilterOptionsDateRange?.[1] + ) { + // 已是单日,点击当前日期扩展为日期范围 + dateRange = [currentFilterOptionsDateRange[0], currentDay].sort(sortByDate); + } else { + // 默认区间/已选区间/异常状态,点击当前日期统一收敛为单日 + dateRange = [currentDay, currentDay]; + } + onChange({ dateRange }); } const handleOptions = (dictionaryValue: []) => {