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

The React implementation of the Equinor Design System

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

const Calendar = /*#__PURE__*/forwardRef(({
  Header,
  Footer,
  ...props
}, ref) => {
  const [showYearPicker, setShowYearPicker] = useState(false);
  const [yearPickerPage, setYearPickerPage] = useState(0);
  const {
    locale
  } = useLocale();
  const calendarState = useCalendarState({
    ...props,
    locale,
    createCalendar
  });
  const {
    calendarProps,
    prevButtonProps,
    nextButtonProps,
    title
  } = useCalendar(props, calendarState);
  return /*#__PURE__*/jsxs(CalendarWrapper, {
    ref: ref,
    ...calendarProps,
    children: [/*#__PURE__*/jsx(Popover.Header, {
      style: {
        width: '100%'
      },
      children: Header ? /*#__PURE__*/jsx(Header, {
        month: calendarState.focusedDate.month,
        state: calendarState,
        setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
          month
        })),
        setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
          year
        })),
        year: calendarState.focusedDate.year
      }) : /*#__PURE__*/jsx(CalendarHeader, {
        state: calendarState,
        title: title,
        previousMonthDisabled: prevButtonProps.isDisabled,
        nextMonthDisabled: nextButtonProps.isDisabled,
        setShowYearPicker: setShowYearPicker,
        showYearPicker: showYearPicker,
        setYearPickerPage: setYearPickerPage
      })
    }), /*#__PURE__*/jsx(Popover.Content, {
      className: "calendar",
      style: {
        height: 'fit-content'
      },
      children: /*#__PURE__*/jsx(CalendarGrid, {
        state: calendarState,
        setShowYearPicker: setShowYearPicker,
        showYearPicker: showYearPicker,
        yearPickerPage: yearPickerPage,
        setYearPickerPage: setYearPickerPage
      })
    }), Footer && /*#__PURE__*/jsx(Popover.Actions, {
      children: /*#__PURE__*/jsx(Footer, {
        month: calendarState.focusedDate.month,
        state: calendarState,
        setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
          month
        })),
        setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
          year
        })),
        year: calendarState.focusedDate.year
      })
    })]
  });
});
Calendar.displayName = 'Calendar';

export { Calendar };