devexpress-reporting
Version:
DevExpress Reporting provides the capability to develop a reporting application to create and customize reports.
185 lines (184 loc) • 8.12 kB
JavaScript
/**
* DevExpress HTML/JS Reporting (viewer\widgets\dateRange\dateRangeEditor.js)
* Version: 25.2.3
* Build date: Dec 15, 2025
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* License: https://www.devexpress.com/Support/EULAs/universal.xml
*/
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;
};
import { Locker } from '../../../common/utils/_locker';
import { DateRangeParemeterPopupModel } from '../../mobile/internal/_parametersPopup';
import { DotnetTypes, formatDate, formatTime, koUtils } from '@devexpress/analytics-core/analytics-internal-native';
import { DateRangeDialogElementsKeyboardHelper, TimeRangeDialogElementsKeyboardHelper } from '../../accessibility/_dateRangeKeyboardHelper';
import { BaseRenderingModel, mutable, nativeMultiPlatformEngine } from '@devexpress/analytics-core/analytics-serializer-native';
import { createDateRangeEditorViewModel } from './dateRangeEditor.viewmodel';
import { predefinedDateRanges, predefinedTimeRanges } from './dateRangeEditor.ranges';
import { Editor } from '@devexpress/analytics-core/analytics-widgets-native';
export function createDateRangeEditor(_options, element, model) {
const editor = model instanceof Editor ? model : model?.getModel();
const rangeEditorOptions = {
..._options,
visible: koUtils.unwrap(model?.visible),
disabled: koUtils.unwrap(model?.disabled),
displayName: koUtils.unwrap(model?.displayName),
value: koUtils.unwrap(_options.value),
onValueChanged: (e) => {
if (koUtils.isSubscribable(_options.value))
_options.value(e.value);
else
editor._set('value', e.value);
}
};
const type = nativeMultiPlatformEngine.unwrap(model?.info)?.editor?.type;
const rangeEditor = new DateRangeEditor(rangeEditorOptions, model?.editorInputId, type, model?.visibilityChanged);
if (koUtils.isSubscribable(_options.value))
rangeEditor.addDisposable(_options.value.subscribe((newVal) => rangeEditor.applyDate(newVal)));
else if (editor) {
rangeEditor.addDisposable(editor.events.on('propertyChanged', (args) => {
if (args.propertyName === 'value') {
rangeEditor.applyDate(args.newValue);
}
else if (args.propertyName === 'disabled') {
rangeEditor.disabled = args.newValue;
}
else if (args.propertyName === 'visible') {
rangeEditor.visible = args.newValue;
}
}));
}
return rangeEditor;
}
export class DateRangeEditor extends BaseRenderingModel {
createViewModel() {
return createDateRangeEditorViewModel.call(this, super.createViewModel());
}
_getStringValue(range) {
if (this.isTimeOnlyType)
return range.map(x => formatTime(x)).join(' - ');
return range.map(x => formatDate(x)).join(' - ');
}
getElement() {
if (this._$element)
return this._$element[0];
else
undefined;
}
_isSelected(item) {
return this._displayText === this._getStringValue(item.range());
}
onPropertyChanged(args) {
if (args.propertyName === 'startDate' || args.propertyName === 'endDate') {
this._displayText = this._getStringValue([this.startDate, this.endDate]);
if (this.dialogKeyboardHelper instanceof TimeRangeDialogElementsKeyboardHelper) {
this.dialogKeyboardHelper.clearSelection();
}
}
if (args.propertyName === 'startDate') {
this.applyValue(this.startDate > this.endDate);
}
if (args.propertyName === 'endDate') {
this.applyValue();
}
}
deferredUpdateViewModel() {
return false;
}
updateViewModel(args) {
const viewModel = this.getViewModel();
if (args.propertyName === '_popupVisible') {
viewModel.getPopupSettings(this.isTimeOnlyType).visible = this._popupVisible;
this._visibilityChangedCallback && this._visibilityChangedCallback(this._popupVisible);
}
viewModel.predefinedDateRanges.items.forEach(x => {
x.selected = this._isSelected(x);
});
viewModel.startRange.value = this.startDate;
viewModel.endRange.value = this.endDate;
viewModel.endRange.min = this.startDate;
viewModel.displayValue = this._displayText;
viewModel.disabled = this.disabled;
viewModel.visible = this.visible;
}
constructor(_options, editorInputId, type, visibilityChangedCallback) {
super();
this._options = _options;
this._locker = new Locker();
this._showPopup = () => {
this._popupVisible = true;
};
this._hidePopup = () => {
this._popupVisible = false;
this._$element.get(0).querySelector('input').focus();
};
this.items = [];
this.calendarHeight = '100%';
this._visibilityChangedCallback = visibilityChangedCallback;
this._displayText = this._getStringValue([this.startDate, this.endDate]);
this.type = type;
this.applyDate(this._options.value);
this.disabled = this._options.disabled;
this.visible = this._options.visible;
if (_options.isMobile) {
this.popupTemplate = 'dxrd-menu-parameters-content';
this.popupModel = new DateRangeParemeterPopupModel(this);
}
else {
this.popupModel = this;
this.popupTemplate = this.isTimeOnlyType ? 'dxrv-daterange-editor-timeonly-popup' : 'dxrv-daterange-editor-popup';
}
this.items = this.isTimeOnlyType ? [...predefinedTimeRanges] : [...predefinedDateRanges];
this.dialogKeyboardHelper = this.isTimeOnlyType ? new TimeRangeDialogElementsKeyboardHelper(this) : new DateRangeDialogElementsKeyboardHelper(this);
this._disposables.push(this.dialogKeyboardHelper);
this._editorInputId = editorInputId;
this._displayName = _options.displayName;
}
_toParameterValue() {
return [this.startDate, this.endDate];
}
get isTimeOnlyType() {
return this.type === DotnetTypes.SystemTimeOnly;
}
applyDate(range, force = false) {
this._locker.lock(() => {
this.startDate = range[0];
this.endDate = range[1];
});
if (force)
this.applyValue();
}
inRange(date) {
const _end = new Date(this.endDate.getTime());
const _start = new Date(this.startDate.getTime());
return date <= new Date(_end.setHours(0, 0, 0, 0)) &&
date >= new Date(_start.setHours(0, 0, 0, 0));
}
applyValue(updateEndDate = false) {
this._locker.lock(() => {
updateEndDate && (this.endDate = this.startDate);
this._options.onValueChanged({ value: this._toParameterValue() });
});
}
}
__decorate([
mutable(() => new Date(new Date().setHours(0, 0, 0, 0)))
], DateRangeEditor.prototype, "startDate", void 0);
__decorate([
mutable(() => new Date(new Date().setHours(0, 0, 0, 0)))
], DateRangeEditor.prototype, "endDate", void 0);
__decorate([
mutable(() => false)
], DateRangeEditor.prototype, "_popupVisible", void 0);
__decorate([
mutable(() => '')
], DateRangeEditor.prototype, "_displayText", void 0);
__decorate([
mutable(() => false)
], DateRangeEditor.prototype, "disabled", void 0);
__decorate([
mutable(() => true)
], DateRangeEditor.prototype, "visible", void 0);