日期范围选择

    1. import { useMemo, useCallback, useEffect } from 'react';
    2. import moment, { Moment, DurationInputArg2 } from 'moment';
    3. import { useSetState } from '../index';
    5. const formatType = 'YYYY-MM-DD HH:mm:ss';
    6. const formatDate = (date: string | Moment | undefined | null, formatString = formatType) =>
    7.   moment(date).format(formatString);
    9. export type RangeType = 'none' | 'same' | number | undefined;
    10. export interface RangeDateCfg {
    11.   /** 开始 结束时间 只有在 type === 'range' 有用 */
    12.   start?: string | null;
    13.   end?: string | null;
    14.   /** 区间 或 单个 时间 */
    15.   type: 'range' | 'date';
    16.   /** 范围 */
    17.   range?: RangeType;
    18.   /** 计算单位 */
    19.   unit?: DurationInputArg2;
    20.   /** 格式化参数 */
    21.   formatStr?: string;
    22. }
    24. export interface RangeDateState<T> {
    25.   range: RangeType;
    26.   date: T;
    27. }
    29. const getDateByType = (dateStr: string | string[]) => {
    30.   if (!Array.isArray(dateStr)) {
    31.     return [dateStr, dateStr];
    32.   }
    33.   return dateStr;
    34. };
    36. const useRangeDate = <T = string | string[]>(state: RangeDateCfg = {} as RangeDateCfg) => {
    37.   const { start, end, type = 'range', range } = state;
    38.   const initDate = ((type === 'range' ? [] : '') as unknown) as T;
    39.   /** none: 表示任何都不选择 */
    40.   const [rangeDate, setRangeDate] = useSetState<RangeDateState<T>>({
    41.     range,
    42.     date: initDate,
    43.   });
    45.   /** 处理计算格式 && 格式化参数 */
    46.   const unit = useMemo(() => state.unit ?? 'days', [state.unit]);
    47.   const fmtStr = useMemo(() => state.formatStr ?? 'YYYY-MM-DD', [state.formatStr]);
    49.   useEffect(() => {
    50.     if (range !== undefined && range !== 'none') {
    51.       console.log(unit, ';unit');
    52.       const newDate = moment().subtract(range, unit).format(fmtStr);
    53.       setRangeDate({ date: (newDate as unknown) as T });
    54.     }
    55.   }, [range]);
    57.   useEffect(() => {
    58.     /** same: 表示和 开始 及 结束重叠 */
    59.     if (start && end && type === 'range') {
    60.       setRangeDate({ range: 'same', date: ([start, end] as unknown) as T });
    61.     }
    62.   }, [start, end]);
    64.   /** setRange: 暂时不支持回调 */
    65.   const setRange = useCallback(
    66.     (val: RangeType, unitType?: DurationInputArg2, fStr?: string) => {
    67.       /** 当 type === 'range', same 回填初始状态 */
    68.       if (val === 'same') {
    69.         setRangeDate({ range: val, date: ([start, end] as unknown) as T });
    70.         return;
    71.       }
    73.       const u = unitType ?? unit;
    74.       const newFstr = fStr ?? fmtStr;
    75.       const sDate = formatDate(moment().subtract(val, u), fmtStr);
    76.       const eDate = formatDate(moment(), newFstr);
    77.       const fillDate = type === 'date' ? sDate : [sDate, eDate];
    78.       setRangeDate({ range: val, date: (fillDate as unknown) as T });
    79.     },
    80.     [setRangeDate, start, end],
    81.   );
    83.   const changeDate = useCallback(
    84.     <R>(_: R, dateStr: string | string[]) => {
    85.       const [startStr, endStr] = getDateByType(dateStr);
    86.       const isSame =
    87.         type === 'range'
    88.           ? startStr === start && endStr === end
    89.           : startStr === formatDate(moment().subtract(range, unit), fmtStr);
    90.       const newDate = type === 'range' ? [startStr, endStr] : startStr;
    92.       setRangeDate({
    93.         date: newDate as any,
    94.         range: isSame ? range ?? 'same' : 'none',
    95.       });
    96.     },
    97.     [setRangeDate, start, end],
    98.   );
    100.   return [rangeDate, { changeDate, setRange, setRangeDate }] as const;
    101. };
    103. export default useRangeDate;