UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

326 lines (324 loc) • 14.1 kB
"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