office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
213 lines • 11.4 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
import { CalendarDay } from './CalendarDay';
import { CalendarMonth } from './CalendarMonth';
import { compareDates, getDateRangeArray } from '../../utilities/dateMath/DateMath';
import { autobind, css, BaseComponent, createRef } from '../../Utilities';
import * as stylesImport from './Calendar.scss';
var styles = stylesImport;
var leftArrow = 'Up';
var rightArrow = 'Down';
var iconStrings = {
leftNavigation: leftArrow,
rightNavigation: rightArrow
};
var defaultWorkWeekDays = [
DayOfWeek.Monday,
DayOfWeek.Tuesday,
DayOfWeek.Wednesday,
DayOfWeek.Thursday,
DayOfWeek.Friday,
];
var dateTimeFormatterCallbacks = {
formatMonthDayYear: function (date, strings) { return (strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear()); },
formatMonthYear: function (date, strings) { return (strings.months[date.getMonth()] + ' ' + date.getFullYear()); },
formatDay: function (date) { return date.getDate().toString(); },
formatYear: function (date) { return date.getFullYear().toString(); }
};
var Calendar = /** @class */ (function (_super) {
tslib_1.__extends(Calendar, _super);
function Calendar(props) {
var _this = _super.call(this, props) || this;
_this._dayPicker = createRef();
_this._monthPicker = createRef();
var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
_this.state = {
selectedDate: currentDate,
navigatedDate: currentDate,
/** When showMonthPickerAsOverlay is active it overrides isMonthPickerVisible/isDayPickerVisible props (These props permanently set the visibility of their respective calendars). */
isMonthPickerVisible: _this.props.showMonthPickerAsOverlay ? false : _this.props.isMonthPickerVisible,
isDayPickerVisible: _this.props.showMonthPickerAsOverlay ? true : _this.props.isDayPickerVisible
};
_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 && !compareDates(value, this.props.value));
if (overrideNavigatedDate) {
this.setState({
navigatedDate: value
});
}
this.setState({
selectedDate: value || today
});
};
Calendar.prototype.componentDidUpdate = function () {
if (this._focusOnUpdate) {
// if the day picker is shown, focus on it
if (this._dayPicker.value) {
this._dayPicker.value.focus();
}
else if (this._monthPicker.value) {
this._monthPicker.value.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, showMonthPickerAsOverlay = _a.showMonthPickerAsOverlay, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday, highlightCurrentMonth = _a.highlightCurrentMonth, navigationIcons = _a.navigationIcons, minDate = _a.minDate, maxDate = _a.maxDate;
var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate, isMonthPickerVisible = _b.isMonthPickerVisible, isDayPickerVisible = _b.isDayPickerVisible;
var onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
var monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
var overlayedWithButton = showMonthPickerAsOverlay && showGoToToday;
return (React.createElement("div", { className: css(rootClass, styles.root), role: 'application' },
React.createElement("div", { className: css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && ('ms-DatePicker-monthPickerVisible ' + styles.monthPickerVisible), isMonthPickerVisible && isDayPickerVisible && ('ms-DatePicker-calendarsInline ' + styles.calendarsInline), monthPickerOnly && ('ms-DatePicker-monthPickerOnly ' + styles.monthPickerOnly), showMonthPickerAsOverlay && ('ms-DatePicker-monthPickerAsOverlay ' + styles.monthPickerAsOverlay)) },
React.createElement("div", { className: css('ms-DatePicker-holder ms-slideDownIn10', styles.holder, overlayedWithButton && styles.holderWithButton), onKeyDown: this._onDatePickerPopupKeyDown },
React.createElement("div", { className: css('ms-DatePicker-frame', styles.frame) },
React.createElement("div", { className: css('ms-DatePicker-wrap', styles.wrap, showGoToToday && styles.goTodaySpacing) },
isDayPickerVisible && React.createElement(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, onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, showWeekNumbers: this.props.showWeekNumbers, firstWeekOfYear: this.props.firstWeekOfYear, dateTimeFormatter: this.props.dateTimeFormatter, showSixWeeksByDefault: this.props.showSixWeeksByDefault, minDate: minDate, maxDate: maxDate, workWeekDays: this.props.workWeekDays, componentRef: this._dayPicker }),
isMonthPickerVisible && React.createElement(CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate, today: this.props.today, highlightCurrentMonth: highlightCurrentMonth, onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, dateTimeFormatter: this.props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: this._monthPicker }),
showGoToToday &&
React.createElement("button", { role: 'button', className: css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
};
Calendar.prototype.focus = function () {
if (this._dayPicker.value) {
this._dayPicker.value.focus();
}
};
Calendar.prototype._navigateDay = function (date) {
this.setState({
navigatedDate: date
});
};
Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
if (this.props.isDayPickerVisible || (!this.props.isDayPickerVisible && !focusOnNavigatedDay)) {
this._navigateDay(date);
this._focusOnUpdate = focusOnNavigatedDay;
}
else {
// if only the month picker is shown, select the chosen month
this._onSelectDate(date);
}
};
Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
var onSelectDate = this.props.onSelectDate;
this.setState({
selectedDate: date
});
if (onSelectDate) {
onSelectDate(date, selectedDateRangeArray);
}
};
Calendar.prototype._onHeaderSelect = function (focus) {
this.setState({
isDayPickerVisible: !this.state.isDayPickerVisible,
isMonthPickerVisible: !this.state.isMonthPickerVisible
});
if (focus) {
this._focusOnUpdate = true;
}
};
Calendar.prototype._onGotoToday = function () {
var _a = this.props, dateRangeType = _a.dateRangeType, firstDayOfWeek = _a.firstDayOfWeek, today = _a.today, workWeekDays = _a.workWeekDays;
var dates = getDateRangeArray(today, dateRangeType, firstDayOfWeek, workWeekDays);
this._onSelectDate(today, dates);
};
Calendar.prototype._onGotoTodayKeyDown = function (ev) {
if (ev.which === 13 /* enter */ || ev.which === 32 /* space */) {
ev.preventDefault();
this._onGotoToday();
}
else if (ev.which === 9 /* tab */ && !ev.shiftKey) {
if (this.props.onDismiss) {
ev.stopPropagation();
ev.preventDefault();
this.props.onDismiss();
}
}
};
Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
switch (ev.which) {
case 13 /* enter */:
ev.preventDefault();
break;
case 8 /* backspace */:
ev.preventDefault();
break;
case 27 /* escape */:
this._handleEscKey(ev);
break;
default:
break;
}
};
Calendar.prototype._handleEscKey = function (ev) {
if (this.props.onDismiss) {
this.props.onDismiss();
}
};
Calendar.defaultProps = {
onSelectDate: undefined,
onDismiss: undefined,
isMonthPickerVisible: true,
isDayPickerVisible: true,
showMonthPickerAsOverlay: false,
value: undefined,
today: new Date(),
firstDayOfWeek: DayOfWeek.Sunday,
dateRangeType: DateRangeType.Day,
autoNavigateOnSelection: false,
showGoToToday: true,
strings: null,
highlightCurrentMonth: false,
navigationIcons: iconStrings,
showWeekNumbers: false,
firstWeekOfYear: FirstWeekOfYear.FirstDay,
dateTimeFormatter: dateTimeFormatterCallbacks,
showSixWeeksByDefault: false,
workWeekDays: defaultWorkWeekDays
};
tslib_1.__decorate([
autobind
], Calendar.prototype, "_navigateDay", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onNavigateDate", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onSelectDate", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onHeaderSelect", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onGotoToday", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onGotoTodayKeyDown", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
tslib_1.__decorate([
autobind
], Calendar.prototype, "_handleEscKey", null);
return Calendar;
}(BaseComponent));
export { Calendar };
//# sourceMappingURL=Calendar.js.map