@fluentui/react
Version:
Reusable React components for building web experiences.
156 lines • 10.2 kB
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