Stefan Hacker
229 lines
14 KiB
JavaScript
229 lines
14 KiB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/utilities", "../Calendar/Calendar.types", "../CalendarDayGrid/CalendarDayGrid", "@fluentui/date-time-utilities", "../../Icon", "./defaults"], function (require, exports, tslib_1, React, utilities_1, Calendar_types_1, CalendarDayGrid_1, date_time_utilities_1, Icon_1, defaults_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.WeeklyDayPickerBase = void 0;
|
|
var getClassNames = (0, utilities_1.classNamesFunction)();
|
|
var WeeklyDayPickerBase = /** @class */ (function (_super) {
|
|
tslib_1.__extends(WeeklyDayPickerBase, _super);
|
|
function WeeklyDayPickerBase(props) {
|
|
var _this = _super.call(this, props) || this;
|
|
_this._dayGrid = React.createRef();
|
|
_this._onSelectDate = function (date) {
|
|
var onSelectDate = _this.props.onSelectDate;
|
|
// don't set the navigated date on selection because selection never causes navigation
|
|
_this.setState({
|
|
selectedDate: date,
|
|
});
|
|
_this._focusOnUpdate = true;
|
|
if (onSelectDate) {
|
|
onSelectDate(date);
|
|
}
|
|
};
|
|
_this._onNavigateDate = function (date, focusOnNavigatedDay) {
|
|
var onNavigateDate = _this.props.onNavigateDate;
|
|
_this.setState({
|
|
navigatedDate: date,
|
|
});
|
|
_this._focusOnUpdate = focusOnNavigatedDay;
|
|
if (onNavigateDate) {
|
|
onNavigateDate(date);
|
|
}
|
|
};
|
|
_this._renderPreviousWeekNavigationButton = function (classNames) {
|
|
var _a;
|
|
var _b = _this.props, minDate = _b.minDate, firstDayOfWeek = _b.firstDayOfWeek, navigationIcons = _b.navigationIcons;
|
|
var navigatedDate = _this.state.navigatedDate;
|
|
var leftNavigationIcon = (0, utilities_1.getRTL)() ? navigationIcons.rightNavigation : navigationIcons.leftNavigation;
|
|
// determine if previous week in bounds
|
|
var prevWeekInBounds = minDate
|
|
? (0, date_time_utilities_1.compareDatePart)(minDate, (0, date_time_utilities_1.getStartDateOfWeek)(navigatedDate, firstDayOfWeek)) < 0
|
|
: true;
|
|
return (React.createElement("button", { className: (0, utilities_1.css)(classNames.navigationIconButton, (_a = {},
|
|
_a[classNames.disabledStyle] = !prevWeekInBounds,
|
|
_a)), disabled: !prevWeekInBounds, "aria-disabled": !prevWeekInBounds, onClick: prevWeekInBounds ? _this._onSelectPrevDateRange : undefined, onKeyDown: prevWeekInBounds ? _this._onButtonKeyDown(_this._onSelectPrevDateRange) : undefined, title: _this._createPreviousWeekAriaLabel(), type: "button" },
|
|
React.createElement(Icon_1.Icon, { iconName: leftNavigationIcon })));
|
|
};
|
|
_this._renderNextWeekNavigationButton = function (classNames) {
|
|
var _a;
|
|
var _b = _this.props, maxDate = _b.maxDate, firstDayOfWeek = _b.firstDayOfWeek, navigationIcons = _b.navigationIcons;
|
|
var navigatedDate = _this.state.navigatedDate;
|
|
var rightNavigationIcon = (0, utilities_1.getRTL)() ? navigationIcons.leftNavigation : navigationIcons.rightNavigation;
|
|
// determine if next week in bounds
|
|
var nextWeekInBounds = maxDate
|
|
? (0, date_time_utilities_1.compareDatePart)((0, date_time_utilities_1.addDays)((0, date_time_utilities_1.getStartDateOfWeek)(navigatedDate, firstDayOfWeek), 7), maxDate) < 0
|
|
: true;
|
|
return (React.createElement("button", { className: (0, utilities_1.css)(classNames.navigationIconButton, (_a = {},
|
|
_a[classNames.disabledStyle] = !nextWeekInBounds,
|
|
_a)), disabled: !nextWeekInBounds, "aria-disabled": !nextWeekInBounds, onClick: nextWeekInBounds ? _this._onSelectNextDateRange : undefined, onKeyDown: nextWeekInBounds ? _this._onButtonKeyDown(_this._onSelectNextDateRange) : undefined, title: _this._createNextWeekAriaLabel(), type: "button" },
|
|
React.createElement(Icon_1.Icon, { iconName: rightNavigationIcon })));
|
|
};
|
|
_this._onSelectPrevDateRange = function () {
|
|
if (_this.props.showFullMonth) {
|
|
_this._navigateDate((0, date_time_utilities_1.addMonths)(_this.state.navigatedDate, -1));
|
|
}
|
|
else {
|
|
_this._navigateDate((0, date_time_utilities_1.addDays)(_this.state.navigatedDate, -7));
|
|
}
|
|
};
|
|
_this._onSelectNextDateRange = function () {
|
|
if (_this.props.showFullMonth) {
|
|
_this._navigateDate((0, date_time_utilities_1.addMonths)(_this.state.navigatedDate, 1));
|
|
}
|
|
else {
|
|
_this._navigateDate((0, date_time_utilities_1.addDays)(_this.state.navigatedDate, 7));
|
|
}
|
|
};
|
|
_this._navigateDate = function (date) {
|
|
_this.setState({
|
|
navigatedDate: date,
|
|
});
|
|
if (_this.props.onNavigateDate) {
|
|
_this.props.onNavigateDate(date);
|
|
}
|
|
};
|
|
_this._onWrapperKeyDown = function (ev) {
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
switch (ev.which) {
|
|
case utilities_1.KeyCodes.enter:
|
|
ev.preventDefault();
|
|
break;
|
|
case utilities_1.KeyCodes.backspace:
|
|
ev.preventDefault();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
_this._onButtonKeyDown = function (callback) {
|
|
return function (ev) {
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
switch (ev.which) {
|
|
case utilities_1.KeyCodes.enter:
|
|
callback();
|
|
break;
|
|
}
|
|
};
|
|
};
|
|
_this._onTouchStart = function (ev) {
|
|
var touch = ev.touches[0];
|
|
if (touch) {
|
|
_this._initialTouchX = touch.clientX;
|
|
}
|
|
};
|
|
_this._onTouchMove = function (ev) {
|
|
var isRtl = (0, utilities_1.getRTL)();
|
|
var touch = ev.touches[0];
|
|
if (touch && _this._initialTouchX !== undefined && touch.clientX !== _this._initialTouchX) {
|
|
if ((touch.clientX - _this._initialTouchX) * (isRtl ? -1 : 1) < 0) {
|
|
// swipe right
|
|
_this._onSelectNextDateRange();
|
|
}
|
|
else {
|
|
// swipe left
|
|
_this._onSelectPrevDateRange();
|
|
}
|
|
_this._initialTouchX = undefined;
|
|
}
|
|
};
|
|
_this._createPreviousWeekAriaLabel = function () {
|
|
var _a = _this.props, strings = _a.strings, showFullMonth = _a.showFullMonth, firstDayOfWeek = _a.firstDayOfWeek;
|
|
var navigatedDate = _this.state.navigatedDate;
|
|
var ariaLabel = undefined;
|
|
if (showFullMonth && strings.prevMonthAriaLabel) {
|
|
ariaLabel = strings.prevMonthAriaLabel + ' ' + strings.months[(0, date_time_utilities_1.addMonths)(navigatedDate, -1).getMonth()];
|
|
}
|
|
else if (!showFullMonth && strings.prevWeekAriaLabel) {
|
|
var firstDayOfPreviousWeek = (0, date_time_utilities_1.getStartDateOfWeek)((0, date_time_utilities_1.addDays)(navigatedDate, -7), firstDayOfWeek);
|
|
var lastDayOfPreviousWeek = (0, date_time_utilities_1.addDays)(firstDayOfPreviousWeek, 6);
|
|
ariaLabel =
|
|
strings.prevWeekAriaLabel + ' ' + _this._formatDateRange(firstDayOfPreviousWeek, lastDayOfPreviousWeek);
|
|
}
|
|
return ariaLabel;
|
|
};
|
|
_this._createNextWeekAriaLabel = function () {
|
|
var _a = _this.props, strings = _a.strings, showFullMonth = _a.showFullMonth, firstDayOfWeek = _a.firstDayOfWeek;
|
|
var navigatedDate = _this.state.navigatedDate;
|
|
var ariaLabel = undefined;
|
|
if (showFullMonth && strings.nextMonthAriaLabel) {
|
|
ariaLabel = strings.nextMonthAriaLabel + ' ' + strings.months[(0, date_time_utilities_1.addMonths)(navigatedDate, 1).getMonth()];
|
|
}
|
|
else if (!showFullMonth && strings.nextWeekAriaLabel) {
|
|
var firstDayOfNextWeek = (0, date_time_utilities_1.getStartDateOfWeek)((0, date_time_utilities_1.addDays)(navigatedDate, 7), firstDayOfWeek);
|
|
var lastDayOfNextWeek = (0, date_time_utilities_1.addDays)(firstDayOfNextWeek, 6);
|
|
ariaLabel = strings.nextWeekAriaLabel + ' ' + _this._formatDateRange(firstDayOfNextWeek, lastDayOfNextWeek);
|
|
}
|
|
return ariaLabel;
|
|
};
|
|
_this._formatDateRange = function (startDate, endDate) {
|
|
var _a = _this.props, dateTimeFormatter = _a.dateTimeFormatter, strings = _a.strings;
|
|
return "".concat(dateTimeFormatter === null || dateTimeFormatter === void 0 ? void 0 : dateTimeFormatter.formatMonthDayYear(startDate, strings), " - ").concat(dateTimeFormatter === null || dateTimeFormatter === void 0 ? void 0 : dateTimeFormatter.formatMonthDayYear(endDate, strings));
|
|
};
|
|
(0, utilities_1.initializeComponentRef)(_this);
|
|
var currentDate = props.initialDate && !isNaN(props.initialDate.getTime()) ? props.initialDate : props.today || new Date();
|
|
_this.state = {
|
|
selectedDate: currentDate,
|
|
navigatedDate: currentDate,
|
|
previousShowFullMonth: !!props.showFullMonth,
|
|
animationDirection: props.animationDirection,
|
|
};
|
|
_this._focusOnUpdate = false;
|
|
return _this;
|
|
}
|
|
WeeklyDayPickerBase.getDerivedStateFromProps = function (nextProps, prevState) {
|
|
var currentDate = nextProps.initialDate && !isNaN(nextProps.initialDate.getTime())
|
|
? nextProps.initialDate
|
|
: nextProps.today || new Date();
|
|
var showFullMonth = !!nextProps.showFullMonth;
|
|
var newAnimationDirection = showFullMonth !== prevState.previousShowFullMonth ? Calendar_types_1.AnimationDirection.Vertical : Calendar_types_1.AnimationDirection.Horizontal;
|
|
if (!(0, date_time_utilities_1.compareDates)(currentDate, prevState.selectedDate)) {
|
|
return {
|
|
selectedDate: currentDate,
|
|
navigatedDate: currentDate,
|
|
previousShowFullMonth: showFullMonth,
|
|
animationDirection: newAnimationDirection,
|
|
};
|
|
}
|
|
return {
|
|
selectedDate: currentDate,
|
|
navigatedDate: prevState.navigatedDate,
|
|
previousShowFullMonth: showFullMonth,
|
|
animationDirection: newAnimationDirection,
|
|
};
|
|
};
|
|
WeeklyDayPickerBase.prototype.focus = function () {
|
|
if (this._dayGrid && this._dayGrid.current) {
|
|
this._dayGrid.current.focus();
|
|
}
|
|
};
|
|
WeeklyDayPickerBase.prototype.render = function () {
|
|
var _a = this.props, strings = _a.strings, dateTimeFormatter = _a.dateTimeFormatter, firstDayOfWeek = _a.firstDayOfWeek, minDate = _a.minDate, maxDate = _a.maxDate, restrictedDates = _a.restrictedDates, today = _a.today, styles = _a.styles, theme = _a.theme, className = _a.className, showFullMonth = _a.showFullMonth, weeksToShow = _a.weeksToShow, calendarDayGridProps = tslib_1.__rest(_a, ["strings", "dateTimeFormatter", "firstDayOfWeek", "minDate", "maxDate", "restrictedDates", "today", "styles", "theme", "className", "showFullMonth", "weeksToShow"]);
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
className: className,
|
|
});
|
|
return (React.createElement("div", { className: classNames.root, onKeyDown: this._onWrapperKeyDown, onTouchStart: this._onTouchStart, onTouchMove: this._onTouchMove, "aria-expanded": showFullMonth },
|
|
this._renderPreviousWeekNavigationButton(classNames),
|
|
React.createElement(CalendarDayGrid_1.CalendarDayGrid, tslib_1.__assign({ styles: styles, componentRef: this._dayGrid, strings: strings, selectedDate: this.state.selectedDate, navigatedDate: this.state.navigatedDate, firstDayOfWeek: firstDayOfWeek, firstWeekOfYear: date_time_utilities_1.FirstWeekOfYear.FirstDay, dateRangeType: date_time_utilities_1.DateRangeType.Day, weeksToShow: showFullMonth ? weeksToShow : 1, dateTimeFormatter: dateTimeFormatter, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, today: today, lightenDaysOutsideNavigatedMonth: showFullMonth, animationDirection: this.state.animationDirection }, calendarDayGridProps)),
|
|
this._renderNextWeekNavigationButton(classNames)));
|
|
};
|
|
WeeklyDayPickerBase.prototype.componentDidUpdate = function () {
|
|
if (this._focusOnUpdate) {
|
|
this.focus();
|
|
this._focusOnUpdate = false;
|
|
}
|
|
};
|
|
WeeklyDayPickerBase.defaultProps = {
|
|
onSelectDate: undefined,
|
|
initialDate: undefined,
|
|
today: new Date(),
|
|
firstDayOfWeek: date_time_utilities_1.DayOfWeek.Sunday,
|
|
strings: defaults_1.defaultWeeklyDayPickerStrings,
|
|
navigationIcons: defaults_1.defaultWeeklyDayPickerNavigationIcons,
|
|
dateTimeFormatter: date_time_utilities_1.DEFAULT_DATE_FORMATTING,
|
|
animationDirection: Calendar_types_1.AnimationDirection.Horizontal,
|
|
};
|
|
return WeeklyDayPickerBase;
|
|
}(React.Component));
|
|
exports.WeeklyDayPickerBase = WeeklyDayPickerBase;
|
|
});
|
|
//# sourceMappingURL=WeeklyDayPicker.base.js.map
|