Stefan Hacker
156 lines
10 KiB
JavaScript
156 lines
10 KiB
JavaScript
define(["require", "exports", "react", "@fluentui/utilities", "@fluentui/date-time-utilities"], function (require, exports, React, utilities_1, date_time_utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.CalendarGridDayCell = void 0;
|
|
var CalendarGridDayCell = function (props) {
|
|
var _a;
|
|
var navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, allFocusable = props.allFocusable, strings = props.strings, activeDescendantId = props.activeDescendantId, navigatedDayRef = props.navigatedDayRef, calculateRoundedStyles = props.calculateRoundedStyles, weeks = props.weeks, classNames = props.classNames, day = props.day, dayIndex = props.dayIndex, weekIndex = props.weekIndex, weekCorners = props.weekCorners, ariaHidden = props.ariaHidden, customDayCellRef = props.customDayCellRef, dateRangeType = props.dateRangeType, daysToSelectInDayView = props.daysToSelectInDayView, onSelectDate = props.onSelectDate, restrictedDates = props.restrictedDates, minDate = props.minDate, maxDate = props.maxDate, onNavigateDate = props.onNavigateDate, getDayInfosInRangeOfDay = props.getDayInfosInRangeOfDay, getRefsFromDayInfos = props.getRefsFromDayInfos;
|
|
var cornerStyle = (_a = weekCorners === null || weekCorners === void 0 ? void 0 : weekCorners[weekIndex + '_' + dayIndex]) !== null && _a !== void 0 ? _a : '';
|
|
var isNavigatedDate = (0, date_time_utilities_1.compareDates)(navigatedDate, day.originalDate);
|
|
var navigateMonthEdge = function (ev, date) {
|
|
var targetDate = undefined;
|
|
var direction = 1; // by default search forward
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
if (ev.which === utilities_1.KeyCodes.up) {
|
|
targetDate = (0, date_time_utilities_1.addWeeks)(date, -1);
|
|
direction = -1;
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
}
|
|
else if (ev.which === utilities_1.KeyCodes.down) {
|
|
targetDate = (0, date_time_utilities_1.addWeeks)(date, 1);
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
}
|
|
else if (ev.which === (0, utilities_1.getRTLSafeKeyCode)(utilities_1.KeyCodes.left)) {
|
|
targetDate = (0, date_time_utilities_1.addDays)(date, -1);
|
|
direction = -1;
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
}
|
|
else if (ev.which === (0, utilities_1.getRTLSafeKeyCode)(utilities_1.KeyCodes.right)) {
|
|
targetDate = (0, date_time_utilities_1.addDays)(date, 1);
|
|
}
|
|
if (!targetDate) {
|
|
// if we couldn't find a target date at all, do nothing
|
|
return;
|
|
}
|
|
var findAvailableDateOptions = {
|
|
initialDate: date,
|
|
targetDate: targetDate,
|
|
direction: direction,
|
|
restrictedDates: restrictedDates,
|
|
minDate: minDate,
|
|
maxDate: maxDate,
|
|
};
|
|
// target date is restricted, search in whatever direction until finding the next possible date,
|
|
// stopping at boundaries
|
|
var nextDate = (0, date_time_utilities_1.findAvailableDate)(findAvailableDateOptions);
|
|
if (!nextDate) {
|
|
// if no dates available in initial direction, try going backwards
|
|
findAvailableDateOptions.direction = -direction;
|
|
nextDate = (0, date_time_utilities_1.findAvailableDate)(findAvailableDateOptions);
|
|
}
|
|
// if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we
|
|
// don't jump the view unnecessarily
|
|
var isInCurrentView = weeks &&
|
|
nextDate &&
|
|
weeks.slice(1, weeks.length - 1).some(function (week) {
|
|
return week.some(function (dayToCompare) {
|
|
return (0, date_time_utilities_1.compareDates)(dayToCompare.originalDate, nextDate);
|
|
});
|
|
});
|
|
if (isInCurrentView) {
|
|
return;
|
|
}
|
|
// else, fire navigation on the date to change the view to show it
|
|
if (nextDate) {
|
|
onNavigateDate(nextDate, true);
|
|
ev.preventDefault();
|
|
}
|
|
};
|
|
var onMouseOverDay = function (ev) {
|
|
var dayInfos = getDayInfosInRangeOfDay(day);
|
|
var dayRefs = getRefsFromDayInfos(dayInfos);
|
|
dayRefs.forEach(function (dayRef, index) {
|
|
var _a;
|
|
if (dayRef) {
|
|
dayRef.classList.add('ms-CalendarDay-hoverStyle');
|
|
if (!dayInfos[index].isSelected &&
|
|
dateRangeType === date_time_utilities_1.DateRangeType.Day &&
|
|
daysToSelectInDayView &&
|
|
daysToSelectInDayView > 1) {
|
|
// remove the static classes first to overwrite them
|
|
dayRef.classList.remove(classNames.bottomLeftCornerDate, classNames.bottomRightCornerDate, classNames.topLeftCornerDate, classNames.topRightCornerDate);
|
|
var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();
|
|
if (classNamesToAdd) {
|
|
(_a = dayRef.classList).add.apply(_a, classNamesToAdd.split(' '));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
var onMouseDownDay = function (ev) {
|
|
var dayInfos = getDayInfosInRangeOfDay(day);
|
|
var dayRefs = getRefsFromDayInfos(dayInfos);
|
|
dayRefs.forEach(function (dayRef) {
|
|
if (dayRef) {
|
|
dayRef.classList.add('ms-CalendarDay-pressedStyle');
|
|
}
|
|
});
|
|
};
|
|
var onMouseUpDay = function (ev) {
|
|
var dayInfos = getDayInfosInRangeOfDay(day);
|
|
var dayRefs = getRefsFromDayInfos(dayInfos);
|
|
dayRefs.forEach(function (dayRef) {
|
|
if (dayRef) {
|
|
dayRef.classList.remove('ms-CalendarDay-pressedStyle');
|
|
}
|
|
});
|
|
};
|
|
var onMouseOutDay = function (ev) {
|
|
var dayInfos = getDayInfosInRangeOfDay(day);
|
|
var dayRefs = getRefsFromDayInfos(dayInfos);
|
|
dayRefs.forEach(function (dayRef, index) {
|
|
var _a;
|
|
if (dayRef) {
|
|
dayRef.classList.remove('ms-CalendarDay-hoverStyle');
|
|
dayRef.classList.remove('ms-CalendarDay-pressedStyle');
|
|
if (!dayInfos[index].isSelected &&
|
|
dateRangeType === date_time_utilities_1.DateRangeType.Day &&
|
|
daysToSelectInDayView &&
|
|
daysToSelectInDayView > 1) {
|
|
var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();
|
|
if (classNamesToAdd) {
|
|
(_a = dayRef.classList).remove.apply(_a, classNamesToAdd.split(' '));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
var onDayKeyDown = function (ev) {
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
if (ev.which === utilities_1.KeyCodes.enter) {
|
|
onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(day.originalDate);
|
|
}
|
|
else {
|
|
navigateMonthEdge(ev, day.originalDate);
|
|
}
|
|
};
|
|
var ariaLabel = day.originalDate.getDate() +
|
|
', ' +
|
|
strings.months[day.originalDate.getMonth()] +
|
|
', ' +
|
|
day.originalDate.getFullYear();
|
|
if (day.isMarked) {
|
|
ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
|
|
}
|
|
return (React.createElement("td", { className: (0, utilities_1.css)(classNames.dayCell, weekCorners && cornerStyle, day.isSelected && classNames.daySelected, day.isSelected && 'ms-CalendarDay-daySelected', !day.isInBounds && classNames.dayOutsideBounds, !day.isInMonth && classNames.dayOutsideNavigatedMonth), ref: function (element) {
|
|
customDayCellRef === null || customDayCellRef === void 0 ? void 0 : customDayCellRef(element, day.originalDate, classNames);
|
|
day.setRef(element);
|
|
isNavigatedDate && (navigatedDayRef.current = element);
|
|
}, "aria-hidden": ariaHidden, "aria-disabled": !ariaHidden && !day.isInBounds, onClick: day.isInBounds && !ariaHidden ? day.onSelected : undefined, onMouseOver: !ariaHidden ? onMouseOverDay : undefined, onMouseDown: !ariaHidden ? onMouseDownDay : undefined, onMouseUp: !ariaHidden ? onMouseUpDay : undefined, onMouseOut: !ariaHidden ? onMouseOutDay : undefined, onKeyDown: !ariaHidden ? onDayKeyDown : undefined, role: "gridcell", tabIndex: isNavigatedDate ? 0 : undefined, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined)) },
|
|
React.createElement("button", { key: day.key + 'button', "aria-hidden": ariaHidden, className: (0, utilities_1.css)(classNames.dayButton, day.isToday && classNames.dayIsToday, day.isToday && 'ms-CalendarDay-dayIsToday'), "aria-label": ariaLabel, id: isNavigatedDate ? activeDescendantId : undefined, disabled: !ariaHidden && !day.isInBounds, type: "button", tabIndex: -1, "data-is-focusable": "false" },
|
|
React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)),
|
|
day.isMarked && React.createElement("div", { "aria-hidden": "true", className: classNames.dayMarker }))));
|
|
};
|
|
exports.CalendarGridDayCell = CalendarGridDayCell;
|
|
});
|
|
//# sourceMappingURL=CalendarGridDayCell.js.map
|