@equinor/eds-core-react/dist/esm/components/Datepicker/calendars/RangeCalendar.js

The React implementation of the Equinor Design System

import { useLocale, useRangeCalendar } from 'react-aria';
import { useRangeCalendarState } from '@react-stately/calendar';
import { createCalendar } from '@internationalized/date';
import { CalendarGrid } from './CalendarGrid.js';
import { forwardRef, useState } from 'react';
import { CalendarHeader } from './CalendarHeader.js';
import { Popover } from '../../Popover/index.js';
import { CalendarWrapper } from './CalendarWrapper.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const RangeCalendar = /*#__PURE__*/forwardRef(({
  Header,
  Footer,
  ...props
}, ref) => {
  const [showYearPicker, setShowYearPicker] = useState(false);
  const [yearPickerPage, setYearPickerPage] = useState(0);
  const {
    locale
  } = useLocale();
  const state = useRangeCalendarState({
    ...props,
    locale,
    createCalendar
  });
  const {
    calendarProps,
    title
  } = useRangeCalendar(props, state, ref);
  return /*#__PURE__*/jsxs(CalendarWrapper, {
    ...calendarProps,
    ref: ref,
    children: [/*#__PURE__*/jsx(Popover.Header, {
      children: Header ? /*#__PURE__*/jsx(Header, {
        month: state.focusedDate.month,
        state: state,
        setMonth: month => state.setFocusedDate(state.focusedDate.set({
          month
        })),
        setYear: year => state.setFocusedDate(state.focusedDate.set({
          year
        })),
        year: state.focusedDate.year
      }) : /*#__PURE__*/jsx(CalendarHeader, {
        state: state,
        title: title,
        setShowYearPicker: setShowYearPicker,
        showYearPicker: showYearPicker,
        setYearPickerPage: setYearPickerPage
      })
    }), /*#__PURE__*/jsx(Popover.Content, {
      children: /*#__PURE__*/jsx(CalendarGrid, {
        state: state,
        setShowYearPicker: setShowYearPicker,
        showYearPicker: showYearPicker,
        yearPickerPage: yearPickerPage,
        setYearPickerPage: setYearPickerPage
      })
    }), Footer && /*#__PURE__*/jsx(Popover.Actions, {
      children: /*#__PURE__*/jsx(Footer, {
        month: state.focusedDate.month,
        state: state,
        setMonth: month => state.setFocusedDate(state.focusedDate.set({
          month
        })),
        setYear: year => state.setFocusedDate(state.focusedDate.set({
          year
        })),
        year: state.focusedDate.year
      })
    })]
  });
});
RangeCalendar.displayName = 'RangeCalendar';

export { RangeCalendar };