Stefan Hacker
82 lines
7.1 KiB
JavaScript
82 lines
7.1 KiB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/utilities", "../../../Icon", "@fluentui/date-time-utilities", "../../CalendarDayGrid/CalendarDayGrid", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, utilities_1, Icon_1, date_time_utilities_1, CalendarDayGrid_1, react_hooks_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.CalendarDayBase = void 0;
|
|
var getClassNames = (0, utilities_1.classNamesFunction)();
|
|
var CalendarDayBase = function (props) {
|
|
var dayGrid = React.useRef(null);
|
|
React.useImperativeHandle(props.componentRef, function () { return ({
|
|
focus: function () {
|
|
var _a, _b;
|
|
(_b = (_a = dayGrid.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
},
|
|
}); }, []);
|
|
var strings = props.strings, navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, styles = props.styles, theme = props.theme, className = props.className, onHeaderSelect = props.onHeaderSelect, showSixWeeksByDefault = props.showSixWeeksByDefault, minDate = props.minDate, maxDate = props.maxDate, restrictedDates = props.restrictedDates, onNavigateDate = props.onNavigateDate, showWeekNumbers = props.showWeekNumbers, dateRangeType = props.dateRangeType, animationDirection = props.animationDirection;
|
|
var monthAndYearId = (0, react_hooks_1.useId)();
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
className: className,
|
|
headerIsClickable: !!onHeaderSelect,
|
|
showWeekNumbers: showWeekNumbers,
|
|
animationDirection: animationDirection,
|
|
});
|
|
var monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);
|
|
var HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';
|
|
var headerAriaLabel = strings.yearPickerHeaderAriaLabel
|
|
? (0, utilities_1.format)(strings.yearPickerHeaderAriaLabel, monthAndYear)
|
|
: monthAndYear;
|
|
return (React.createElement("div", { className: classNames.root },
|
|
React.createElement("div", { className: classNames.header },
|
|
React.createElement(HeaderButtonComponentType, { "aria-label": onHeaderSelect ? headerAriaLabel : undefined, className: classNames.monthAndYear, onClick: onHeaderSelect, "data-is-focusable": !!onHeaderSelect, tabIndex: onHeaderSelect ? 0 : -1, onKeyDown: onButtonKeyDown(onHeaderSelect), type: "button" },
|
|
React.createElement("span", { id: monthAndYearId, "aria-live": "polite", "aria-atomic": "true" }, monthAndYear)),
|
|
React.createElement(CalendarDayNavigationButtons, tslib_1.__assign({}, props, { classNames: classNames }))),
|
|
React.createElement(CalendarDayGrid_1.CalendarDayGrid, tslib_1.__assign({}, props, { styles: styles, componentRef: dayGrid, strings: strings, navigatedDate: navigatedDate, weeksToShow: showSixWeeksByDefault ? 6 : undefined, dateTimeFormatter: dateTimeFormatter, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, onNavigateDate: onNavigateDate, labelledBy: monthAndYearId, dateRangeType: dateRangeType }))));
|
|
};
|
|
exports.CalendarDayBase = CalendarDayBase;
|
|
exports.CalendarDayBase.displayName = 'CalendarDayBase';
|
|
var CalendarDayNavigationButtons = function (props) {
|
|
var _a, _b;
|
|
var minDate = props.minDate, maxDate = props.maxDate, navigatedDate = props.navigatedDate, allFocusable = props.allFocusable, strings = props.strings, navigationIcons = props.navigationIcons, showCloseButton = props.showCloseButton, classNames = props.classNames, onNavigateDate = props.onNavigateDate, onDismiss = props.onDismiss;
|
|
var onSelectNextMonth = function () {
|
|
onNavigateDate((0, date_time_utilities_1.addMonths)(navigatedDate, 1), false);
|
|
};
|
|
var onSelectPrevMonth = function () {
|
|
onNavigateDate((0, date_time_utilities_1.addMonths)(navigatedDate, -1), false);
|
|
};
|
|
var leftNavigationIcon = navigationIcons.leftNavigation;
|
|
var rightNavigationIcon = navigationIcons.rightNavigation;
|
|
var closeNavigationIcon = navigationIcons.closeIcon;
|
|
// determine if previous/next months are in bounds
|
|
var prevMonthInBounds = minDate ? (0, date_time_utilities_1.compareDatePart)(minDate, (0, date_time_utilities_1.getMonthStart)(navigatedDate)) < 0 : true;
|
|
var nextMonthInBounds = maxDate ? (0, date_time_utilities_1.compareDatePart)((0, date_time_utilities_1.getMonthEnd)(navigatedDate), maxDate) < 0 : true;
|
|
// use aria-disabled instead of disabled so focus is not lost
|
|
// when a prev/next button becomes disabled after being clicked
|
|
return (React.createElement("div", { className: classNames.monthComponents },
|
|
React.createElement("button", { className: (0, utilities_1.css)(classNames.headerIconButton, (_a = {},
|
|
_a[classNames.disabledStyle] = !prevMonthInBounds,
|
|
_a)), tabIndex: prevMonthInBounds ? undefined : allFocusable ? 0 : -1, "aria-disabled": !prevMonthInBounds, onClick: prevMonthInBounds ? onSelectPrevMonth : undefined, onKeyDown: prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined, title: strings.prevMonthAriaLabel
|
|
? strings.prevMonthAriaLabel + ' ' + strings.months[(0, date_time_utilities_1.addMonths)(navigatedDate, -1).getMonth()]
|
|
: undefined, type: "button" },
|
|
React.createElement(Icon_1.Icon, { iconName: leftNavigationIcon })),
|
|
React.createElement("button", { className: (0, utilities_1.css)(classNames.headerIconButton, (_b = {},
|
|
_b[classNames.disabledStyle] = !nextMonthInBounds,
|
|
_b)), tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1, "aria-disabled": !nextMonthInBounds, onClick: nextMonthInBounds ? onSelectNextMonth : undefined, onKeyDown: nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined, title: strings.nextMonthAriaLabel
|
|
? strings.nextMonthAriaLabel + ' ' + strings.months[(0, date_time_utilities_1.addMonths)(navigatedDate, 1).getMonth()]
|
|
: undefined, type: "button" },
|
|
React.createElement(Icon_1.Icon, { iconName: rightNavigationIcon })),
|
|
showCloseButton && (React.createElement("button", { className: (0, utilities_1.css)(classNames.headerIconButton), onClick: onDismiss, onKeyDown: onButtonKeyDown(onDismiss), title: strings.closeButtonAriaLabel, type: "button" },
|
|
React.createElement(Icon_1.Icon, { iconName: closeNavigationIcon })))));
|
|
};
|
|
CalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';
|
|
var onButtonKeyDown = function (callback) {
|
|
return function (ev) {
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
switch (ev.which) {
|
|
case utilities_1.KeyCodes.enter:
|
|
callback === null || callback === void 0 ? void 0 : callback();
|
|
break;
|
|
}
|
|
};
|
|
};
|
|
});
|
|
//# sourceMappingURL=CalendarDay.base.js.map
|