@coreui/react-pro
Version:
UI Components Library for React.js
138 lines (135 loc) • 10.4 kB
JavaScript
import React, { forwardRef, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import { createGroupsInArray, getMonthsNames, getMonthDetails, getYears, isDateDisabled, isDateSelected, isDateInRange, isToday, isMonthDisabled, isMonthSelected, isMonthInRange, isYearDisabled, isYearSelected, isYearInRange } from './utils.js';
const CCalendarPanel = forwardRef(({ calendarDate, dayFormat, disabledDates, endDate, firstDayOfWeek, hoverDate, locale, maxDate, minDate, onCalendarClick, onCalendarKeyDown, onCalendarMouseEnter, onCalendarMouseLeave, selectAdjacementDays, selectEndDate, selectionType, showWeekNumber, showAdjacementDays, startDate, view, weekdayFormat, weekNumbersLabel, }, ref) => {
const [listOfMonths, setListOfMonths] = useState([]);
useEffect(() => {
setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4));
}, []);
const monthDetails = getMonthDetails(calendarDate.getFullYear(), calendarDate.getMonth(), firstDayOfWeek);
const listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4);
const weekDays = monthDetails[0].days;
return (React.createElement("table", { ref: ref },
view === 'days' && (React.createElement("thead", null,
React.createElement("tr", null,
showWeekNumber && (React.createElement("th", { className: "calendar-cell" },
React.createElement("div", { className: "calendar-header-cell-inner" }, weekNumbersLabel))),
weekDays.map(({ date }, idx) => (React.createElement("th", { className: "calendar-cell", abbr: date.toLocaleDateString(locale, { weekday: 'long' }), key: idx },
React.createElement("div", { className: "calendar-header-cell-inner" }, typeof weekdayFormat === 'function'
? weekdayFormat(date)
: typeof weekdayFormat === 'string'
? date.toLocaleDateString(locale, { weekday: weekdayFormat })
: date
.toLocaleDateString(locale, { weekday: 'long' })
.slice(0, weekdayFormat)))))))),
React.createElement("tbody", null,
view === 'days' &&
monthDetails.map(({ week, days }, index) => {
const { date } = days[0];
const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
const isSelected = isDateSelected(date, startDate, endDate);
return (React.createElement("tr", Object.assign({ className: classNames('calendar-row', selectionType === 'week' && {
disabled: isDisabled,
range: selectionType === 'week' && isDateInRange(date, startDate, endDate),
'range-hover': selectionType === 'week' && hoverDate && selectEndDate
? isDateInRange(date, startDate, hoverDate)
: isDateInRange(date, hoverDate, endDate),
selected: isSelected,
}), key: index }, (selectionType === 'week' && isSelected && { 'aria-selected': true }), (selectionType === 'week' &&
!isDisabled && {
onBlur: () => onCalendarMouseLeave(),
onClick: () => onCalendarClick(date),
onFocus: () => onCalendarMouseEnter(date),
onKeyDown: (event) => onCalendarKeyDown(event, date),
onMouseEnter: () => onCalendarMouseEnter(date),
onMouseLeave: () => onCalendarMouseLeave(),
})),
showWeekNumber && React.createElement("th", { className: "calendar-cell-week-number" }, week.number),
days.map(({ date, month }, idx) => {
const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
const isSelected = isDateSelected(date, startDate, endDate);
return month === 'current' || showAdjacementDays ? (React.createElement("td", Object.assign({ className: classNames('calendar-cell', Object.assign(Object.assign({}, (selectionType === 'day' && {
clickable: month !== 'current' && selectAdjacementDays,
disabled: isDisabled,
'range-hover': month === 'current' &&
(hoverDate && selectEndDate
? isDateInRange(date, startDate, hoverDate)
: isDateInRange(date, hoverDate, endDate)),
range: month === 'current' && isDateInRange(date, startDate, endDate),
selected: isSelected,
})), { [month]: true, today: month === 'current' && isToday(date) })), key: idx, tabIndex: selectionType === 'day' &&
(month === 'current' || selectAdjacementDays) &&
!isDisabled
? 0
: -1, title: date.toLocaleDateString(locale) }, (isSelected && { 'aria-selected': true }), (selectionType === 'day' &&
(month === 'current' || selectAdjacementDays) && {
onBlur: () => onCalendarMouseLeave(),
onClick: () => onCalendarClick(date),
onFocus: () => onCalendarMouseEnter(date),
onKeyDown: (event) => onCalendarKeyDown(event, date),
onMouseEnter: () => onCalendarMouseEnter(date),
onMouseLeave: () => onCalendarMouseLeave(),
}), (month !== 'current' &&
!selectAdjacementDays && {
onMouseEnter: () => onCalendarMouseLeave(),
})),
React.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
? dayFormat(date)
: date.toLocaleDateString(locale, { day: dayFormat })))) : (React.createElement("td", { key: idx }));
})));
}),
view === 'months' &&
listOfMonths.map((row, index) => {
return (React.createElement("tr", { key: index }, row.map((month, idx) => {
const monthNumber = index * 3 + idx;
const date = new Date(calendarDate.getFullYear(), monthNumber, 1);
const isDisabled = isMonthDisabled(date, minDate, maxDate, disabledDates);
const isSelected = isMonthSelected(date, startDate, endDate);
return (React.createElement("td", Object.assign({ className: classNames('calendar-cell', {
disabled: isDisabled,
selected: isSelected,
'range-hover': selectionType === 'month' &&
(hoverDate && selectEndDate
? isMonthInRange(date, startDate, hoverDate)
: isMonthInRange(date, hoverDate, endDate)),
range: isMonthInRange(date, startDate, endDate),
}), key: idx, tabIndex: isDisabled ? -1 : 0 }, (isSelected && { 'aria-selected': true }), (!isDisabled && {
onBlur: () => onCalendarMouseLeave(),
onClick: () => onCalendarClick(date),
onFocus: () => onCalendarMouseEnter(date),
onKeyDown: (event) => onCalendarKeyDown(event, date),
onMouseEnter: () => onCalendarMouseEnter(date),
onMouseLeave: () => onCalendarMouseLeave(),
})),
React.createElement("div", { className: "calendar-cell-inner" }, month)));
})));
}),
view === 'years' &&
listOfYears.map((row, index) => {
return (React.createElement("tr", { key: index }, row.map((year, idx) => {
const date = new Date(year, 0, 1);
const isDisabled = isYearDisabled(date, minDate, maxDate, disabledDates);
const isSelected = isYearSelected(date, startDate, endDate);
return (React.createElement("td", Object.assign({ className: classNames('calendar-cell year', {
disabled: isDisabled,
selected: isSelected,
'range-hover': selectionType === 'year' &&
(hoverDate && selectEndDate
? isYearInRange(date, startDate, hoverDate)
: isYearInRange(date, hoverDate, endDate)),
range: isYearInRange(date, startDate, endDate),
}), key: idx, tabIndex: isDisabled ? -1 : 0 }, (isSelected && { 'aria-selected': true }), (!isDisabled && {
onBlur: () => onCalendarMouseLeave(),
onClick: () => onCalendarClick(date),
onFocus: () => onCalendarMouseEnter(date),
onKeyDown: (event) => onCalendarKeyDown(event, date),
onMouseEnter: () => onCalendarMouseEnter(date),
onMouseLeave: () => onCalendarMouseLeave(),
})),
React.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
})));
}))));
});
CCalendarPanel.displayName = 'CCalendarPanel';
export { CCalendarPanel };
//# sourceMappingURL=CCalendarPanel.js.map