office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
152 lines (150 loc) • 8.14 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../utilities/dateValues/DateValues", "./CalendarDay", "./CalendarMonth", "../../utilities/dateMath/DateMath", "../../Utilities", "./Calendar.scss"], function (require, exports, tslib_1, React, DateValues_1, CalendarDay_1, CalendarMonth_1, DateMath_1, Utilities_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Calendar = (function (_super) {
tslib_1.__extends(Calendar, _super);
function Calendar(props) {
var _this = _super.call(this) || this;
var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
_this.state = {
selectedDate: currentDate,
navigatedDate: currentDate
};
_this._focusOnUpdate = false;
return _this;
}
Calendar.prototype.componentWillReceiveProps = function (nextProps) {
var autoNavigateOnSelection = nextProps.autoNavigateOnSelection, value = nextProps.value, _a = nextProps.today, today = _a === void 0 ? new Date() : _a;
// Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
// if selected date is updated via props, we may need to modify the navigated date
var overrideNavigatedDate = (autoNavigateOnSelection && !DateMath_1.compareDates(value, this.props.value));
if (overrideNavigatedDate) {
this.setState({
navigatedDate: value
});
}
this.setState({
selectedDate: value || today
});
};
Calendar.prototype.componentDidUpdate = function () {
if (this._focusOnUpdate) {
this.refs.dayPicker.focus();
this._focusOnUpdate = false;
}
};
Calendar.prototype.render = function () {
var rootClass = 'ms-DatePicker';
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, isMonthPickerVisible = _a.isMonthPickerVisible, isDayPickerVisible = _a.isDayPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday, highlightCurrentMonth = _a.highlightCurrentMonth;
var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate;
return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root', role: 'application' },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && isDayPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible), isMonthPickerVisible && !isDayPickerVisible && ('is-onlymonthPickerVisible ' + styles.pickerOnlyMonthPickerVisible)) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder ms-slideDownIn10', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) },
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap) },
isDayPickerVisible && React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, today: this.props.today, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, ref: 'dayPicker' }),
isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate, today: this.props.today, highlightCurrentMonth: highlightCurrentMonth }),
showGoToToday &&
React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
};
Calendar.prototype.focus = function () {
if (this.refs.dayPicker) {
this.refs.dayPicker.focus();
}
};
Calendar.prototype._navigateDay = function (date) {
this.setState({
navigatedDate: date
});
};
Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
this._navigateDay(date);
this._focusOnUpdate = focusOnNavigatedDay;
};
Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
var onSelectDate = this.props.onSelectDate;
this.setState({
selectedDate: date
});
if (onSelectDate) {
onSelectDate(date, selectedDateRangeArray);
}
};
Calendar.prototype._onGotoToday = function () {
this._navigateDay(this.props.today);
this._focusOnUpdate = true;
};
Calendar.prototype._onGotoTodayKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
ev.preventDefault();
this._onGotoToday();
}
else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) {
if (this.props.onDismiss) {
ev.stopPropagation();
ev.preventDefault();
this.props.onDismiss();
}
}
};
Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.enter:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.backspace:
ev.preventDefault();
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
Calendar.prototype._handleEscKey = function (ev) {
if (this.props.onDismiss != null) {
this.props.onDismiss();
}
};
return Calendar;
}(Utilities_1.BaseComponent));
Calendar.defaultProps = {
onSelectDate: null,
onDismiss: null,
isMonthPickerVisible: true,
isDayPickerVisible: true,
value: null,
today: new Date(),
firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
dateRangeType: DateValues_1.DateRangeType.Day,
autoNavigateOnSelection: false,
showGoToToday: true,
strings: null,
highlightCurrentMonth: false
};
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_navigateDay", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onNavigateDate", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onSelectDate", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoToday", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onGotoTodayKeyDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], Calendar.prototype, "_handleEscKey", null);
exports.Calendar = Calendar;
});
//# sourceMappingURL=Calendar.js.map