office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
99 lines (97 loc) • 3.85 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/Calendar"], function (require, exports, tslib_1, React, Button_1, Callout_1, Calendar_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DayPickerStrings = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today'
};
var CalendarButtonExample = (function (_super) {
tslib_1.__extends(CalendarButtonExample, _super);
function CalendarButtonExample() {
var _this = _super.call(this) || this;
_this.state = {
showCalendar: false,
selectedDate: null
};
_this._onClick = _this._onClick.bind(_this);
_this._onDismiss = _this._onDismiss.bind(_this);
_this._onSelectDate = _this._onSelectDate.bind(_this);
return _this;
}
CalendarButtonExample.prototype.render = function () {
var _this = this;
return (React.createElement("div", null,
React.createElement("div", { ref: function (calendarBtn) { return _this._calendarButtonElement = calendarBtn; } },
React.createElement(Button_1.DefaultButton, { onClick: this._onClick, text: this.state.selectedDate == null ? 'Click for Calendar' : this.state.selectedDate.toLocaleDateString() })),
this.state.showCalendar && (React.createElement(Callout_1.Callout, { isBeakVisible: false, className: 'ms-DatePicker-callout', gapSpace: 0, doNotLayer: false, targetElement: this._calendarButtonElement, directionalHint: Callout_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onDismiss, setInitialFocus: false },
React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._onDismiss, isMonthPickerVisible: true, value: this.state.selectedDate, firstDayOfWeek: Calendar_1.DayOfWeek.Sunday, strings: DayPickerStrings })))));
};
CalendarButtonExample.prototype._onClick = function (event) {
this.setState(function (prevState) {
prevState.showCalendar = !prevState.showCalendar;
return prevState;
});
};
CalendarButtonExample.prototype._onDismiss = function () {
this.setState(function (prevState) {
prevState.showCalendar = false;
return prevState;
});
};
CalendarButtonExample.prototype._onSelectDate = function (date) {
this.setState(function (prevState) {
prevState.showCalendar = false;
prevState.selectedDate = date;
return prevState;
});
};
return CalendarButtonExample;
}(React.Component));
exports.CalendarButtonExample = CalendarButtonExample;
});
//# sourceMappingURL=Calendar.Button.Example.js.map