@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
73 lines (68 loc) • 2.12 kB
JavaScript
import { useLocale, useCalendarGrid } from 'react-aria';
import { getWeeksInMonth } from '@internationalized/date';
import { CalendarCell } from './CalendarCell.js';
import { YearGrid } from './YearGrid.js';
import { jsx, jsxs } from 'react/jsx-runtime';
/* eslint-disable react/no-array-index-key */
/**
* The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
*/
function CalendarGrid({
state,
showYearPicker,
setShowYearPicker,
yearPickerPage,
setYearPickerPage,
...props
}) {
const {
locale
} = useLocale();
const {
gridProps,
headerProps,
weekDays
} = useCalendarGrid({
...props,
weekdayStyle: 'long'
}, state);
// Get the number of weeks in the month so that we can render the proper number of rows.
const howManyWeeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
const weeksInMonthArray = [...new Array(howManyWeeksInMonth).keys()];
return showYearPicker ? /*#__PURE__*/jsx(YearGrid, {
year: state.focusedDate.year,
setFocusedYear: year => {
state.setFocusedDate(state.focusedDate.set({
year
}));
setShowYearPicker(false);
},
yearPickerPage: yearPickerPage,
setYearPickerPage: setYearPickerPage
}) : /*#__PURE__*/jsxs("table", {
...gridProps,
style: {
borderSpacing: '0px'
},
children: [/*#__PURE__*/jsx("thead", {
...headerProps,
children: /*#__PURE__*/jsx("tr", {
children: weekDays.map((day, index) => /*#__PURE__*/jsx("th", {
style: {
textAlign: 'center'
},
abbr: day,
children: day.charAt(0).toLocaleUpperCase()
}, `${day}-${index}`))
})
}), /*#__PURE__*/jsx("tbody", {
children: weeksInMonthArray.map(weekIndex => /*#__PURE__*/jsx("tr", {
children: state.getDatesInWeek(weekIndex).map((date, i) => date ? /*#__PURE__*/jsx(CalendarCell, {
state: state,
date: date
}, date.toString()) : /*#__PURE__*/jsx("td", {}, `placeholder-${i}`))
}, weekIndex))
})]
});
}
export { CalendarGrid };