@elastic/eui
Version:
Elastic UI Component Library
783 lines (779 loc) • 35.4 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/*
* The MIT License (MIT)
*
* Copyright (c) 2018 HackerOne Inc and individual contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
import Calendar from "./calendar";
import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { newDate, now, cloneDate, isMoment, isDate, isBefore, isAfter, equals, setTime, getMillisecond, getSecond, getMinute, getHour, addDays, addMonths, addWeeks, addYears, subtractDays, subtractMonths, subtractWeeks, subtractYears, isSameTime, isDayDisabled, isDayInRange, getEffectiveMinDate, getEffectiveMaxDate, parseDate, safeDateFormat, getHightLightDaysMap, getYear, getMonth } from "./date_utils";
import { EuiPopover, popoverAnchorPosition } from '../../../popover/popover';
import { EuiFieldText } from '../../../form/field_text';
import { jsx as ___EmotionJSX } from "@emotion/react";
export { default as CalendarContainer } from "./calendar_container";
var outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
// Compares dates year+month combinations
function hasPreSelectionChanged(date1, date2) {
if (date1 && date2) {
return getMonth(date1) !== getMonth(date2) || getYear(date1) !== getYear(date2);
}
return date1 !== date2;
}
function hasSelectionChanged(date1, date2) {
if (date1 && date2) {
if (date1._isValid === false && date2._isValid === false) {
return false;
}
return !equals(date1, date2);
}
return false;
}
/**
* General datepicker component.
*/
var INPUT_ERR_1 = "Date input not valid.";
var DatePicker = /*#__PURE__*/function (_React$Component) {
function DatePicker(props) {
var _this;
_classCallCheck(this, DatePicker);
_this = _callSuper(this, DatePicker, [props]);
_defineProperty(_this, "getPreSelection", function () {
return _this.props.openToDate ? newDate(_this.props.openToDate) : _this.props.selectsEnd && _this.props.startDate ? newDate(_this.props.startDate) : _this.props.selectsStart && _this.props.endDate ? newDate(_this.props.endDate) : now(_this.props.utcOffset);
});
_defineProperty(_this, "calcInitialState", function () {
var _this$props$selected;
var defaultPreSelection = _this.getPreSelection();
var minDate = getEffectiveMinDate(_this.props);
var maxDate = getEffectiveMaxDate(_this.props);
var boundedPreSelection = minDate && isBefore(defaultPreSelection, minDate) ? minDate : maxDate && isAfter(defaultPreSelection, maxDate) ? maxDate : defaultPreSelection;
return {
open: _this.props.startOpen || false,
preventFocus: false,
preSelection: (_this$props$selected = _this.props.selected) !== null && _this$props$selected !== void 0 && _this$props$selected._isValid ? newDate(_this.props.selected) : boundedPreSelection,
// transforming highlighted days (perhaps nested array)
// to flat Map for faster access in day.jsx
highlightDates: getHightLightDaysMap(_this.props.highlightDates),
focused: false,
// We attempt to handle focus trap activation manually,
// but that is not possible with custom inputs like buttons.
// Err on the side of a11y and trap focus when we can't be certain
// that the trigger comoponent will work with our keyDown logic.
enableFocusTrap: _this.props.customInput && _this.props.customInput.type !== 'input' ? true : false
};
});
_defineProperty(_this, "clearPreventFocusTimeout", function () {
if (_this.preventFocusTimeout) {
clearTimeout(_this.preventFocusTimeout);
}
});
_defineProperty(_this, "setFocus", function () {
if (_this.input && _this.input.focus) {
_this.input.focus();
}
});
_defineProperty(_this, "setBlur", function () {
if (_this.input && _this.input.blur) {
_this.input.blur();
}
if (_this.props.onBlur) {
_this.props.onBlur();
}
_this.cancelFocusInput();
});
_defineProperty(_this, "setOpen", function (open) {
var skipSetBlur = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
_this.setState({
open: open,
preSelection: open && _this.state.open ? _this.state.preSelection : _this.calcInitialState().preSelection,
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE
}, function () {
if (!open) {
_this.setState(function (prev) {
return {
focused: skipSetBlur ? prev.focused : false,
enableFocusTrap: skipSetBlur ? false : prev.enableFocusTrap
};
}, function () {
// Skip `onBlur` if
// 1) we are possibly manually moving focus between the input and popover (skipSetBlur) and
// 2) the blur event keeps focus on the input
// Focus is also guaranteed to not be inside the popover at this point
if (!skipSetBlur || document != null && document.activeElement !== _this.input) {
_this.setBlur();
}
_this.setState({
inputValue: null
});
});
}
});
});
_defineProperty(_this, "inputOk", function () {
return isMoment(_this.state.preSelection) || isDate(_this.state.preSelection);
});
_defineProperty(_this, "isCalendarOpen", function () {
return _this.props.open === undefined ? _this.state.open && !_this.props.disabled && !_this.props.readOnly : _this.props.open;
});
_defineProperty(_this, "handleFocus", function (event) {
if (!_this.state.preventFocus) {
_this.props.onFocus(event);
if (!_this.props.preventOpenOnFocus && !_this.props.readOnly) {
_this.setOpen(true);
}
}
_this.setState({
focused: true
});
});
_defineProperty(_this, "cancelFocusInput", function () {
clearTimeout(_this.inputFocusTimeout);
_this.inputFocusTimeout = null;
});
_defineProperty(_this, "deferFocusInput", function () {
_this.cancelFocusInput();
_this.inputFocusTimeout = setTimeout(function () {
return _this.setFocus();
}, 1);
});
_defineProperty(_this, "handleDropdownFocus", function () {
_this.cancelFocusInput();
});
_defineProperty(_this, "handleBlur", function (event) {
if (_this.props.accessibleMode === true) {
// Fire the `onBlur` callback if
// 1) the popover is closed or
// 2) the blur event places focus outside the popover
// Focus is also guaranteed to not on be on input at this point
if (!_this.state.open || _this.popover && !_this.popover.contains(event.relatedTarget)) {
_this.props.onBlur && _this.props.onBlur(event);
}
} else {
if (_this.state.open && !_this.props.withPortal) {
_this.deferFocusInput();
} else {
_this.props.onBlur && _this.props.onBlur(event);
}
_this.setState({
focused: false
});
}
});
_defineProperty(_this, "handleCalendarClickOutside", function (event) {
if (!_this.props.inline) {
_this.setOpen(false, true);
}
_this.props.onClickOutside(event);
if (_this.props.withPortal) {
event.preventDefault();
}
});
_defineProperty(_this, "handleChange", function () {
for (var _len = arguments.length, allArgs = new Array(_len), _key = 0; _key < _len; _key++) {
allArgs[_key] = arguments[_key];
}
var event = allArgs[0];
if (_this.props.onChangeRaw) {
_this.props.onChangeRaw.apply(_this, allArgs);
if (typeof event.isDefaultPrevented !== "function" || event.isDefaultPrevented()) {
return;
}
}
_this.setState({
inputValue: event.target.value,
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT
});
var date = parseDate(event.target.value, _this.props);
if (date || !event.target.value) {
_this.setSelected(date, event, true);
}
});
_defineProperty(_this, "handleSelect", function (date, event) {
// Preventing onFocus event to fix issue
// https://github.com/Hacker0x01/react-datepicker/issues/628
_this.setState({
preventFocus: true
}, function () {
_this.preventFocusTimeout = setTimeout(function () {
return _this.setState({
preventFocus: false
});
}, 50);
return _this.preventFocusTimeout;
});
_this.setSelected(date, event);
if (!_this.props.shouldCloseOnSelect || _this.props.showTimeSelect) {
_this.setPreSelection(date);
} else if (!_this.props.inline) {
_this.setOpen(false, true);
}
});
_defineProperty(_this, "updateSelection", function (newSelection) {
if (_this.props.adjustDateOnChange) {
_this.setSelected(newSelection);
}
_this.setPreSelection(newSelection);
});
_defineProperty(_this, "setSelected", function (date, event, keepInput) {
var changedDate = date;
if (changedDate !== null && isDayDisabled(changedDate, _this.props)) {
return;
}
if (changedDate !== null && _this.props.selected) {
var selected = _this.props.selected;
if (keepInput) selected = newDate(changedDate);
changedDate = setTime(newDate(changedDate), {
hour: getHour(selected),
minute: getMinute(selected),
second: getSecond(selected),
millisecond: getMillisecond(selected)
});
}
if (!isSameTime(_this.props.selected, changedDate) || _this.props.allowSameDay) {
if (changedDate !== null) {
if (!_this.props.inline) {
_this.setState({
preSelection: changedDate
});
}
}
_this.props.onChange(changedDate, event);
}
_this.props.onSelect(changedDate, event);
if (!keepInput) {
_this.setState({
inputValue: null
});
}
});
_defineProperty(_this, "setPreSelection", function (date) {
var isDateRangePresent = typeof _this.props.minDate !== "undefined" && typeof _this.props.maxDate !== "undefined";
var isValidDateSelection = isDateRangePresent && date ? isDayInRange(date, _this.props.minDate, _this.props.maxDate) : true;
if (isValidDateSelection) {
_this.setState({
preSelection: date
});
}
});
_defineProperty(_this, "handleTimeChange", function (time) {
var selected = _this.props.selected ? _this.props.selected : _this.getPreSelection();
var changedDate = setTime(cloneDate(selected), {
hour: getHour(time),
minute: getMinute(time),
second: 0,
millisecond: 0
});
if (!isSameTime(selected, changedDate)) {
_this.setState({
preSelection: changedDate
});
_this.props.onChange(changedDate);
}
_this.props.onSelect(changedDate);
if (_this.props.shouldCloseOnSelect) {
_this.setOpen(false, true);
}
_this.setState({
inputValue: null
});
});
_defineProperty(_this, "onInputClick", function () {
if (!_this.props.disabled && !_this.props.readOnly) {
_this.setOpen(true);
}
_this.props.onInputClick();
});
_defineProperty(_this, "onAccessibleModeButtonKeyDown", function (event) {
var eventKey = event.key;
if (eventKey === " " || eventKey === "Enter") {
event.preventDefault();
_this.onInputClick();
}
});
_defineProperty(_this, "onInputKeyDown", function (event) {
_this.props.onKeyDown(event);
var eventKey = event.key;
if (!_this.state.open && !_this.props.inline && !_this.props.preventOpenOnFocus) {
if (eventKey === "ArrowDown" || eventKey === "ArrowUp") {
event.preventDefault();
_this.setState({
enableFocusTrap: true
}, function () {
_this.onInputClick();
});
}
return;
}
if (_this.state.open && !_this.state.enableFocusTrap) {
if (eventKey === "ArrowDown" || eventKey === "Tab") {
event.preventDefault();
_this.setState({
enableFocusTrap: true
}, function () {
_this.onInputClick();
});
} else if (eventKey === "Escape" || eventKey === "Enter") {
event.preventDefault();
_this.setOpen(false, true);
}
return;
}
var copy = newDate(_this.state.preSelection);
if (eventKey === "Enter") {
event.preventDefault();
if (_this.inputOk() && _this.state.lastPreSelectChange === PRESELECT_CHANGE_VIA_NAVIGATE) {
_this.handleSelect(copy, event);
!_this.props.shouldCloseOnSelect && _this.setPreSelection(copy);
} else {
_this.setOpen(false, true);
}
} else if (eventKey === "Escape") {
event.preventDefault();
_this.setOpen(false, true);
if (!_this.inputOk()) {
_this.props.onInputError({
code: 1,
msg: INPUT_ERR_1
});
}
} else if (eventKey === "Tab") {
_this.setOpen(false, true);
} else if (!_this.props.disabledKeyboardNavigation) {
var newSelection;
switch (eventKey) {
case "ArrowLeft":
newSelection = subtractDays(copy, 1);
break;
case "ArrowRight":
newSelection = addDays(copy, 1);
break;
case "ArrowUp":
newSelection = subtractWeeks(copy, 1);
break;
case "ArrowDown":
newSelection = addWeeks(copy, 1);
break;
case "PageUp":
newSelection = subtractMonths(copy, 1);
break;
case "PageDown":
newSelection = addMonths(copy, 1);
break;
case "Home":
newSelection = subtractYears(copy, 1);
break;
case "End":
newSelection = addYears(copy, 1);
break;
}
if (!newSelection) {
if (_this.props.onInputError) {
_this.props.onInputError({
code: 1,
msg: INPUT_ERR_1
});
}
return; // Let the input component handle this keydown
}
event.preventDefault();
_this.setState({
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE
});
_this.updateSelection(newSelection);
}
});
_defineProperty(_this, "onClearClick", function (event) {
if (event) {
if (event.preventDefault) {
event.preventDefault();
}
}
_this.props.onChange(null, event);
_this.setState({
inputValue: null
});
});
_defineProperty(_this, "clear", function () {
_this.onClearClick();
});
_defineProperty(_this, "renderCalendar", function () {
var _this$props$selected2;
if (!_this.props.inline && !_this.isCalendarOpen()) {
return null;
}
var calendar = ___EmotionJSX(Calendar, {
ref: function ref(elem) {
_this.calendar = elem;
},
locale: _this.props.locale,
adjustDateOnChange: _this.props.adjustDateOnChange,
setOpen: _this.setOpen,
shouldCloseOnSelect: _this.props.shouldCloseOnSelect,
dateFormat: _this.props.dateFormatCalendar,
useWeekdaysShort: _this.props.useWeekdaysShort,
formatWeekDay: _this.props.formatWeekDay,
dropdownMode: _this.props.dropdownMode,
selected: (_this$props$selected2 = _this.props.selected) !== null && _this$props$selected2 !== void 0 && _this$props$selected2._isValid ? _this.props.selected : undefined,
preSelection: _this.state.preSelection,
onSelect: _this.handleSelect,
onWeekSelect: _this.props.onWeekSelect,
openToDate: _this.props.openToDate,
minDate: _this.props.minDate,
maxDate: _this.props.maxDate,
selectsStart: _this.props.selectsStart,
selectsEnd: _this.props.selectsEnd,
startDate: _this.props.startDate,
endDate: _this.props.endDate,
excludeDates: _this.props.excludeDates,
filterDate: _this.props.filterDate,
onClickOutside: _this.handleCalendarClickOutside,
formatWeekNumber: _this.props.formatWeekNumber,
highlightDates: _this.state.highlightDates,
includeDates: _this.props.includeDates,
includeTimes: _this.props.includeTimes,
injectTimes: _this.props.injectTimes,
inline: _this.props.inline,
peekNextMonth: _this.props.peekNextMonth,
showMonthDropdown: _this.props.showMonthDropdown,
useShortMonthInDropdown: _this.props.useShortMonthInDropdown,
showMonthYearDropdown: _this.props.showMonthYearDropdown,
showWeekNumbers: _this.props.showWeekNumbers,
showYearDropdown: _this.props.showYearDropdown,
withPortal: _this.props.withPortal,
forceShowMonthNavigation: _this.props.forceShowMonthNavigation,
showDisabledMonthNavigation: _this.props.showDisabledMonthNavigation,
scrollableYearDropdown: _this.props.scrollableYearDropdown,
scrollableMonthYearDropdown: _this.props.scrollableMonthYearDropdown,
todayButton: _this.props.todayButton,
weekLabel: _this.props.weekLabel,
utcOffset: _this.props.utcOffset,
outsideClickIgnoreClass: outsideClickIgnoreClass,
fixedHeight: _this.props.fixedHeight,
monthsShown: _this.props.monthsShown,
onDropdownFocus: _this.handleDropdownFocus,
onMonthChange: _this.props.onMonthChange,
onYearChange: _this.props.onYearChange,
dayClassName: _this.props.dayClassName,
showTimeSelect: _this.props.showTimeSelect,
showTimeSelectOnly: _this.props.showTimeSelectOnly,
onTimeChange: _this.handleTimeChange,
timeFormat: _this.props.timeFormat,
timeIntervals: _this.props.timeIntervals,
minTime: _this.props.minTime,
maxTime: _this.props.maxTime,
excludeTimes: _this.props.excludeTimes,
timeCaption: _this.props.timeCaption,
className: _this.props.calendarClassName,
container: _this.props.calendarContainer,
yearDropdownItemNumber: _this.props.yearDropdownItemNumber,
previousMonthButtonLabel: _this.props.previousMonthButtonLabel,
nextMonthButtonLabel: _this.props.nextMonthButtonLabel,
disabledKeyboardNavigation: _this.props.disabledKeyboardNavigation,
renderCustomHeader: _this.props.renderCustomHeader,
popperProps: _this.props.popperProps,
renderDayContents: _this.props.renderDayContents,
updateSelection: _this.updateSelection,
accessibleMode: _this.props.accessibleMode,
enableFocusTrap: _this.state.enableFocusTrap,
isCalendarInteractive: !(_this.props.disabled || _this.props.readOnly)
}, _this.props.children);
return calendar;
});
_defineProperty(_this, "renderDateInput", function () {
var _this$props$customInp, _React$cloneElement;
var className = classnames(_this.props.className, _defineProperty({}, outsideClickIgnoreClass, _this.state.open));
var customInput = _this.props.customInput || ___EmotionJSX(EuiFieldText, _extends({
controlOnly: true
}, _this.props.defaultInputProps));
var customInputRef = (_this$props$customInp = _this.props.customInputRef) !== null && _this$props$customInp !== void 0 ? _this$props$customInp : _this.props.customInput ? 'ref' : 'inputRef';
var inputValue = typeof _this.props.value === "string" ? _this.props.value : typeof _this.state.inputValue === "string" ? _this.state.inputValue : safeDateFormat(_this.props.selected, _this.props);
var dataTestSubj = _this.props['data-test-subj'];
return /*#__PURE__*/React.cloneElement(customInput, (_React$cloneElement = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_React$cloneElement, customInputRef, function (input) {
_this.input = input;
}), "value", inputValue), "onBlur", _this.handleBlur), "onChange", _this.handleChange), "onClick", _this.onInputClick), "onFocus", _this.handleFocus), "onKeyDown", _this.onInputKeyDown), "id", _this.props.id), "name", _this.props.name), "autoFocus", _this.props.autoFocus), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_React$cloneElement, "placeholder", _this.props.placeholderText), "disabled", _this.props.disabled), "autoComplete", _this.props.autoComplete), "className", className), "title", _this.props.title), "readOnly", _this.props.readOnly), "required", _this.props.required), "tabIndex", _this.props.tabIndex), "aria-label", _this.state.open ? 'Press the down key to enter a popover containing a calendar. Press the escape key to close the popover.' : 'Press the down key to open a popover containing a calendar.'), "data-test-subj", dataTestSubj ? "".concat(dataTestSubj, "-input") : undefined)));
});
_defineProperty(_this, "renderClearButton", function () {
if (_this.props.isClearable && _this.props.selected != null) {
return ___EmotionJSX("button", {
type: "button",
className: "react-datepicker__close-icon",
onClick: _this.onClearClick,
title: _this.props.clearButtonTitle,
tabIndex: -1
});
} else {
return null;
}
});
_defineProperty(_this, "renderAccessibleButton", function () {
if (_this.props.accessibleModeButton != null) {
return /*#__PURE__*/React.cloneElement(_this.props.accessibleModeButton, {
onClick: _this.onInputClick,
onKeyDown: _this.onAccessibleModeButtonKeyDown,
className: classnames(_this.props.accessibleModeButton.props.className, "react-datepicker__accessible-icon"),
tabIndex: 0
});
} else {
return null;
}
});
_this.state = _this.calcInitialState();
// Refs
_this.input;
_this.calendar;
_this.popover;
return _this;
}
_inherits(DatePicker, _React$Component);
return _createClass(DatePicker, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (prevProps.inline && hasPreSelectionChanged(prevProps.selected, this.props.selected)) {
this.setPreSelection(this.props.selected);
}
if (prevProps.highlightDates !== this.props.highlightDates) {
this.setState({
highlightDates: getHightLightDaysMap(this.props.highlightDates)
});
}
if (!prevState.focused && hasSelectionChanged(prevProps.selected, this.props.selected)) {
this.setState({
inputValue: null
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearPreventFocusTimeout();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var calendar = this.renderCalendar();
var dataTestSubj = this.props['data-test-subj'];
if (this.props.inline && !this.props.withPortal) {
return calendar && /*#__PURE__*/React.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
}) : calendar;
}
if (this.props.withPortal) {
return ___EmotionJSX("div", {
"data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal-container") : undefined
}, !this.props.inline ? ___EmotionJSX("div", {
className: "react-datepicker__input-container",
"data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-input-container") : undefined
}, this.renderDateInput(), this.renderClearButton(), this.renderAccessibleButton()) : null, this.state.open || this.props.inline ? ___EmotionJSX("div", {
className: "react-datepicker__portal",
"data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-portal") : undefined
}, calendar && /*#__PURE__*/React.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
}) : calendar) : null);
}
return ___EmotionJSX(EuiPopover, _extends({
ownFocus: false,
className: this.props.popperClassName,
isOpen: this.isCalendarOpen(),
closePopover: function closePopover() {
return _this2.setOpen(false, true);
},
hasArrow: false,
buffer: 0,
display: "block",
panelPaddingSize: "none",
anchorPosition: this.props.popperPlacement,
container: this.props.popperContainer,
panelRef: function panelRef(elem) {
_this2.popover = elem;
},
panelProps: {
'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-popover") : undefined
}
}, this.props.popperProps, {
button: ___EmotionJSX("div", {
className: "react-datepicker__input-container",
"data-test-subj": dataTestSubj ? "".concat(dataTestSubj, "-input-container") : undefined
}, this.renderDateInput(), this.renderClearButton(), this.renderAccessibleButton())
}), calendar && /*#__PURE__*/React.isValidElement(calendar) ? /*#__PURE__*/React.cloneElement(calendar, {
'data-test-subj': dataTestSubj ? "".concat(dataTestSubj, "-calendar") : calendar.props && calendar.props['data-test-subj']
}) : calendar);
}
}], [{
key: "defaultProps",
get: function get() {
return {
allowSameDay: false,
dateFormat: "L",
dateFormatCalendar: "MMMM YYYY",
onChange: function onChange() {},
disabled: false,
disabledKeyboardNavigation: false,
dropdownMode: "scroll",
onFocus: function onFocus() {},
onBlur: function onBlur() {},
onKeyDown: function onKeyDown() {},
onInputClick: function onInputClick() {},
onSelect: function onSelect() {},
onClickOutside: function onClickOutside() {},
onMonthChange: function onMonthChange() {},
preventOpenOnFocus: false,
onYearChange: function onYearChange() {},
onInputError: function onInputError() {},
monthsShown: 1,
readOnly: false,
withPortal: false,
shouldCloseOnSelect: true,
showTimeSelect: false,
timeIntervals: 30,
timeCaption: "Time",
previousMonthButtonLabel: "Previous Month",
nextMonthButtonLabel: "Next month",
renderDayContents: function renderDayContents(date) {
return date;
},
strictParsing: false
};
}
}]);
}(React.Component);
_defineProperty(DatePicker, "propTypes", {
adjustDateOnChange: PropTypes.bool,
allowSameDay: PropTypes.bool,
autoComplete: PropTypes.string,
autoFocus: PropTypes.bool,
calendarClassName: PropTypes.string,
calendarContainer: PropTypes.func,
children: PropTypes.node,
className: PropTypes.string,
customInput: PropTypes.element,
customInputRef: PropTypes.string,
// eslint-disable-next-line react/no-unused-prop-types
dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
dateFormatCalendar: PropTypes.string,
dayClassName: PropTypes.func,
disabled: PropTypes.bool,
disabledKeyboardNavigation: PropTypes.bool,
dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
endDate: PropTypes.object,
excludeDates: PropTypes.array,
filterDate: PropTypes.func,
fixedHeight: PropTypes.bool,
formatWeekNumber: PropTypes.func,
highlightDates: PropTypes.array,
id: PropTypes.string,
includeDates: PropTypes.array,
includeTimes: PropTypes.array,
injectTimes: PropTypes.array,
inline: PropTypes.bool,
isClearable: PropTypes.bool,
locale: PropTypes.string,
maxDate: PropTypes.object,
minDate: PropTypes.object,
monthsShown: PropTypes.number,
name: PropTypes.string,
onBlur: PropTypes.func,
onChange: PropTypes.func.isRequired,
onSelect: PropTypes.func,
onWeekSelect: PropTypes.func,
onClickOutside: PropTypes.func,
onChangeRaw: PropTypes.func,
onFocus: PropTypes.func,
onInputClick: PropTypes.func,
onKeyDown: PropTypes.func,
onMonthChange: PropTypes.func,
onYearChange: PropTypes.func,
onInputError: PropTypes.func,
open: PropTypes.bool,
openToDate: PropTypes.object,
peekNextMonth: PropTypes.bool,
placeholderText: PropTypes.string,
popperContainer: PropTypes.func,
popperClassName: PropTypes.string,
// <PopperComponent/> props
popperModifiers: PropTypes.object,
// <PopperComponent/> props
popperPlacement: PropTypes.oneOf(popoverAnchorPosition),
popperProps: PropTypes.object,
preventOpenOnFocus: PropTypes.bool,
readOnly: PropTypes.bool,
required: PropTypes.bool,
scrollableYearDropdown: PropTypes.bool,
scrollableMonthYearDropdown: PropTypes.bool,
selected: PropTypes.object,
selectsEnd: PropTypes.bool,
selectsStart: PropTypes.bool,
showMonthDropdown: PropTypes.bool,
showMonthYearDropdown: PropTypes.bool,
showWeekNumbers: PropTypes.bool,
showYearDropdown: PropTypes.bool,
forceShowMonthNavigation: PropTypes.bool,
showDisabledMonthNavigation: PropTypes.bool,
startDate: PropTypes.object,
startOpen: PropTypes.bool,
tabIndex: PropTypes.number,
timeCaption: PropTypes.string,
title: PropTypes.string,
todayButton: PropTypes.node,
useWeekdaysShort: PropTypes.bool,
formatWeekDay: PropTypes.func,
utcOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
value: PropTypes.string,
weekLabel: PropTypes.string,
withPortal: PropTypes.bool,
yearDropdownItemNumber: PropTypes.number,
shouldCloseOnSelect: PropTypes.bool,
showTimeSelect: PropTypes.bool,
showTimeSelectOnly: PropTypes.bool,
timeFormat: PropTypes.string,
timeIntervals: PropTypes.number,
minTime: PropTypes.object,
maxTime: PropTypes.object,
excludeTimes: PropTypes.array,
useShortMonthInDropdown: PropTypes.bool,
clearButtonTitle: PropTypes.string,
previousMonthButtonLabel: PropTypes.string,
nextMonthButtonLabel: PropTypes.string,
renderCustomHeader: PropTypes.func,
renderDayContents: PropTypes.func,
accessibleMode: PropTypes.bool,
accessibleModeButton: PropTypes.element,
strictParsing: PropTypes.bool // eslint-disable-line react/no-unused-prop-types
});
export { DatePicker as default };
var PRESELECT_CHANGE_VIA_INPUT = "input";
var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";