@coreui/react-pro
Version:
UI Components Library for React.js
140 lines (136 loc) • 10.4 kB
JavaScript
;
var React = require('react');
var index = require('../../_virtual/index.js');
var utils = require('./utils.js');
const CCalendarPanel = React.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] = React.useState([]);
React.useEffect(() => {
setListOfMonths(utils.createGroupsInArray(utils.getMonthsNames(locale), 4));
}, []);
const monthDetails = utils.getMonthDetails(calendarDate.getFullYear(), calendarDate.getMonth(), firstDayOfWeek);
const listOfYears = utils.createGroupsInArray(utils.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$1) => {
const { date } = days[0];
const isDisabled = utils.isDateDisabled(date, minDate, maxDate, disabledDates);
const isSelected = utils.isDateSelected(date, startDate, endDate);
return (React.createElement("tr", Object.assign({ className: index.default('calendar-row', selectionType === 'week' && {
disabled: isDisabled,
range: selectionType === 'week' && utils.isDateInRange(date, startDate, endDate),
'range-hover': selectionType === 'week' && hoverDate && selectEndDate
? utils.isDateInRange(date, startDate, hoverDate)
: utils.isDateInRange(date, hoverDate, endDate),
selected: isSelected,
}), key: index$1 }, (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 = utils.isDateDisabled(date, minDate, maxDate, disabledDates);
const isSelected = utils.isDateSelected(date, startDate, endDate);
return month === 'current' || showAdjacementDays ? (React.createElement("td", Object.assign({ className: index.default('calendar-cell', Object.assign(Object.assign({}, (selectionType === 'day' && {
clickable: month !== 'current' && selectAdjacementDays,
disabled: isDisabled,
'range-hover': month === 'current' &&
(hoverDate && selectEndDate
? utils.isDateInRange(date, startDate, hoverDate)
: utils.isDateInRange(date, hoverDate, endDate)),
range: month === 'current' && utils.isDateInRange(date, startDate, endDate),
selected: isSelected,
})), { [month]: true, today: month === 'current' && utils.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$1) => {
return (React.createElement("tr", { key: index$1 }, row.map((month, idx) => {
const monthNumber = index$1 * 3 + idx;
const date = new Date(calendarDate.getFullYear(), monthNumber, 1);
const isDisabled = utils.isMonthDisabled(date, minDate, maxDate, disabledDates);
const isSelected = utils.isMonthSelected(date, startDate, endDate);
return (React.createElement("td", Object.assign({ className: index.default('calendar-cell', {
disabled: isDisabled,
selected: isSelected,
'range-hover': selectionType === 'month' &&
(hoverDate && selectEndDate
? utils.isMonthInRange(date, startDate, hoverDate)
: utils.isMonthInRange(date, hoverDate, endDate)),
range: utils.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$1) => {
return (React.createElement("tr", { key: index$1 }, row.map((year, idx) => {
const date = new Date(year, 0, 1);
const isDisabled = utils.isYearDisabled(date, minDate, maxDate, disabledDates);
const isSelected = utils.isYearSelected(date, startDate, endDate);
return (React.createElement("td", Object.assign({ className: index.default('calendar-cell year', {
disabled: isDisabled,
selected: isSelected,
'range-hover': selectionType === 'year' &&
(hoverDate && selectEndDate
? utils.isYearInRange(date, startDate, hoverDate)
: utils.isYearInRange(date, hoverDate, endDate)),
range: utils.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';
exports.CCalendarPanel = CCalendarPanel;
//# sourceMappingURL=CCalendarPanel.js.map