@coreui/react-pro
Version:
UI Components Library for React.js
148 lines (145 loc) • 12 kB
JavaScript
import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import { createGroupsInArray, getMonthsNames, getMonthDetails, getYears, convertToDateObject, isDateDisabled, isDateSelected, isDateInRange, isToday, isMonthDisabled, isMonthSelected, isMonthInRange, isYearDisabled, isYearSelected, isYearInRange } from './utils.js';
var CCalendarPanel = forwardRef(function (_a, ref) {
var calendarDate = _a.calendarDate, dayFormat = _a.dayFormat, disabledDates = _a.disabledDates, endDate = _a.endDate, firstDayOfWeek = _a.firstDayOfWeek, hoverDate = _a.hoverDate, locale = _a.locale, maxDate = _a.maxDate, minDate = _a.minDate, onCalendarClick = _a.onCalendarClick, onCalendarKeyDown = _a.onCalendarKeyDown, onCalendarMouseEnter = _a.onCalendarMouseEnter, onCalendarMouseLeave = _a.onCalendarMouseLeave, selectAdjacementDays = _a.selectAdjacementDays, selectEndDate = _a.selectEndDate, selectionType = _a.selectionType, showWeekNumber = _a.showWeekNumber, showAdjacementDays = _a.showAdjacementDays, startDate = _a.startDate, view = _a.view, weekdayFormat = _a.weekdayFormat, weekNumbersLabel = _a.weekNumbersLabel;
var _b = useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
useEffect(function () {
setListOfMonths(createGroupsInArray(getMonthsNames(locale), 4));
}, []);
var monthDetails = getMonthDetails(calendarDate.getFullYear(), calendarDate.getMonth(), firstDayOfWeek);
var listOfYears = createGroupsInArray(getYears(calendarDate.getFullYear()), 4);
var 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(function (_a, idx) {
var date = _a.date;
return (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(function (week, index) {
var date = convertToDateObject(week.weekNumber === 0
? "".concat(calendarDate.getFullYear(), "W53")
: "".concat(calendarDate.getFullYear(), "W").concat(week.weekNumber), selectionType);
var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
var isSelected = isDateSelected(date, startDate, endDate);
var current = week.days.some(function (day) { return day.month === 'current'; });
return (React.createElement("tr", __assign({ className: classNames('calendar-row', {
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, tabIndex: selectionType === 'week' && current && !isDisabled ? 0 : -1 }, (isSelected && { 'aria-selected': true }), (selectionType === 'week' &&
!isDisabled && {
onBlur: function () { return onCalendarMouseLeave(); },
onClick: function () { return onCalendarClick(date); },
onFocus: function () { return onCalendarMouseEnter(date); },
onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
onMouseEnter: function () { return onCalendarMouseEnter(date); },
onMouseLeave: function () { return onCalendarMouseLeave(); },
})),
showWeekNumber && (React.createElement("th", { className: "calendar-cell-week-number" }, week.weekNumber === 0 ? 53 : week.weekNumber)),
week.days.map(function (_a, idx) {
var _b;
var date = _a.date, month = _a.month;
var isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates);
var isSelected = isDateSelected(date, startDate, endDate);
return month === 'current' || showAdjacementDays ? (React.createElement("td", __assign({ className: classNames('calendar-cell', __assign(__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,
})), (_b = {}, _b[month] = true, _b.today = month === 'current' && isToday(date), _b))), 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: function () { return onCalendarMouseLeave(); },
onClick: function () { return onCalendarClick(date); },
onFocus: function () { return onCalendarMouseEnter(date); },
onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
onMouseEnter: function () { return onCalendarMouseEnter(date); },
onMouseLeave: function () { return onCalendarMouseLeave(); },
}), (month !== 'current' &&
!selectAdjacementDays && {
onMouseEnter: function () { return 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(function (row, index) {
return (React.createElement("tr", { key: index }, row.map(function (month, idx) {
var monthNumber = index * 3 + idx;
var date = new Date(calendarDate.getFullYear(), monthNumber, 1);
var isDisabled = isMonthDisabled(date, minDate, maxDate, disabledDates);
var isSelected = isMonthSelected(date, startDate, endDate);
return (React.createElement("td", __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: function () { return onCalendarMouseLeave(); },
onClick: function () { return onCalendarClick(date); },
onFocus: function () { return onCalendarMouseEnter(date); },
onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
onMouseEnter: function () { return onCalendarMouseEnter(date); },
onMouseLeave: function () { return onCalendarMouseLeave(); },
})),
React.createElement("div", { className: "calendar-cell-inner" }, month)));
})));
}),
view === 'years' &&
listOfYears.map(function (row, index) {
return (React.createElement("tr", { key: index }, row.map(function (year, idx) {
var date = new Date(year, 0, 1);
var isDisabled = isYearDisabled(date, minDate, maxDate, disabledDates);
var isSelected = isYearSelected(date, startDate, endDate);
return (React.createElement("td", __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: function () { return onCalendarMouseLeave(); },
onClick: function () { return onCalendarClick(date); },
onFocus: function () { return onCalendarMouseEnter(date); },
onKeyDown: function (event) { return onCalendarKeyDown(event, date); },
onMouseEnter: function () { return onCalendarMouseEnter(date); },
onMouseLeave: function () { return 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