devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
961 lines (955 loc) • 41.3 kB
JavaScript
/**
* DevExtreme (cjs/ui/date_range_box/ui.date_range_box.js)
* Version: 23.2.6
* Build date: Wed May 01 2024
*
* Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.default = void 0;
var _renderer = _interopRequireDefault(require("../../core/renderer"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _dom_adapter = _interopRequireDefault(require("../../core/dom_adapter"));
var _extend = require("../../core/utils/extend");
var _icon = require("../../core/utils/icon");
var _config = _interopRequireDefault(require("../../core/config"));
var _devices = _interopRequireDefault(require("../../core/devices"));
var _message = _interopRequireDefault(require("../../localization/message"));
var _themes = require("../themes");
var _editor = _interopRequireDefault(require("../editor/editor"));
var _ui = _interopRequireDefault(require("./ui.multiselect_date_box"));
var _index = _interopRequireDefault(require("../text_box/texteditor_button_collection/index"));
var _ui2 = _interopRequireDefault(require("../drop_down_editor/ui.drop_down_button"));
var _uiText_editor = _interopRequireDefault(require("../text_box/ui.text_editor.clear"));
var _function_template = require("../../core/templates/function_template");
var _uiDate_range = require("./ui.date_range.utils");
var _iterator = require("../../core/utils/iterator");
var _inflector = require("../../core/utils/inflector");
var _index2 = require("../../events/utils/index");
var _events_engine = _interopRequireDefault(require("../../events/core/events_engine"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key]
}
}
}
return target
};
return _extends.apply(this, arguments)
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
const DATERANGEBOX_CLASS = "dx-daterangebox";
const TEXTEDITOR_LABEL_STATIC_CLASS = "dx-texteditor-with-label";
const TEXTEDITOR_LABEL_OUTSIDE_CLASS = "dx-texteditor-label-outside";
const TEXTEDITOR_LABEL_FLOATING_CLASS = "dx-texteditor-with-floating-label";
const START_DATEBOX_CLASS = "dx-start-datebox";
const END_DATEBOX_CLASS = "dx-end-datebox";
const DATERANGEBOX_SEPARATOR_CLASS = "dx-daterangebox-separator";
const DROP_DOWN_EDITOR_BUTTON_ICON = "dx-dropdowneditor-icon";
const INVALID_BADGE_CLASS = "dx-show-invalid-badge";
const READONLY_STATE_CLASS = "dx-state-readonly";
const TEXTEDITOR_CLASS = "dx-texteditor";
const TEXTEDITOR_INPUT_CLASS = "dx-texteditor-input";
const TEXTEDITOR_EMPTY_INPUT_CLASS = "dx-texteditor-empty";
const DROP_DOWN_EDITOR_CLASS = "dx-dropdowneditor";
const DROP_DOWN_EDITOR_ACTIVE_CLASS = "dx-dropdowneditor-active";
const SEPARATOR_ICON_NAME = "to";
const EVENTS_LIST = ["KeyDown", "KeyUp", "Change", "Cut", "Copy", "Paste", "Input", "EnterKey"];
let DateRangeBox = function(_Editor) {
_inheritsLoose(DateRangeBox, _Editor);
function DateRangeBox() {
return _Editor.apply(this, arguments) || this
}
var _proto = DateRangeBox.prototype;
_proto._getDefaultOptions = function() {
return (0, _extend.extend)(_Editor.prototype._getDefaultOptions.call(this), {
acceptCustomValue: true,
activeStateEnabled: true,
applyButtonText: _message.default.format("OK"),
applyValueMode: "instantly",
buttons: void 0,
calendarOptions: {},
cancelButtonText: _message.default.format("Cancel"),
endDateOutOfRangeMessage: _message.default.format("dxDateRangeBox-endDateOutOfRangeMessage"),
dateSerializationFormat: void 0,
deferRendering: true,
disableOutOfRangeSelection: false,
disabledDates: null,
displayFormat: null,
dropDownButtonTemplate: "dropDownButton",
dropDownOptions: {},
endDate: null,
endDateInputAttr: {},
endDateLabel: _message.default.format("dxDateRangeBox-endDateLabel"),
endDateName: "",
endDatePlaceholder: "",
endDateText: void 0,
focusStateEnabled: true,
hoverStateEnabled: true,
invalidStartDateMessage: _message.default.format("dxDateRangeBox-invalidStartDateMessage"),
invalidEndDateMessage: _message.default.format("dxDateRangeBox-invalidEndDateMessage"),
isValid: true,
labelMode: "static",
max: void 0,
min: void 0,
multiView: true,
onChange: null,
onClosed: null,
onCopy: null,
onCut: null,
onEnterKey: null,
onInput: null,
onKeyDown: null,
onKeyUp: null,
onOpened: null,
onPaste: null,
onValueChanged: null,
openOnFieldClick: true,
opened: false,
pickerType: "calendar",
readOnly: false,
showClearButton: false,
showDropDownButton: true,
spellcheck: false,
startDate: null,
startDateInputAttr: {},
startDateLabel: _message.default.format("dxDateRangeBox-startDateLabel"),
startDateName: "",
startDateOutOfRangeMessage: _message.default.format("dxDateRangeBox-startDateOutOfRangeMessage"),
startDatePlaceholder: "",
startDateText: void 0,
stylingMode: (0, _config.default)().editorStylingMode || "outlined",
todayButtonText: _message.default.format("dxCalendar-todayButtonText"),
useHiddenSubmitElement: false,
useMaskBehavior: false,
validationError: null,
validationErrors: null,
validationMessageMode: "auto",
validationMessagePosition: "auto",
validationStatus: "valid",
value: [null, null],
valueChangeEvent: "change",
_internalValidationErrors: [],
_currentSelection: "startDate"
})
};
_proto._defaultOptionsRules = function() {
return _Editor.prototype._defaultOptionsRules.call(this).concat([{
device: function() {
const themeName = (0, _themes.current)();
return (0, _themes.isMaterial)(themeName)
},
options: {
labelMode: "floating",
stylingMode: (0, _config.default)().editorStylingMode || "filled"
}
}, {
device: function() {
const themeName = (0, _themes.current)();
return (0, _themes.isFluent)(themeName)
},
options: {
labelMode: "outside"
}
}, {
device: function() {
const realDevice = _devices.default.real();
const platform = realDevice.platform;
return "ios" === platform || "android" === platform
},
options: {
multiView: false
}
}])
};
_proto._initOptions = function(options) {
_Editor.prototype._initOptions.call(this, options);
const {
value: initialValue
} = this.initialOption();
let {
value: value,
startDate: startDate,
endDate: endDate
} = this.option();
if (value[0] && value[1] && (0, _uiDate_range.getDeserializedDate)(value[0]) > (0, _uiDate_range.getDeserializedDate)(value[1])) {
value = [value[1], value[0]]
}
if (startDate && endDate && (0, _uiDate_range.getDeserializedDate)(startDate) > (0, _uiDate_range.getDeserializedDate)(endDate)) {
[startDate, endDate] = [endDate, startDate]
}
if ((0, _uiDate_range.isSameDateArrays)(initialValue, value)) {
value = [startDate, endDate]
} else {
[startDate, endDate] = value
}
this.option({
startDate: startDate,
endDate: endDate,
value: value
})
};
_proto._createOpenAction = function() {
this._openAction = this._createActionByOption("onOpened", {
excludeValidators: ["disabled", "readOnly"]
})
};
_proto._raiseOpenAction = function() {
if (!this._openAction) {
this._createOpenAction()
}
this._openAction()
};
_proto._createCloseAction = function() {
this._closeAction = this._createActionByOption("onClosed", {
excludeValidators: ["disabled", "readOnly"]
})
};
_proto._raiseCloseAction = function() {
if (!this._closeAction) {
this._createCloseAction()
}
this._closeAction()
};
_proto._createEventAction = function(eventName) {
this["_".concat((0, _inflector.camelize)(eventName), "Action")] = this._createActionByOption("on".concat(eventName), {
excludeValidators: ["readOnly"]
})
};
_proto._raiseAction = function(eventName, event) {
const action = this["_".concat((0, _inflector.camelize)(eventName), "Action")];
if (!action) {
this._createEventAction(eventName)
}
this["_".concat((0, _inflector.camelize)(eventName), "Action")]({
event: event
})
};
_proto._initTemplates = function() {
this._templateManager.addDefaultTemplates({
dropDownButton: new _function_template.FunctionTemplate((function(options) {
const $icon = (0, _renderer.default)("<div>").addClass("dx-dropdowneditor-icon");
(0, _renderer.default)(options.container).append($icon)
}))
});
this.callBase()
};
_proto._getDefaultButtons = function() {
return [{
name: "clear",
Ctor: _uiText_editor.default
}, {
name: "dropDown",
Ctor: _ui2.default
}]
};
_proto._initMarkup = function() {
this.$element().addClass("dx-daterangebox").addClass("dx-texteditor").addClass("dx-dropdowneditor");
this._toggleDropDownEditorActiveClass();
this._toggleEditorLabelClass();
this._toggleReadOnlyState();
this._renderStylingMode();
this._renderEndDateBox();
this._renderSeparator();
this._renderStartDateBox();
this._toggleEmptinessState();
this._renderEmptinessEvent();
this._renderButtonsContainer();
_Editor.prototype._initMarkup.call(this);
this.$element().removeClass(INVALID_BADGE_CLASS)
};
_proto._renderEmptinessEvent = function() {
const eventName = (0, _index2.addNamespace)("input blur", this.NAME);
_events_engine.default.off(this._focusTarget(), eventName);
_events_engine.default.on(this._focusTarget(), eventName, this._toggleEmptinessState.bind(this))
};
_proto._toggleEmptinessState = function() {
const isEmpty = this.getStartDateBox().$element().hasClass("dx-texteditor-empty") && this.getEndDateBox().$element().hasClass("dx-texteditor-empty");
this.$element().toggleClass("dx-texteditor-empty", isEmpty)
};
_proto._attachKeyboardEvents = function() {
if (!this.option("readOnly")) {
_Editor.prototype._attachKeyboardEvents.call(this)
}
};
_proto._toggleReadOnlyState = function() {
const {
readOnly: readOnly
} = this.option();
this.$element().toggleClass("dx-state-readonly", !!readOnly)
};
_proto._toggleDropDownEditorActiveClass = function() {
const {
opened: opened
} = this.option();
this.$element().toggleClass("dx-dropdowneditor-active", opened)
};
_proto._toggleEditorLabelClass = function() {
const {
startDateLabel: startDateLabel,
endDateLabel: endDateLabel,
labelMode: labelMode
} = this.option();
const isLabelVisible = (!!startDateLabel || !!endDateLabel) && "hidden" !== labelMode;
this.$element().removeClass(TEXTEDITOR_LABEL_FLOATING_CLASS).removeClass("dx-texteditor-label-outside").removeClass("dx-texteditor-with-label");
if (isLabelVisible) {
this.$element().addClass("floating" === labelMode ? TEXTEDITOR_LABEL_FLOATING_CLASS : "dx-texteditor-with-label");
if ("outside" === labelMode) {
this.$element().addClass("dx-texteditor-label-outside")
}
}
};
_proto._renderStartDateBox = function() {
this._$startDateBox = (0, _renderer.default)("<div>").addClass("dx-start-datebox").prependTo(this.$element());
this._startDateBox = this._createComponent(this._$startDateBox, _ui.default, this._getStartDateBoxConfig());
this._startDateBox.NAME = "_StartDateBox"
};
_proto._renderEndDateBox = function() {
this._$endDateBox = (0, _renderer.default)("<div>").addClass("dx-end-datebox").appendTo(this.$element());
this._endDateBox = this._createComponent(this._$endDateBox, _ui.default, this._getEndDateBoxConfig());
this._endDateBox.NAME = "_EndDateBox"
};
_proto._renderSeparator = function() {
const $icon = (0, _icon.getImageContainer)("to");
this._$separator = (0, _renderer.default)("<div>").addClass("dx-daterangebox-separator").prependTo(this.$element());
this._renderPreventBlurOnSeparatorClick();
$icon.appendTo(this._$separator)
};
_proto._renderPreventBlurOnSeparatorClick = function() {
const eventName = (0, _index2.addNamespace)("mousedown", this.NAME);
_events_engine.default.off(this._$separator, eventName);
_events_engine.default.on(this._$separator, eventName, e => {
if (!this._hasActiveElement()) {
this.focus()
}
e.preventDefault()
})
};
_proto._renderButtonsContainer = function() {
this._buttonCollection = new _index.default(this, this._getDefaultButtons());
this._$beforeButtonsContainer = null;
this._$afterButtonsContainer = null;
const {
buttons: buttons
} = this.option();
this._$beforeButtonsContainer = this._buttonCollection.renderBeforeButtons(buttons, this.$element());
this._$afterButtonsContainer = this._buttonCollection.renderAfterButtons(buttons, this.$element())
};
_proto._updateButtons = function(names) {
this._buttonCollection.updateButtons(names)
};
_proto._openHandler = function() {
this._toggleOpenState()
};
_proto._shouldCallOpenHandler = function() {
return true
};
_proto._toggleOpenState = function() {
const {
opened: opened
} = this.option();
if (!opened) {
this.getStartDateBox()._focusInput()
}
if (!this.option("readOnly")) {
this.option("opened", !this.option("opened"))
}
};
_proto._clearValueHandler = function(e) {
e.stopPropagation();
this._saveValueChangeEvent(e);
this.clear();
!this._isStartDateActiveElement() && this.focus();
_events_engine.default.trigger((0, _renderer.default)(this.startDateField()), "input")
};
_proto._isClearButtonVisible = function() {
return this.option("showClearButton") && !this.option("readOnly")
};
_proto._focusInHandler = function(event) {
if (this._shouldSkipFocusEvent(event)) {
return
}
_Editor.prototype._focusInHandler.call(this, event)
};
_proto._focusOutHandler = function(event) {
if (this._shouldSkipFocusEvent(event)) {
return
}
_Editor.prototype._focusOutHandler.call(this, event)
};
_proto._shouldSkipFocusEvent = function(event) {
const {
target: target,
relatedTarget: relatedTarget
} = event;
return (0, _renderer.default)(target).is(this.startDateField()) && (0, _renderer.default)(relatedTarget).is(this.endDateField()) || (0, _renderer.default)(target).is(this.endDateField()) && (0, _renderer.default)(relatedTarget).is(this.startDateField())
};
_proto._getPickerType = function() {
const {
pickerType: pickerType
} = this.option();
return ["calendar", "native"].includes(pickerType) ? pickerType : "calendar"
};
_proto._getRestErrors = function(allErrors, partialErrors) {
return allErrors.filter(error => !partialErrors.some(prevError => error.message === prevError.message))
};
_proto._syncValidationErrors = function(optionName, newPartialErrors, previousPartialErrors) {
newPartialErrors || (newPartialErrors = []);
previousPartialErrors || (previousPartialErrors = []);
const allErrors = this.option(optionName) || [];
const otherErrors = this._getRestErrors(allErrors, previousPartialErrors);
this.option(optionName, [...otherErrors, ...newPartialErrors])
};
_proto._getDateBoxConfig = function() {
const options = this.option();
const dateBoxConfig = {
acceptCustomValue: options.acceptCustomValue,
activeStateEnabled: options.activeStateEnabled,
applyValueMode: options.applyValueMode,
dateOutOfRangeMessage: options.dateOutOfRangeMessage,
dateSerializationFormat: options.dateSerializationFormat,
deferRendering: options.deferRendering,
disabled: options.disabled,
displayFormat: options.displayFormat,
focusStateEnabled: options.focusStateEnabled,
isValid: options.isValid,
tabIndex: options.tabIndex,
height: options.height,
hoverStateEnabled: options.hoverStateEnabled,
labelMode: options.labelMode,
max: options.max,
min: options.min,
openOnFieldClick: options.openOnFieldClick,
pickerType: this._getPickerType(),
readOnly: options.readOnly,
rtlEnabled: options.rtlEnabled,
spellcheck: options.spellcheck,
stylingMode: options.stylingMode,
type: "date",
useMaskBehavior: options.useMaskBehavior,
validationMessageMode: options.validationMessageMode,
validationMessagePosition: options.validationMessagePosition,
valueChangeEvent: options.valueChangeEvent,
onKeyDown: options.onKeyDown,
onKeyUp: options.onKeyUp,
onChange: options.onChange,
onInput: options.onInput,
onCut: options.onCut,
onCopy: options.onCopy,
onPaste: options.onPaste,
onEnterKey: options.onEnterKey,
_dateRangeBoxInstance: this,
_showValidationMessage: false
};
(0, _iterator.each)(EVENTS_LIST, (_, eventName) => {
const optionName = "on".concat(eventName);
if (this.hasActionSubscription(optionName)) {
dateBoxConfig[optionName] = e => {
this._raiseAction(eventName, e.event)
}
}
});
return dateBoxConfig
};
_proto._hideOnOutsideClickHandler = function(_ref) {
let {
target: target
} = _ref;
const $target = (0, _renderer.default)(target);
const dropDownButton = this.getButton("dropDown");
const $dropDownButton = dropDownButton && dropDownButton.$element();
const isInputClicked = !!$target.closest(this.$element()).length;
const isDropDownButtonClicked = !!$target.closest($dropDownButton).length;
const isOutsideClick = !isInputClicked && !isDropDownButtonClicked;
return isOutsideClick
};
_proto._getStartDateBoxConfig = function() {
var _options$dropDownOpti;
const options = this.option();
return _extends({}, this._getDateBoxConfig(), {
applyButtonText: options.applyButtonText,
calendarOptions: options.calendarOptions,
cancelButtonText: options.cancelButtonText,
dateOutOfRangeMessage: options.startDateOutOfRangeMessage,
deferRendering: options.deferRendering,
disabledDates: null === (_options$dropDownOpti = options.dropDownOptions) || void 0 === _options$dropDownOpti ? void 0 : _options$dropDownOpti.disabledDates,
dropDownOptions: _extends({
showTitle: false,
title: "",
hideOnOutsideClick: e => this._hideOnOutsideClickHandler(e),
hideOnParentScroll: false,
preventScrollEvents: false
}, options.dropDownOptions),
invalidDateMessage: options.invalidStartDateMessage,
onValueChanged: _ref2 => {
let {
value: value,
event: event
} = _ref2;
const newValue = [value, this.option("value")[1]];
this.updateValue(newValue, event)
},
opened: options.opened,
onOpened: () => {
this._raiseOpenAction()
},
onClosed: () => {
this._raiseCloseAction()
},
onOptionChanged: args => {
const {
name: name,
value: value,
previousValue: previousValue
} = args;
if ("text" === name) {
this.option("startDateText", value)
}
if ("validationErrors" === name) {
this._syncValidationErrors("_internalValidationErrors", value, previousValue)
}
},
todayButtonText: options.todayButtonText,
showClearButton: false,
showDropDownButton: false,
value: this.option("value")[0],
label: options.startDateLabel,
placeholder: options.startDatePlaceholder,
inputAttr: options.startDateInputAttr,
name: options.startDateName,
_showValidationIcon: false
})
};
_proto._getEndDateBoxConfig = function() {
const options = this.option();
return _extends({}, this._getDateBoxConfig(), {
invalidDateMessage: options.invalidEndDateMessage,
dateOutOfRangeMessage: options.endDateOutOfRangeMessage,
onValueChanged: _ref3 => {
let {
value: value,
event: event
} = _ref3;
const newValue = [this.option("value")[0], value];
this.updateValue(newValue, event)
},
onOptionChanged: args => {
const {
name: name,
value: value,
previousValue: previousValue
} = args;
if ("text" === name) {
this.option("endDateText", value)
}
if ("validationErrors" === name) {
this._syncValidationErrors("_internalValidationErrors", value, previousValue)
}
},
opened: options.opened,
showClearButton: false,
showDropDownButton: false,
value: this.option("value")[1],
label: options.endDateLabel,
placeholder: options.endDatePlaceholder,
deferRendering: true,
inputAttr: options.endDateInputAttr,
name: options.endDateName
})
};
_proto._getValidationMessagePosition = function() {
const {
validationMessagePosition: validationMessagePosition
} = this.option();
if ("auto" === validationMessagePosition) {
return this.option("opened") ? "top" : "bottom"
}
return validationMessagePosition
};
_proto._getSerializedDates = function(_ref4) {
let [startDate, endDate] = _ref4;
return [this.getStartDateBox()._serializeDate((0, _uiDate_range.getDeserializedDate)(startDate)), this.getStartDateBox()._serializeDate((0, _uiDate_range.getDeserializedDate)(endDate))]
};
_proto.updateValue = function(newValue, event) {
if (!(0, _uiDate_range.isSameDateArrays)(newValue, this.option("value"))) {
if (event) {
this._saveValueChangeEvent(event)
}
this.option("value", this._getSerializedDates(newValue))
}
};
_proto._updateDateBoxesValue = function(newValue) {
const startDateBox = this.getStartDateBox();
const endDateBox = this.getEndDateBox();
const [newStartDate, newEndDate] = newValue;
const oldStartDate = startDateBox.option("value");
const oldEndDate = endDateBox.option("value");
if (!(0, _uiDate_range.isSameDates)(newStartDate, oldStartDate)) {
startDateBox.option("value", newStartDate)
}
if (!(0, _uiDate_range.isSameDates)(newEndDate, oldEndDate)) {
endDateBox.option("value", newEndDate)
}
};
_proto._renderAccessKey = function() {
const $startDateInput = (0, _renderer.default)(this.field()[0]);
const {
accessKey: accessKey
} = this.option();
$startDateInput.attr("accesskey", accessKey)
};
_proto._focusTarget = function() {
return this.$element().find(".".concat("dx-texteditor-input"))
};
_proto._focusEventTarget = function() {
return this.element()
};
_proto._focusClassTarget = function() {
return this.$element()
};
_proto._toggleFocusClass = function(isFocused, $element) {
_Editor.prototype._toggleFocusClass.call(this, isFocused, this._focusClassTarget($element))
};
_proto._hasActiveElement = function() {
return this._isStartDateActiveElement() || this._isEndDateActiveElement()
};
_proto._isStartDateActiveElement = function() {
return this._isActiveElement(this.startDateField())
};
_proto._isEndDateActiveElement = function() {
return this._isActiveElement(this.endDateField())
};
_proto._isActiveElement = function(input) {
return (0, _renderer.default)(input).is(_dom_adapter.default.getActiveElement(input))
};
_proto._popupContentIdentifier = function(identifier) {
if (identifier) {
this._popupContentId = identifier
}
return this._popupContentId
};
_proto._setAriaAttributes = function() {
const {
opened: opened
} = this.option();
const arias = {
expanded: opened,
controls: this._popupContentIdentifier()
};
const ariaOwns = opened ? this._popupContentIdentifier() : void 0;
this.setAria(arias);
this.setAria("owns", ariaOwns, this.$element())
};
_proto._cleanButtonContainers = function() {
var _this$_$beforeButtons, _this$_$afterButtonsC;
null === (_this$_$beforeButtons = this._$beforeButtonsContainer) || void 0 === _this$_$beforeButtons ? void 0 : _this$_$beforeButtons.remove();
null === (_this$_$afterButtonsC = this._$afterButtonsContainer) || void 0 === _this$_$afterButtonsC ? void 0 : _this$_$afterButtonsC.remove();
this._buttonCollection.clean();
this._$beforeButtonsContainer = null;
this._$afterButtonsContainer = null
};
_proto._applyCustomValidation = function(value) {
this.validationRequest.fire({
editor: this,
value: value
})
};
_proto._clean = function() {
var _this$_$startDateBox, _this$_$endDateBox, _this$_$separator;
this._cleanButtonContainers();
null === (_this$_$startDateBox = this._$startDateBox) || void 0 === _this$_$startDateBox ? void 0 : _this$_$startDateBox.remove();
null === (_this$_$endDateBox = this._$endDateBox) || void 0 === _this$_$endDateBox ? void 0 : _this$_$endDateBox.remove();
null === (_this$_$separator = this._$separator) || void 0 === _this$_$separator ? void 0 : _this$_$separator.remove();
_Editor.prototype._clean.call(this)
};
_proto._optionChanged = function(args) {
const {
name: name,
fullName: fullName,
value: value,
previousValue: previousValue
} = args;
switch (name) {
case "acceptCustomValue":
case "dateSerializationFormat":
case "displayFormat":
case "max":
case "min":
case "openOnFieldClick":
case "spellcheck":
case "useMaskBehavior":
case "valueChangeEvent":
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
break;
case "rtlEnabled":
_Editor.prototype._optionChanged.call(this, args);
break;
case "labelMode":
this._toggleEditorLabelClass();
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
break;
case "applyButtonText":
case "applyValueMode":
case "cancelButtonText":
case "deferRendering":
case "disabledDates":
case "todayButtonText":
this.getStartDateBox().option(name, value);
break;
case "opened":
this._toggleDropDownEditorActiveClass();
this.getStartDateBox().option(name, value);
this.getEndDateBox()._setOptionWithoutOptionChange(name, value);
break;
case "buttons":
this._cleanButtonContainers();
this._renderButtonsContainer();
break;
case "calendarOptions":
case "dropDownOptions":
this.getStartDateBox().option(fullName, value);
break;
case "pickerType": {
const pickerType = this._getPickerType();
this.getStartDateBox().option(name, pickerType);
this.getEndDateBox().option(name, pickerType);
break
}
case "dateOutOfRangeMessage":
break;
case "height":
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
_Editor.prototype._optionChanged.call(this, args);
break;
case "dropDownButtonTemplate":
case "showDropDownButton":
this._updateButtons(["dropDown"]);
break;
case "showClearButton":
this._updateButtons(["clear"]);
break;
case "endDate":
this.updateValue([this.option("value")[0], value]);
break;
case "startDateLabel":
this._toggleEditorLabelClass();
this.getStartDateBox().option("label", value);
break;
case "endDateLabel":
this._toggleEditorLabelClass();
this.getEndDateBox().option("label", value);
break;
case "startDatePlaceholder":
this.getStartDateBox().option("placeholder", value);
break;
case "endDatePlaceholder":
this.getEndDateBox().option("placeholder", value);
break;
case "startDateInputAttr":
this.getStartDateBox().option("inputAttr", value);
break;
case "startDateName":
this.getStartDateBox().option("name", value);
break;
case "endDateInputAttr":
this.getEndDateBox().option("inputAttr", value);
break;
case "endDateName":
this.getEndDateBox().option("name", value);
break;
case "multiView":
this.getStartDateBox().option("calendarOptions.viewsCount", value ? 2 : 1);
break;
case "tabIndex":
case "activeStateEnabled":
case "focusStateEnabled":
case "hoverStateEnabled":
_Editor.prototype._optionChanged.call(this, args);
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
break;
case "onValueChanged":
this._createValueChangeAction();
break;
case "onOpened":
this._createOpenAction();
break;
case "onClosed":
this._createCloseAction();
break;
case "onKeyDown":
case "onKeyUp":
case "onChange":
case "onInput":
case "onCut":
case "onCopy":
case "onPaste":
case "onEnterKey":
this._createEventAction(name.replace("on", ""));
break;
case "readOnly":
case "disabled":
this._updateButtons();
_Editor.prototype._optionChanged.call(this, args);
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
break;
case "disableOutOfRangeSelection":
break;
case "startDate":
this.updateValue([value, this.option("value")[1]]);
break;
case "stylingMode":
this._renderStylingMode();
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
break;
case "startDateText":
case "endDateText":
case "useHiddenSubmitElement":
break;
case "invalidStartDateMessage":
this.getStartDateBox().option("invalidDateMessage", value);
break;
case "invalidEndDateMessage":
this.getEndDateBox().option("invalidDateMessage", value);
break;
case "startDateOutOfRangeMessage":
this.getStartDateBox().option("dateOutOfRangeMessage", value);
break;
case "endDateOutOfRangeMessage":
this.getEndDateBox().option("dateOutOfRangeMessage", value);
break;
case "validationMessagePosition":
this.getStartDateBox().option(name, value);
_Editor.prototype._optionChanged.call(this, args);
break;
case "_internalValidationErrors": {
this._syncValidationErrors("validationErrors", value, previousValue);
const validationErrors = this.option("validationErrors");
this.option("isValid", !(null !== validationErrors && void 0 !== validationErrors && validationErrors.length));
break
}
case "isValid": {
this.getStartDateBox().option(name, value);
this.getEndDateBox().option(name, value);
const isValid = value && !this.option("_internalValidationErrors").length;
if (this._shouldSkipIsValidChange || isValid === value) {
_Editor.prototype._optionChanged.call(this, args);
return
}
this._shouldSkipIsValidChange = true;
this.option("isValid", isValid);
this._shouldSkipIsValidChange = false;
break
}
case "validationErrors": {
const internalValidationErrors = this.option("_internalValidationErrors") || [];
const allErrors = value || [];
const externalErrors = this._getRestErrors(allErrors, internalValidationErrors);
const errors = [...externalErrors, ...internalValidationErrors];
const newValue = errors.length ? errors : null;
this._options.silent("validationErrors", newValue);
_Editor.prototype._optionChanged.call(this, _extends({}, args, {
value: newValue
}));
break
}
case "value": {
const newValue = (0, _uiDate_range.sortDatesArray)(value);
if (!(0, _uiDate_range.isSameDateArrays)(newValue, previousValue)) {
const isDirty = !(0, _uiDate_range.isSameDateArrays)(newValue, this._initialValue);
this.option("isDirty", isDirty);
this._setOptionWithoutOptionChange("value", newValue);
this._setOptionWithoutOptionChange("startDate", newValue[0]);
this._setOptionWithoutOptionChange("endDate", newValue[1]);
this._applyCustomValidation(newValue);
this._updateDateBoxesValue(newValue);
this.getStartDateBox()._strategy.renderValue();
this._toggleEmptinessState();
this._raiseValueChangeAction(newValue, previousValue);
this._saveValueChangeEvent(void 0)
}
break
}
case "_currentSelection":
break;
default:
_Editor.prototype._optionChanged.call(this, args)
}
};
_proto.getStartDateBox = function() {
return this._startDateBox
};
_proto.getEndDateBox = function() {
return this._endDateBox
};
_proto.getButton = function(name) {
return this._buttonCollection.getButton(name)
};
_proto.open = function() {
this.option("opened", true)
};
_proto.close = function() {
this.option("opened", false)
};
_proto.content = function() {
return this.getStartDateBox().content()
};
_proto.field = function() {
return [this.startDateField(), this.endDateField()]
};
_proto.startDateField = function() {
return this.getStartDateBox().field()
};
_proto.endDateField = function() {
return this.getEndDateBox().field()
};
_proto.focus = function() {
this.getStartDateBox().focus()
};
_proto.reset = function() {
_Editor.prototype.reset.call(this);
const startDateBox = this.getStartDateBox();
const endDateBox = this.getEndDateBox();
startDateBox.reset();
endDateBox.reset();
startDateBox._updateInternalValidationState(true);
endDateBox._updateInternalValidationState(true)
};
_proto.clear = function() {
_Editor.prototype.clear.call(this);
this.getEndDateBox().clear();
this.getStartDateBox().clear()
};
return DateRangeBox
}(_editor.default);
(0, _component_registrator.default)("dxDateRangeBox", DateRangeBox);
var _default = DateRangeBox;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;