@dnb/eufemia/components/date-picker/hooks/useViews.js

DNB Eufemia Design System UI Library

"use client";

import { addMonths } from 'date-fns';
import { useCallback, useMemo, useRef, useState } from 'react';
export default function useViews({
  isRange,
  ...dates
}) {
  const [previousDates, setPreviousDates] = useState(dates);
  const [views, setViews] = useState(getViews({
    ...dates,
    isRange
  }));
  const hasClickedCalendarDay = useRef(false);
  const hasDateChanges = useMemo(() => Object.keys(dates).some(date => previousDates[date] !== dates[date]), [dates, previousDates]);
  const setHasClickedCalendarDay = useCallback(hasClicked => hasClickedCalendarDay.current = hasClicked, []);
  if (hasDateChanges) {
    setPreviousDates(dates);
    if (hasClickedCalendarDay.current) {
      setHasClickedCalendarDay(false);
    } else {
      const updatedViews = getViews({
        ...dates,
        isRange
      });
      setViews(updatedViews);
    }
  }
  function updateViews(views, cb = null) {
    setViews(views);
    cb === null || cb === void 0 || cb();
  }
  return {
    views,
    setViews: updateViews,
    setHasClickedCalendarDay
  };
}
export function getViews({
  isRange,
  ...dates
}) {
  return isRange ? [{
    nr: 0,
    month: getMonthView({
      months: dates,
      nr: 0
    })
  }, {
    nr: 1,
    month: getMonthView({
      months: dates,
      nr: 1
    })
  }] : [{
    nr: 0,
    month: getMonthView({
      months: dates,
      nr: 0
    })
  }];
}
function getMonthView({
  months,
  nr
}) {
  const {
    startMonth,
    endMonth
  } = months;
  if (startMonth && nr === 0) {
    return startMonth;
  }
  if (endMonth && nr === 1) {
    return endMonth;
  }
  const fallbackMonth = startMonth || new Date();
  return addMonths(fallbackMonth, nr);
}
//# sourceMappingURL=useViews.js.map