office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
318 lines • 14.7 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Calendar", "../../Callout", "../../common/DirectionalHint", "../../TextField", "../../Utilities", "../../utilities/dateMath/DateMath", "./DatePicker.scss"], function (require, exports, tslib_1, React, Calendar_1, Callout_1, DirectionalHint_1, TextField_1, Utilities_1, DateMath_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var DEFAULT_STRINGS = {
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',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year'
};
var DatePicker = (function (_super) {
tslib_1.__extends(DatePicker, _super);
function DatePicker(props) {
var _this = _super.call(this) || this;
var formatDate = props.formatDate, value = props.value;
_this.state = {
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
isDatePickerShown: false,
errorMessage: undefined
};
_this._preventFocusOpeningPicker = false;
return _this;
}
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : undefined;
// Set error message
this.setState({
errorMessage: errorMessage
});
// Issue# 1274: Check if the date value changed from old props value, i.e., if indeed a new date is being
// passed in or if the formatting function was modified. We only update the selected date if either of these
// had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
// is the result of the onSelectDate callback, but this should be a rare scenario.
var oldValue = this.props.value;
if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
this.setState({
selectedDate: value || new Date(),
formattedDate: (formatDate && value) ? formatDate(value) : '',
});
}
};
DatePicker.prototype.render = function () {
var _this = this;
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, disabled = _a.disabled, ariaLabel = _a.ariaLabel, pickerAriaLabel = _a.pickerAriaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput, borderless = _a.borderless, className = _a.className;
var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage;
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root, className), ref: 'root' },
React.createElement("div", { ref: function (c) { return _this._datepicker = c; } },
React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', "aria-expanded": isDatePickerShown, required: isRequired, disabled: disabled, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, borderless: borderless, iconProps: {
iconName: 'Calendar',
className: Utilities_1.css(label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel)
}, readOnly: !allowTextInput, value: formattedDate, ref: 'textField', role: allowTextInput ? 'combobox' : 'menu' })),
isDatePickerShown && (React.createElement(Callout_1.Callout, { role: 'dialog', ariaLabel: pickerAriaLabel, isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: this._resolveRef('_calendar') })))));
};
DatePicker.prototype._onSelectDate = function (date) {
var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate;
this.setState({
selectedDate: date,
isDatePickerShown: false,
formattedDate: formatDate && date ? formatDate(date) : '',
});
if (onSelectDate) {
onSelectDate(date);
}
};
DatePicker.prototype._onCalloutPositioned = function () {
this._calendar.focus();
};
DatePicker.prototype._onTextFieldFocus = function (ev) {
if (this.props.disableAutoFocus) {
return;
}
if (!this.props.allowTextInput) {
if (!this._preventFocusOpeningPicker) {
this._showDatePickerPopup();
}
else {
this._preventFocusOpeningPicker = false;
}
}
};
DatePicker.prototype._onTextFieldBlur = function (ev) {
this._validateTextInput();
};
DatePicker.prototype._onTextFieldChanged = function (newValue) {
if (this.props.allowTextInput) {
if (this.state.isDatePickerShown) {
this._dismissDatePickerPopup();
}
var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings;
this.setState({
errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : undefined,
formattedDate: newValue
});
}
};
DatePicker.prototype._onTextFieldKeyDown = function (ev) {
switch (ev.which) {
case 13 /* enter */:
ev.preventDefault();
ev.stopPropagation();
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
// When DatePicker allows input date string directly,
// it is expected to hit another enter to close the popup
if (this.props.allowTextInput) {
this._dismissDatePickerPopup();
}
}
break;
case 27 /* escape */:
this._handleEscKey(ev);
break;
default:
break;
}
};
DatePicker.prototype._onTextFieldClick = function (ev) {
if (!this.state.isDatePickerShown) {
this._showDatePickerPopup();
}
else {
if (this.props.allowTextInput) {
this.setState({
isDatePickerShown: false
});
}
}
};
DatePicker.prototype._showDatePickerPopup = function () {
if (!this.state.isDatePickerShown) {
this._preventFocusOpeningPicker = true;
this._focusOnSelectedDateOnUpdate = true;
this.setState({
isDatePickerShown: true,
navigatedDate: this.state.selectedDate,
errorMessage: ''
});
}
};
DatePicker.prototype._dismissDatePickerPopup = function () {
if (this.state.isDatePickerShown) {
this.setState({
isDatePickerShown: false
});
this._validateTextInput();
}
};
/**
* Callback for closing the calendar callout
*/
DatePicker.prototype._calendarDismissed = function () {
this._preventFocusOpeningPicker = true;
this._dismissDatePickerPopup();
if (this.refs.textField) {
this.refs.textField.focus();
}
};
DatePicker.prototype._handleEscKey = function (ev) {
this._calendarDismissed();
};
DatePicker.prototype._validateTextInput = function () {
var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate;
var inputValue = this.state.formattedDate;
// Do validation only if DatePicker's popup is dismissed
if (this.state.isDatePickerShown) {
return;
}
// Check when DatePicker is a required field but has NO input value
if (isRequired && !inputValue) {
this.setState({
// Since fabic react doesn't have loc support yet
// use the symbol '*' to represent error message
errorMessage: strings.isRequiredErrorMessage || '*'
});
return;
}
if (allowTextInput) {
var date = null;
if (inputValue) {
date = parseDateFromString(inputValue);
if (!date) {
this.setState({
errorMessage: strings.invalidInputErrorMessage || '*'
});
}
else {
this.setState({
selectedDate: date,
errorMessage: ''
});
}
}
else {
// No input date string shouldn't be an error if field is not required
this.setState({
errorMessage: ''
});
}
// Execute onSelectDate callback
if (onSelectDate) {
// If no input date string or input date string is invalid
// date variable will be null, callback should expect null value for this case
onSelectDate(date);
}
}
};
DatePicker.defaultProps = {
allowTextInput: false,
formatDate: function (date) {
if (date) {
return date.toDateString();
}
return '';
},
parseDateFromString: function (dateStr) {
var date = Date.parse(dateStr);
if (date) {
return new Date(date);
}
return null;
},
firstDayOfWeek: Calendar_1.DayOfWeek.Sunday,
isRequired: false,
isMonthPickerVisible: true,
strings: DEFAULT_STRINGS,
borderless: false,
pickerAriaLabel: 'Calender',
};
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onSelectDate", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onCalloutPositioned", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldFocus", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldBlur", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldChanged", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldKeyDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_dismissDatePickerPopup", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_calendarDismissed", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_handleEscKey", null);
tslib_1.__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_validateTextInput", null);
return DatePicker;
}(Utilities_1.BaseComponent));
exports.DatePicker = DatePicker;
});
//# sourceMappingURL=DatePicker.js.map