@coreui/react-pro
Version:
UI Components Library for React.js
352 lines (349 loc) • 18.5 kB
JavaScript
import React, { forwardRef, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CCalendarNavigation } from './CCalendarNavigation.js';
import { convertToDateObject, isSameDateAs, getSelectableDates, getCalendarDate, isDateDisabled, setTimeFromDate, getDateBySelectionType, isDisableDateInRange } from './utils.js';
import '../../node_modules/tslib/tslib.es6.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { CCalendarPanel } from './CCalendarPanel.js';
var CCalendar = forwardRef(function (_a, ref) {
var _b;
var _c = _a.ariaNavNextMonthLabel, ariaNavNextMonthLabel = _c === void 0 ? 'Next month' : _c, _d = _a.ariaNavNextYearLabel, ariaNavNextYearLabel = _d === void 0 ? 'Next year' : _d, _e = _a.ariaNavPrevMonthLabel, ariaNavPrevMonthLabel = _e === void 0 ? 'Previous month' : _e, _f = _a.ariaNavPrevYearLabel, ariaNavPrevYearLabel = _f === void 0 ? 'Previous year' : _f, startDate = _a.startDate, endDate = _a.endDate, _g = _a.calendarDate, calendarDate = _g === void 0 ? startDate || endDate || null : _g, _h = _a.calendars, calendars = _h === void 0 ? 1 : _h, className = _a.className, _j = _a.dayFormat, dayFormat = _j === void 0 ? 'numeric' : _j, disabledDates = _a.disabledDates, _k = _a.firstDayOfWeek, firstDayOfWeek = _k === void 0 ? 1 : _k, _l = _a.locale, locale = _l === void 0 ? 'default' : _l, maxDate = _a.maxDate, minDate = _a.minDate, _m = _a.navigation, navigation = _m === void 0 ? true : _m, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, _o = _a.selectAdjacementDays, selectAdjacementDays = _o === void 0 ? false : _o, selectEndDate = _a.selectEndDate, _p = _a.selectionType, selectionType = _p === void 0 ? 'day' : _p, _q = _a.showAdjacementDays, showAdjacementDays = _q === void 0 ? true : _q, _r = _a.showWeekNumber, showWeekNumber = _r === void 0 ? false : _r, _s = _a.weekdayFormat, weekdayFormat = _s === void 0 ? 2 : _s, weekNumbersLabel = _a.weekNumbersLabel, onCalendarDateChange = _a.onCalendarDateChange, onDateHover = _a.onDateHover, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
var calendarRef = useRef(null);
var forkedRef = useForkedRef(ref, calendarRef);
var _t = useState(null), _calendarDate = _t[0], setCalendarDate = _t[1];
useEffect(function () {
var viewMap = {
day: 'days',
week: 'days',
month: 'months',
year: 'years',
};
handleViewChange(viewMap[selectionType] || 'days');
}, [selectionType]);
useEffect(function () {
if (calendarDate === null) {
setCalendarDate(new Date());
return;
}
if (calendarDate) {
var date = convertToDateObject(calendarDate, selectionType);
if (!isSameDateAs(_calendarDate, date)) {
setCalendarDate(date);
}
}
}, [calendarDate]);
var _u = useState(startDate ? convertToDateObject(startDate, selectionType) : null), _startDate = _u[0], setStartDate = _u[1];
var _v = useState(endDate ? convertToDateObject(endDate, selectionType) : null), _endDate = _v[0], setEndDate = _v[1];
useEffect(function () {
var date = startDate ? convertToDateObject(startDate, selectionType) : null;
if ((date === null || date === void 0 ? void 0 : date.getTime()) !== (_startDate === null || _startDate === void 0 ? void 0 : _startDate.getTime())) {
setStartDate(date);
}
}, [startDate]);
useEffect(function () {
var date = endDate ? convertToDateObject(endDate, selectionType) : null;
if ((date === null || date === void 0 ? void 0 : date.getTime()) !== (_endDate === null || _endDate === void 0 ? void 0 : _endDate.getTime())) {
setEndDate(date);
}
}, [endDate]);
var _w = useState(null), _hoverDate = _w[0], setHoverDate = _w[1];
var _x = useState(maxDate ? convertToDateObject(maxDate, selectionType) : null), _maxDate = _x[0], setMaxDate = _x[1];
useEffect(function () {
setMaxDate(maxDate ? convertToDateObject(maxDate, selectionType) : null);
}, [maxDate]);
var _y = useState(minDate ? convertToDateObject(minDate, selectionType) : null), _minDate = _y[0], setMinDate = _y[1];
useEffect(function () {
setMinDate(minDate ? convertToDateObject(minDate, selectionType) : null);
}, [minDate]);
var _z = useState(selectEndDate), _selectEndDate = _z[0], setSelectEndDate = _z[1];
useEffect(function () {
setSelectEndDate(selectEndDate);
}, [selectEndDate]);
var _0 = useState('days'), view = _0[0], setView = _0[1];
var _1 = useState(), focusOn = _1[0], setFocusOn = _1[1];
useEffect(function () {
var _a;
if (typeof focusOn === 'number') {
var list = getSelectableDates(calendarRef.current);
(_a = list[focusOn]) === null || _a === void 0 ? void 0 : _a.focus();
setFocusOn(undefined);
}
}, [view]);
var setCalendarPage = function (years, months, setMonth) {
if (months === void 0) { months = 0; }
if (_calendarDate === null) {
return;
}
var year = _calendarDate.getFullYear();
var month = _calendarDate.getMonth();
var d = new Date(year, month, 1);
if (years) {
d.setFullYear(d.getFullYear() + years);
}
if (months) {
d.setMonth(d.getMonth() + months);
}
setCalendarDate(d);
onCalendarDateChange === null || onCalendarDateChange === void 0 ? void 0 : onCalendarDateChange(d);
};
var handleStartDateChange = function (date) {
date = date ? convertToDateObject(date, selectionType) : null;
if (date) {
date = setTimeFromDate(date, _startDate);
}
setStartDate(date);
onStartDateChange === null || onStartDateChange === void 0 ? void 0 : onStartDateChange(getDateBySelectionType(date, selectionType));
};
var handleEndDateChange = function (date) {
date = date ? convertToDateObject(date, selectionType) : null;
if (date) {
date = setTimeFromDate(date, _endDate);
}
setEndDate(date);
onEndDateChange === null || onEndDateChange === void 0 ? void 0 : onEndDateChange(getDateBySelectionType(date, selectionType));
};
var handleSelectEndDateChange = function (value) {
setSelectEndDate(value);
onSelectEndChange === null || onSelectEndChange === void 0 ? void 0 : onSelectEndChange(value);
};
var handleViewChange = function (value) {
setView(value);
onViewChanged === null || onViewChanged === void 0 ? void 0 : onViewChanged(value);
};
var handleCalendarClick = function (date, index) {
var _date = new Date(date);
if (view === 'days') {
setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
}
if (view === 'months' && selectionType !== 'month') {
setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
handleViewChange('days');
return;
}
if (view === 'years' && selectionType !== 'year') {
setCalendarDate(index ? new Date(_date.setFullYear(_date.getFullYear() - index)) : _date);
handleViewChange('months');
return;
}
// Allow to change the calendarDate but not startDate or endDate
if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
return;
}
if (range) {
if (_selectEndDate) {
handleSelectEndDateChange(false);
if (_startDate && _startDate > date) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
if (isDisableDateInRange(_startDate, date, disabledDates)) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
handleEndDateChange(date);
return;
}
if (_endDate && _endDate < date) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
if (isDisableDateInRange(date, _endDate, disabledDates)) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
handleSelectEndDateChange(true);
handleStartDateChange(date);
return;
}
handleStartDateChange(date);
};
var handleCalendarKeyDown = function (event, date, index) {
if (event.code === 'Space' || event.key === 'Enter') {
event.preventDefault();
if ((view === 'months' && selectionType !== 'month') ||
(view === 'years' && selectionType !== 'year')) {
setFocusOn(0);
}
handleCalendarClick(date, index);
}
if (event.key === 'ArrowRight' ||
event.key === 'ArrowLeft' ||
event.key === 'ArrowUp' ||
event.key === 'ArrowDown') {
event.preventDefault();
if (_maxDate &&
date >= _maxDate &&
(event.key === 'ArrowRight' || event.key === 'ArrowDown')) {
return;
}
if (_minDate &&
date <= _minDate &&
(event.key === 'ArrowLeft' || event.key === 'ArrowUp')) {
return;
}
var element_1 = event.target;
if (selectionType === 'week' && element_1.tabIndex === -1) {
element_1 = element_1.closest('tr[tabindex="0"]');
}
var list_1 = getSelectableDates(calendarRef.current);
var index_1 = list_1.indexOf(element_1);
var first = index_1 === 0;
var last = index_1 === list_1.length - 1;
var toBoundary = {
start: index_1,
end: list_1.length - (index_1 + 1),
};
var gap_1 = {
ArrowRight: 1,
ArrowLeft: -1,
ArrowUp: selectionType === 'week' && view === 'days' ? -1 : view === 'days' ? -7 : -3,
ArrowDown: selectionType === 'week' && view === 'days' ? 1 : view === 'days' ? 7 : 3,
};
if ((event.key === 'ArrowRight' && last) ||
(event.key === 'ArrowDown' && toBoundary['end'] < gap_1['ArrowDown']) ||
(event.key === 'ArrowLeft' && first) ||
(event.key === 'ArrowUp' && toBoundary['start'] < Math.abs(gap_1['ArrowUp']))) {
if (view === 'days') {
setCalendarPage(0, event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
}
if (view === 'months') {
setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1);
}
if (view === 'years') {
setCalendarPage(event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 10 : -10);
}
setTimeout(function () {
var _a, _b;
var _list = getSelectableDates((_a = element_1.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode);
if (_list.length > 0 && event.key === 'ArrowRight') {
_list[0].focus();
}
if (_list.length > 0 && event.key === 'ArrowLeft') {
(_b = _list.at(-1)) === null || _b === void 0 ? void 0 : _b.focus();
}
if (_list.length > 0 && event.key === 'ArrowDown') {
_list[gap_1['ArrowDown'] - (list_1.length - index_1)].focus();
}
if (_list.length > 0 && event.key === 'ArrowUp') {
_list[_list.length - (Math.abs(gap_1['ArrowUp']) + 1 - (index_1 + 1))].focus();
}
}, 1);
return;
}
if (list_1[index_1 + gap_1[event.key]].tabIndex === 0) {
list_1[index_1 + gap_1[event.key]].focus();
return;
}
for (var i = index_1; i < list_1.length; event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--) {
if (list_1[i + gap_1[event.key]].tabIndex === 0) {
list_1[i + gap_1[event.key]].focus();
break;
}
}
}
};
var handleCalendarMouseEnter = function (date) {
if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
return;
}
date = setTimeFromDate(date, selectEndDate ? _endDate : _startDate);
setHoverDate(date);
if (date) {
onDateHover === null || onDateHover === void 0 ? void 0 : onDateHover(getDateBySelectionType(date, selectionType));
}
};
var handleCalendarMouseLeave = function () {
setHoverDate(null);
onDateHover === null || onDateHover === void 0 ? void 0 : onDateHover(null);
};
var handleNavigationOnClick = function (direction, double) {
if (double === void 0) { double = false; }
if (direction === 'prev') {
if (double) {
setCalendarPage(view === 'years' ? -10 : -1);
return;
}
if (view !== 'days') {
setCalendarPage(-1);
return;
}
setCalendarPage(0, -1);
return;
}
if (direction === 'next') {
if (double) {
setCalendarPage(view === 'years' ? 10 : 1);
return;
}
if (view !== 'days') {
setCalendarPage(1);
return;
}
setCalendarPage(0, 1);
return;
}
};
return (React.createElement("div", { className: classNames('calendars', (_b = {},
_b["select-".concat(selectionType)] = selectionType && view === 'days',
_b['show-week-numbers'] = showWeekNumber,
_b), className), ref: forkedRef }, _calendarDate &&
Array.from({ length: calendars }, function (_, index) {
var calendarDate = getCalendarDate(_calendarDate, index, view);
return (React.createElement("div", { className: classNames('calendar', view), key: index },
React.createElement(CCalendarNavigation, { ariaNavNextMonthLabel: ariaNavNextMonthLabel, ariaNavNextYearLabel: ariaNavNextYearLabel, ariaNavPrevMonthLabel: ariaNavPrevMonthLabel, ariaNavPrevYearLabel: ariaNavPrevYearLabel, calendarDate: calendarDate, locale: locale, navigation: navigation, navNextDoubleIcon: navNextDoubleIcon, navNextIcon: navNextIcon, navPrevDoubleIcon: navPrevDoubleIcon, navPrevIcon: navPrevIcon, navYearFirst: navYearFirst, onMonthClick: function () { return handleViewChange('months'); }, onNavigationClick: handleNavigationOnClick, onYearClick: function () { return handleViewChange('years'); }, view: view }),
React.createElement(CCalendarPanel, { calendarDate: calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCalendarClick: function (date) { return handleCalendarClick(date, index); }, onCalendarKeyDown: function (event, date) { return handleCalendarKeyDown(event, date, index); }, onCalendarMouseEnter: handleCalendarMouseEnter, onCalendarMouseLeave: handleCalendarMouseLeave, order: index, selectAdjacementDays: selectAdjacementDays, selectEndDate: _selectEndDate, selectionType: selectionType, showAdjacementDays: showAdjacementDays, showWeekNumber: showWeekNumber, startDate: _startDate, view: view, weekdayFormat: weekdayFormat, weekNumbersLabel: weekNumbersLabel })));
})));
});
CCalendar.propTypes = {
ariaNavNextMonthLabel: PropTypes.string,
ariaNavNextYearLabel: PropTypes.string,
ariaNavPrevMonthLabel: PropTypes.string,
ariaNavPrevYearLabel: PropTypes.string,
className: PropTypes.string,
calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
calendars: PropTypes.number,
dayFormat: PropTypes.oneOfType([
PropTypes.func,
PropTypes.oneOf(['2-digit', 'numeric']),
]),
disabledDates: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.array, PropTypes.func]),
endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
firstDayOfWeek: PropTypes.number,
locale: PropTypes.string,
maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
navigation: PropTypes.bool,
navNextIcon: PropTypes.node,
navNextDoubleIcon: PropTypes.node,
navPrevIcon: PropTypes.node,
navPrevDoubleIcon: PropTypes.node,
navYearFirst: PropTypes.bool,
range: PropTypes.bool,
selectAdjacementDays: PropTypes.bool,
selectEndDate: PropTypes.bool,
selectionType: PropTypes.oneOf(['day', 'week', 'month', 'year']),
showAdjacementDays: PropTypes.bool,
showWeekNumber: PropTypes.bool,
startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
weekdayFormat: PropTypes.oneOfType([
PropTypes.func,
PropTypes.number,
PropTypes.oneOf(['long', 'narrow', 'short']),
]),
weekNumbersLabel: PropTypes.string,
onDateHover: PropTypes.func,
onCalendarDateChange: PropTypes.func,
onEndDateChange: PropTypes.func,
onSelectEndChange: PropTypes.func,
onStartDateChange: PropTypes.func,
onViewChanged: PropTypes.func,
};
CCalendar.displayName = 'CCalendar';
export { CCalendar };
//# sourceMappingURL=CCalendar.js.map