@atlaskit/calendar/dist/es2019/internal/hooks/use-handle-date-select.js

An interactive calendar for date selection experiences.

import { useCallback, useEffect, useRef } from 'react';
import { arrowKeys } from '../constants';
import dateToString from '../utils/date-to-string';

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default function useHandleDateSelect({
  day: [dayValue],
  month: [monthValue],
  year: [yearValue],
  selected: [selectedValue, setSelectedValue],
  previous: [, setPreviouslySelectedValue],
  onSelect,
  navigate
}) {
  const dateRef = useRef({
    day: dayValue,
    month: monthValue,
    year: yearValue
  });
  useEffect(() => {
    dateRef.current = {
      day: dayValue,
      month: monthValue,
      year: yearValue
    };
  }, [dayValue, monthValue, yearValue]);
  const triggerOnSelect = useCallback(({
    year,
    month,
    day
  }) => {
    const iso = dateToString({
      year,
      month,
      day
    });
    onSelect({
      day,
      month,
      year,
      iso
    });
    setPreviouslySelectedValue(selectedValue);
    setSelectedValue([iso]);
  }, [onSelect, selectedValue, setPreviouslySelectedValue, setSelectedValue]);
  const handleClickDay = useCallback(({
    year,
    month,
    day
  }) => {
    triggerOnSelect({
      year,
      month,
      day
    });
  }, [triggerOnSelect]);
  const handleContainerKeyDown = useCallback(e => {
    const {
      key
    } = e;
    const arrowKey = arrowKeys[key];
    if (key === 'Enter' || key === ' ') {
      e.preventDefault();
      triggerOnSelect(dateRef.current);
    } else if (arrowKey) {
      e.preventDefault();
      navigate(arrowKey);
    }
  }, [triggerOnSelect, navigate]);
  return {
    handleClickDay,
    handleContainerKeyDown
  };
}