office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
64 lines (62 loc) • 5.07 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../FocusZone", "../../utilities/dateMath/DateMath", "../../Icon", "./Calendar.scss"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, DateMath_1, Icon_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var CalendarMonth = (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;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) },
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'ChevronRight' : 'ChevronLeft' })),
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 },
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))),
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) {
return React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption, (_a = {},
_a['ms-DatePicker-day--today ' + styles.monthIsCurrentMonth] = highlightCurrentMonth && _this.isCurrentMonth(index, navigatedDate.getFullYear(), today),
_a)), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month);
var _a;
})))));
};
CalendarMonth.prototype.isCurrentMonth = function (month, year, today) {
return today.getFullYear() === year && today.getMonth() === month;
};
CalendarMonth.prototype._onKeyDown = function (callback, ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
callback();
}
};
CalendarMonth.prototype._onSelectNextYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
};
CalendarMonth.prototype._onSelectPrevYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
};
CalendarMonth.prototype._onSelectMonth = function (newMonth) {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
};
return CalendarMonth;
}(Utilities_1.BaseComponent));
exports.CalendarMonth = CalendarMonth;
});
//# sourceMappingURL=CalendarMonth.js.map