office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
137 lines • 9.15 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, getRTL, autobind } from '../../Utilities';
import { FocusZone } from '../../FocusZone';
import { addYears, setMonth, getYearStart, getYearEnd, getMonthStart, getMonthEnd, compareDatePart } from '../../utilities/dateMath/DateMath';
import { Icon } from '../../Icon';
import * as stylesImport from './Calendar.scss';
var styles = stylesImport;
var CalendarMonth = /** @class */ (function (_super) {
tslib_1.__extends(CalendarMonth, _super);
function CalendarMonth(props) {
var _this = _super.call(this, props) || this;
_this._selectMonthCallbacks = [];
props.strings.shortMonths.map(function (month, index) {
_this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
});
_this._isCurrentMonth = _this._isCurrentMonth.bind(_this);
_this._onSelectNextYear = _this._onSelectNextYear.bind(_this);
_this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this);
_this._onSelectMonth = _this._onSelectMonth.bind(_this);
return _this;
}
CalendarMonth.prototype.render = function () {
var _this = this;
var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings, today = _a.today, highlightCurrentMonth = _a.highlightCurrentMonth, navigationIcons = _a.navigationIcons, dateTimeFormatter = _a.dateTimeFormatter, minDate = _a.minDate, maxDate = _a.maxDate;
var leftNavigationIcon = navigationIcons.leftNavigation;
var rightNavigationIcon = navigationIcons.rightNavigation;
// determine if previous/next years are in bounds
var isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;
var isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;
return (React.createElement("div", { className: css('ms-DatePicker-monthPicker', styles.monthPicker) },
React.createElement("div", { className: css('ms-DatePicker-yearComponents', styles.yearComponents) },
React.createElement("div", { className: css('ms-DatePicker-navContainer', styles.navContainer) },
React.createElement("button", { className: css('ms-DatePicker-prevYear js-prevYear', styles.prevYear, (_b = {},
_b['ms-DatePicker-prevYear--disabled ' + styles.prevYearIsDisabled] = !isPrevYearInBounds,
_b)), onClick: this._onSelectPrevYear, onKeyDown: this._onSelectPrevYearKeyDown, "aria-label": strings.prevYearAriaLabel ? strings.prevYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, -1)) : undefined, role: 'button', tabIndex: 0 },
React.createElement(Icon, { iconName: getRTL() ? rightNavigationIcon : leftNavigationIcon })),
React.createElement("button", { className: css('ms-DatePicker-nextYear js-nextYear', styles.nextYear, (_c = {},
_c['ms-DatePicker-nextYear--disabled ' + styles.nextYearIsDisabled] = !isNextYearInBounds,
_c)), onClick: this._onSelectNextYear, onKeyDown: this._onSelectNextYearKeyDown, "aria-label": strings.nextYearAriaLabel ? strings.nextYearAriaLabel + ' ' + dateTimeFormatter.formatYear(addYears(navigatedDate, 1)) : undefined, role: 'button', tabIndex: 0 },
React.createElement(Icon, { iconName: getRTL() ? leftNavigationIcon : rightNavigationIcon })))),
React.createElement("div", { className: css('ms-DatePicker-header', styles.header) }, this.props.onHeaderSelect ?
React.createElement("div", { className: css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear, styles.headerToggleView), onClick: this._onHeaderSelect, onKeyDown: this._onHeaderKeyDown, "aria-label": dateTimeFormatter.formatYear(navigatedDate), role: 'button', tabIndex: 0 }, dateTimeFormatter.formatYear(navigatedDate))
:
React.createElement("div", { className: css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, dateTimeFormatter.formatYear(navigatedDate))),
React.createElement(FocusZone, null,
React.createElement("div", { className: css('ms-DatePicker-optionGrid', styles.optionGrid), role: 'grid' }, strings.shortMonths.map(function (month, index) {
var indexedMonth = setMonth(navigatedDate, index);
var isCurrentMonth = _this._isCurrentMonth(index, navigatedDate.getFullYear(), today);
var isNavigatedMonth = navigatedDate.getMonth() === index;
var isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
(maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);
return React.createElement("button", { role: 'gridcell', className: css('ms-DatePicker-monthOption', styles.monthOption, (_a = {},
_a['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth] = highlightCurrentMonth && isCurrentMonth,
_a['ms-DatePicker-day--highlighted ' + styles.monthIsHighlighted] = highlightCurrentMonth && isNavigatedMonth,
_a['ms-DatePicker-monthOption--disabled ' + styles.monthOptionIsDisabled] = !isInBounds,
_a)), key: index, onClick: isInBounds ? _this._selectMonthCallbacks[index] : undefined, "aria-label": dateTimeFormatter.formatMonthYear(indexedMonth, strings), "aria-selected": isCurrentMonth || isNavigatedMonth, "data-is-focusable": isInBounds ? true : undefined, ref: isNavigatedMonth ? 'navigatedMonth' : undefined }, month);
var _a;
})))));
var _b, _c;
};
CalendarMonth.prototype.focus = function () {
if (this.refs.navigatedMonth) {
this.refs.navigatedMonth.tabIndex = 0;
this.refs.navigatedMonth.focus();
}
};
CalendarMonth.prototype._isCurrentMonth = function (month, year, today) {
return today.getFullYear() === year && today.getMonth() === month;
};
CalendarMonth.prototype._onKeyDown = function (callback, ev) {
if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
callback();
}
};
CalendarMonth.prototype._onSelectNextYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(addYears(navigatedDate, 1), false);
};
CalendarMonth.prototype._onSelectNextYearKeyDown = function (ev) {
this._onKeyDown(this._onSelectNextYear, ev);
};
CalendarMonth.prototype._onSelectPrevYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(addYears(navigatedDate, -1), false);
};
CalendarMonth.prototype._onSelectPrevYearKeyDown = function (ev) {
this._onKeyDown(this._onSelectPrevYear, ev);
};
CalendarMonth.prototype._onSelectMonth = function (newMonth) {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate, onHeaderSelect = _a.onHeaderSelect;
// If header is clickable the calendars are overlayed, switch back to day picker when month is clicked
if (onHeaderSelect) {
onHeaderSelect(true);
}
onNavigateDate(setMonth(navigatedDate, newMonth), true);
};
CalendarMonth.prototype._onHeaderSelect = function () {
var onHeaderSelect = this.props.onHeaderSelect;
if (onHeaderSelect) {
onHeaderSelect(true);
}
};
CalendarMonth.prototype._onHeaderKeyDown = function (ev) {
var onHeaderSelect = this.props.onHeaderSelect;
if (onHeaderSelect && (ev.which === 13 /* enter */ || ev.which === 32 /* space */)) {
onHeaderSelect(true);
}
};
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onKeyDown", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onSelectNextYear", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onSelectNextYearKeyDown", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onSelectPrevYear", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onSelectPrevYearKeyDown", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onSelectMonth", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onHeaderSelect", null);
tslib_1.__decorate([
autobind
], CalendarMonth.prototype, "_onHeaderKeyDown", null);
return CalendarMonth;
}(BaseComponent));
export { CalendarMonth };
//# sourceMappingURL=CalendarMonth.js.map