@fluentui/react
Version:
Reusable React components for building web experiences.
231 lines • 14.7 kB
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 = exports.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, _b;
var minDate = (_a = _this.props, _a.minDate), firstDayOfWeek = _a.firstDayOfWeek, navigationIcons = _a.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, (_b = {},
_b[classNames.disabledStyle] = !prevWeekInBounds,
_b)), 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, _b;
var maxDate = (_a = _this.props, _a.maxDate), firstDayOfWeek = _a.firstDayOfWeek, navigationIcons = _a.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, (_b = {},
_b[classNames.disabledStyle] = !nextWeekInBounds,
_b)), 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 deprecation/deprecation
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 deprecation/deprecation
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;
var strings = (_a = _this.props, _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;
var strings = (_a = _this.props, _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;
var dateTimeFormatter = (_a = _this.props, _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));
});
//# sourceMappingURL=WeeklyDayPicker.base.js.map