office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
69 lines (67 loc) • 4.01 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var FocusZone_1 = require('../../FocusZone');
var KeyCodes_1 = require('../../utilities/KeyCodes');
var DateMath_1 = require('../../utilities/dateMath/DateMath');
var rtl_1 = require('../../utilities/rtl');
var css_1 = require('../../utilities/css');
var DatePickerMonth = (function (_super) {
__extends(DatePickerMonth, _super);
function DatePickerMonth(props) {
var _this = this;
_super.call(this, props);
this._selectMonthCallbacks = [];
props.strings.shortMonths.map(function (month, index) {
_this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
});
this._onSelectNextYear = this._onSelectNextYear.bind(this);
this._onSelectPrevYear = this._onSelectPrevYear.bind(this);
this._onSelectMonth = this._onSelectMonth.bind(this);
}
DatePickerMonth.prototype.render = function () {
var _this = this;
var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings;
return (React.createElement("div", {className: 'ms-DatePicker-monthPicker'},
React.createElement("div", {className: 'ms-DatePicker-header'},
React.createElement("div", {className: 'ms-DatePicker-yearComponents ms-DatePicker-navContainer'},
React.createElement("span", {className: 'ms-DatePicker-prevYear js-prevYear', onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), tabIndex: 0},
React.createElement("i", {className: css_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': !rtl_1.getRTL(), 'ms-Icon--ChevronRight': rtl_1.getRTL() })})
),
React.createElement("span", {className: 'ms-DatePicker-nextYear js-nextYear', onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), tabIndex: 0},
React.createElement("i", {className: css_1.css('ms-Icon', { 'ms-Icon--ChevronLeft': rtl_1.getRTL(), 'ms-Icon--ChevronRight': !rtl_1.getRTL() })})
)),
React.createElement("div", {className: 'ms-DatePicker-currentYear js-showYearPicker'}, navigatedDate.getFullYear())),
React.createElement(FocusZone_1.FocusZone, null,
React.createElement("div", {className: 'ms-DatePicker-optionGrid'}, strings.shortMonths.map(function (month, index) {
return (React.createElement("span", {className: 'ms-DatePicker-monthOption', key: index, onClick: _this._selectMonthCallbacks[index], "data-is-focusable": true}, month));
}))
)));
};
DatePickerMonth.prototype._onKeyDown = function (callback, ev) {
if (ev.which === KeyCodes_1.KeyCodes.enter) {
callback();
}
};
DatePickerMonth.prototype._onSelectNextYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
};
;
DatePickerMonth.prototype._onSelectPrevYear = function () {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
};
;
DatePickerMonth.prototype._onSelectMonth = function (newMonth) {
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
};
return DatePickerMonth;
}(React.Component));
exports.DatePickerMonth = DatePickerMonth;
//# sourceMappingURL=DatePickerMonth.js.map