office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
326 lines (324 loc) • 14.1 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var React = require('react');
var DatePicker_Props_1 = require('./DatePicker.Props');
var DatePickerDay_1 = require('./DatePickerDay');
var DatePickerMonth_1 = require('./DatePickerMonth');
var TextField_1 = require('../../TextField');
var Utilities_1 = require('../../Utilities');
require('./DatePicker.scss');
var DatePicker = (function (_super) {
__extends(DatePicker, _super);
function DatePicker(props) {
_super.call(this);
var formatDate = props.formatDate, value = props.value;
this.state = {
selectedDate: value || new Date(),
formattedDate: formatDate && value ? formatDate(value) : null,
isDatePickerShown: false,
errorMessage: ''
};
this._preventFocusOpeningPicker = false;
}
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
var errorMessage = isRequired && !value ? (strings.isRequiredErrorMessage || '*') : '';
this.setState({
selectedDate: value || new Date(),
formattedDate: formatDate && value ? formatDate(value) : null,
errorMessage: errorMessage
});
};
DatePicker.prototype.componentDidMount = function () {
this._events.on(window, 'scroll', this._dismissDatePickerPopup);
this._events.on(window, 'resize', this._dismissDatePickerPopup);
this._events.on(window, 'click', this._onClickCapture, true);
this._events.on(window, 'focus', this._onClickCapture, true);
this._events.on(window, 'touchstart', this._onClickCapture, true);
};
DatePicker.prototype.componentDidUpdate = function () {
if (this._focusOnSelectedDateOnUpdate) {
this.refs.dayPicker.focus();
this._focusOnSelectedDateOnUpdate = false;
}
};
DatePicker.prototype.render = function () {
var rootClass = 'ms-DatePicker';
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput;
var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate, errorMessage = _b.errorMessage;
return (React.createElement("div", {className: rootClass, ref: 'root'},
React.createElement("div", {ref: 'textFieldContainer'},
React.createElement(TextField_1.TextField, {ariaLabel: ariaLabel, "aria-haspopup": 'true', required: isRequired, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, iconClass: Utilities_1.css('ms-Icon ms-Icon--Calendar', label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label'), readOnly: !allowTextInput, value: formattedDate, ref: 'textField'})
),
isDatePickerShown && (React.createElement("div", {className: 'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused ' + (this.props.isMonthPickerVisible ? 'is-monthPickerVisible' : '')},
React.createElement("div", {className: 'ms-DatePicker-holder', onKeyDown: this._onDatePickerPopupKeyDown},
React.createElement("div", {className: 'ms-DatePicker-frame'},
React.createElement("div", {className: 'ms-DatePicker-wrap'},
React.createElement(DatePickerDay_1.DatePickerDay, {selectedDate: selectedDate, navigatedDate: navigatedDate, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: 'dayPicker'}),
React.createElement(DatePickerMonth_1.DatePickerMonth, {navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate}),
React.createElement("span", {className: 'ms-DatePicker-goToday js-goToday', onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0}, strings.goToToday))
)
)
))));
};
DatePicker.prototype._restoreFocusToTextField = function () {
this._preventFocusOpeningPicker = true;
this.refs.textField.focus();
};
DatePicker.prototype._navigateDay = function (date) {
this.setState({
navigatedDate: date
});
};
DatePicker.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
this._focusOnSelectedDateOnUpdate = this._focusOnSelectedDateOnUpdate || focusOnNavigatedDay;
this._navigateDay(date);
};
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) : null,
});
this._restoreFocusToTextField();
if (onSelectDate) {
onSelectDate(date);
}
};
;
DatePicker.prototype._onGotoToday = function () {
this._focusOnSelectedDateOnUpdate = true;
this._navigateDay(new Date());
};
;
DatePicker.prototype._onGotoTodayKeyDown = function (ev) {
if (ev.which === Utilities_1.KeyCodes.enter) {
ev.preventDefault();
this._onGotoToday();
}
};
;
DatePicker.prototype._onTextFieldFocus = function (ev) {
if (!this.props.allowTextInput) {
if (!this._preventFocusOpeningPicker) {
this._showDatePickerPopup();
}
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();
}
this.setState({
errorMessage: '',
formattedDate: newValue
});
}
};
DatePicker.prototype._onTextFieldKeyDown = function (ev) {
switch (ev.which) {
case Utilities_1.KeyCodes.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._restoreFocusToTextField();
this._dismissDatePickerPopup();
}
}
break;
case Utilities_1.KeyCodes.escape:
this._handleEscKey(ev);
break;
default:
break;
}
};
;
DatePicker.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;
}
};
DatePicker.prototype._onClickCapture = function (ev) {
if (!Utilities_1.elementContains(this.refs.root, ev.target)) {
this._dismissDatePickerPopup();
}
};
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._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();
}
};
DatePicker.prototype._handleEscKey = function (ev) {
this._restoreFocusToTextField();
this._dismissDatePickerPopup();
};
DatePicker.prototype._validateTextInput = function () {
var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, formatDate = _a.formatDate, 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,
formattedDate: formatDate && date ? formatDate(date) : null,
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 null;
},
parseDateFromString: function (dateStr) {
var date = Date.parse(dateStr);
if (date) {
return new Date(date);
}
return null;
},
firstDayOfWeek: DatePicker_Props_1.DayOfWeek.Sunday,
isRequired: false,
isMonthPickerVisible: true,
strings: null
};
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onNavigateDate", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onSelectDate", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onGotoToday", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onGotoTodayKeyDown", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldFocus", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldBlur", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldChanged", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldKeyDown", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onDatePickerPopupKeyDown", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onClickCapture", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_onTextFieldClick", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_handleEscKey", null);
__decorate([
Utilities_1.autobind
], DatePicker.prototype, "_validateTextInput", null);
return DatePicker;
}(Utilities_1.BaseComponent));
exports.DatePicker = DatePicker;
//# sourceMappingURL=DatePicker.js.map