@coreui/react-pro
Version:
UI Components Library for React.js
354 lines (350 loc) • 18.6 kB
JavaScript
;
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var CCalendarNavigation = require('./CCalendarNavigation.js');
var utils = require('./utils.js');
require('../../node_modules/tslib/tslib.es6.js');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var CCalendarPanel = require('./CCalendarPanel.js');
var CCalendar = React.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 = React.useRef(null);
var forkedRef = useForkedRef.useForkedRef(ref, calendarRef);
var _t = React.useState(null), _calendarDate = _t[0], setCalendarDate = _t[1];
React.useEffect(function () {
var viewMap = {
day: 'days',
week: 'days',
month: 'months',
year: 'years',
};
handleViewChange(viewMap[selectionType] || 'days');
}, [selectionType]);
React.useEffect(function () {
if (calendarDate === null) {
setCalendarDate(new Date());
return;
}
if (calendarDate) {
var date = utils.convertToDateObject(calendarDate, selectionType);
if (!utils.isSameDateAs(_calendarDate, date)) {
setCalendarDate(date);
}
}
}, [calendarDate]);
var _u = React.useState(startDate ? utils.convertToDateObject(startDate, selectionType) : null), _startDate = _u[0], setStartDate = _u[1];
var _v = React.useState(endDate ? utils.convertToDateObject(endDate, selectionType) : null), _endDate = _v[0], setEndDate = _v[1];
React.useEffect(function () {
var date = startDate ? utils.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]);
React.useEffect(function () {
var date = endDate ? utils.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 = React.useState(null), _hoverDate = _w[0], setHoverDate = _w[1];
var _x = React.useState(maxDate ? utils.convertToDateObject(maxDate, selectionType) : null), _maxDate = _x[0], setMaxDate = _x[1];
React.useEffect(function () {
setMaxDate(maxDate ? utils.convertToDateObject(maxDate, selectionType) : null);
}, [maxDate]);
var _y = React.useState(minDate ? utils.convertToDateObject(minDate, selectionType) : null), _minDate = _y[0], setMinDate = _y[1];
React.useEffect(function () {
setMinDate(minDate ? utils.convertToDateObject(minDate, selectionType) : null);
}, [minDate]);
var _z = React.useState(selectEndDate), _selectEndDate = _z[0], setSelectEndDate = _z[1];
React.useEffect(function () {
setSelectEndDate(selectEndDate);
}, [selectEndDate]);
var _0 = React.useState('days'), view = _0[0], setView = _0[1];
var _1 = React.useState(), focusOn = _1[0], setFocusOn = _1[1];
React.useEffect(function () {
var _a;
if (typeof focusOn === 'number') {
var list = utils.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 ? utils.convertToDateObject(date, selectionType) : null;
if (date) {
date = utils.setTimeFromDate(date, _startDate);
}
setStartDate(date);
onStartDateChange === null || onStartDateChange === void 0 ? void 0 : onStartDateChange(utils.getDateBySelectionType(date, selectionType));
};
var handleEndDateChange = function (date) {
date = date ? utils.convertToDateObject(date, selectionType) : null;
if (date) {
date = utils.setTimeFromDate(date, _endDate);
}
setEndDate(date);
onEndDateChange === null || onEndDateChange === void 0 ? void 0 : onEndDateChange(utils.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 (utils.isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
return;
}
if (range) {
if (_selectEndDate) {
handleSelectEndDateChange(false);
if (_startDate && _startDate > date) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
if (utils.isDisableDateInRange(_startDate, date, disabledDates)) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
handleEndDateChange(date);
return;
}
if (_endDate && _endDate < date) {
handleStartDateChange(null);
handleEndDateChange(null);
return;
}
if (utils.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 = utils.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 = utils.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 (utils.isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
return;
}
date = utils.setTimeFromDate(date, selectEndDate ? _endDate : _startDate);
setHoverDate(date);
if (date) {
onDateHover === null || onDateHover === void 0 ? void 0 : onDateHover(utils.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: index.default('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$1) {
var calendarDate = utils.getCalendarDate(_calendarDate, index$1, view);
return (React.createElement("div", { className: index.default('calendar', view), key: index$1 },
React.createElement(CCalendarNavigation.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.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$1); }, onCalendarKeyDown: function (event, date) { return handleCalendarKeyDown(event, date, index$1); }, onCalendarMouseEnter: handleCalendarMouseEnter, onCalendarMouseLeave: handleCalendarMouseLeave, order: index$1, 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';
exports.CCalendar = CCalendar;
//# sourceMappingURL=CCalendar.js.map