devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
307 lines (305 loc) • 13 kB
JavaScript
/**
* DevExtreme (cjs/ui/date_box/ui.date_view.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 _editor = _interopRequireDefault(require("../editor/editor"));
var _ui = _interopRequireDefault(require("./ui.date_view_roller"));
var _date = _interopRequireDefault(require("../../core/utils/date"));
var _iterator = require("../../core/utils/iterator");
var _extend = require("../../core/utils/extend");
var _ui2 = _interopRequireDefault(require("./ui.date_utils"));
var _component_registrator = _interopRequireDefault(require("../../core/component_registrator"));
var _date2 = _interopRequireDefault(require("../../localization/date"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
const DATEVIEW_CLASS = "dx-dateview";
const DATEVIEW_COMPACT_CLASS = "dx-dateview-compact";
const DATEVIEW_WRAPPER_CLASS = "dx-dateview-wrapper";
const DATEVIEW_ROLLER_CONTAINER_CLASS = "dx-dateview-rollers";
const DATEVIEW_ROLLER_CLASS = "dx-dateviewroller";
const TYPE = {
date: "date",
datetime: "datetime",
time: "time"
};
const ROLLER_TYPE = {
year: "year",
month: "month",
day: "day",
hours: "hours"
};
const DateView = _editor.default.inherit({
_valueOption: function() {
const value = this.option("value");
const date = new Date(value);
return !value || isNaN(date) ? this._getDefaultDate() : date
},
_getDefaultDate: function() {
const date = new Date;
if (this.option("type") === TYPE.date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate())
}
return date
},
_getDefaultOptions: function() {
return (0, _extend.extend)(this.callBase(), {
minDate: _ui2.default.MIN_DATEVIEW_DEFAULT_DATE,
maxDate: _ui2.default.MAX_DATEVIEW_DEFAULT_DATE,
type: TYPE.date,
value: new Date,
applyCompactClass: false
})
},
_defaultOptionsRules: function() {
return this.callBase().concat([{
device: function(device) {
return "desktop" !== device.deviceType
},
options: {
applyCompactClass: true
}
}])
},
_render: function() {
this.callBase();
this.$element().addClass("dx-dateview");
this._toggleFormatClasses(this.option("type"));
this._toggleCompactClass()
},
_toggleFormatClasses: function(currentFormat, previousFormat) {
this.$element().addClass("dx-dateview-" + currentFormat);
previousFormat && this.$element().removeClass("dx-dateview-" + previousFormat)
},
_toggleCompactClass: function() {
this.$element().toggleClass("dx-dateview-compact", this.option("applyCompactClass"))
},
_wrapper: function() {
return this._$wrapper
},
_renderContentImpl: function() {
this._$wrapper = (0, _renderer.default)("<div>").addClass("dx-dateview-wrapper");
this._renderRollers();
this._$wrapper.appendTo(this.$element())
},
_renderRollers: function() {
if (!this._$rollersContainer) {
this._$rollersContainer = (0, _renderer.default)("<div>").addClass("dx-dateview-rollers")
}
this._$rollersContainer.empty();
this._createRollerConfigs();
this._rollers = {};
const that = this;
(0, _iterator.each)(that._rollerConfigs, (function(name) {
const $roller = (0, _renderer.default)("<div>").appendTo(that._$rollersContainer).addClass("dx-dateviewroller-" + that._rollerConfigs[name].type);
that._rollers[that._rollerConfigs[name].type] = that._createComponent($roller, _ui.default, {
items: that._rollerConfigs[name].displayItems,
selectedIndex: that._rollerConfigs[name].selectedIndex,
showScrollbar: "never",
scrollByContent: true,
onStart: function(e) {
const roller = e.component;
roller._toggleActive(true);
that._setActiveRoller(that._rollerConfigs[name], roller.option("selectedIndex"))
},
onEnd: function(e) {
const roller = e.component;
roller._toggleActive(false)
},
onClick: function(e) {
const roller = e.component;
roller._toggleActive(true);
that._setActiveRoller(that._rollerConfigs[name], roller.option("selectedIndex"));
that._setRollerState(that._rollerConfigs[name], roller.option("selectedIndex"));
roller._toggleActive(false)
},
onSelectedIndexChanged: function(e) {
const roller = e.component;
that._setRollerState(that._rollerConfigs[name], roller.option("selectedIndex"))
}
})
}));
that._$rollersContainer.appendTo(that._wrapper())
},
_createRollerConfigs: function(type) {
const that = this;
type = type || that.option("type");
that._rollerConfigs = {};
_date2.default.getFormatParts(_ui2.default.FORMATS_MAP[type]).forEach((function(partName) {
that._createRollerConfig(partName)
}))
},
_createRollerConfig: function(componentName) {
const componentInfo = _ui2.default.DATE_COMPONENTS_INFO[componentName];
const valueRange = this._calculateRollerConfigValueRange(componentName);
const startValue = valueRange.startValue;
const endValue = valueRange.endValue;
const formatter = componentInfo.formatter;
const curDate = this._getCurrentDate();
const config = {
type: componentName,
setValue: componentInfo.setter,
valueItems: [],
displayItems: [],
getIndex: function(value) {
return value[componentInfo.getter]() - startValue
}
};
for (let i = startValue; i <= endValue; i++) {
config.valueItems.push(i);
config.displayItems.push(formatter(i, curDate))
}
config.selectedIndex = config.getIndex(curDate);
this._rollerConfigs[componentName] = config
},
_setActiveRoller: function(currentRoller) {
const activeRoller = currentRoller && this._rollers[currentRoller.type];
(0, _iterator.each)(this._rollers, (function() {
this.toggleActiveState(this === activeRoller)
}))
},
_updateRollersPosition: function() {
const that = this;
(0, _iterator.each)(this._rollers, (function(type) {
const correctIndex = that._rollerConfigs[type].getIndex(that._getCurrentDate());
this.option("selectedIndex", correctIndex)
}))
},
_setRollerState: function(roller, selectedIndex) {
if (selectedIndex !== roller.selectedIndex) {
const rollerValue = roller.valueItems[selectedIndex];
const setValue = roller.setValue;
let currentValue = new Date(this._getCurrentDate());
let currentDate = currentValue.getDate();
const minDate = this.option("minDate");
const maxDate = this.option("maxDate");
if (roller.type === ROLLER_TYPE.month) {
currentDate = Math.min(currentDate, _ui2.default.getMaxMonthDay(currentValue.getFullYear(), rollerValue))
} else if (roller.type === ROLLER_TYPE.year) {
currentDate = Math.min(currentDate, _ui2.default.getMaxMonthDay(rollerValue, currentValue.getMonth()))
}
currentValue.setDate(currentDate);
currentValue[setValue](rollerValue);
const normalizedDate = _date.default.normalizeDate(currentValue, minDate, maxDate);
currentValue = _ui2.default.mergeDates(normalizedDate, currentValue, "time");
currentValue = _date.default.normalizeDate(currentValue, minDate, maxDate);
this.option("value", currentValue);
roller.selectedIndex = selectedIndex
}
if (roller.type === ROLLER_TYPE.year) {
this._refreshRollers()
}
if (roller.type === ROLLER_TYPE.month) {
this._refreshRoller(ROLLER_TYPE.day);
this._refreshRoller(ROLLER_TYPE.hours)
}
},
_refreshRoller: function(rollerType) {
const roller = this._rollers[rollerType];
if (roller) {
this._createRollerConfig(rollerType);
const rollerConfig = this._rollerConfigs[rollerType];
if (rollerType === ROLLER_TYPE.day || rollerConfig.displayItems.toString() !== roller.option("items").toString()) {
roller.option({
items: rollerConfig.displayItems,
selectedIndex: rollerConfig.selectedIndex
})
}
}
},
_getCurrentDate: function() {
const curDate = this._valueOption();
const minDate = this.option("minDate");
const maxDate = this.option("maxDate");
return _date.default.normalizeDate(curDate, minDate, maxDate)
},
_calculateRollerConfigValueRange: function(componentName) {
const curDate = this._getCurrentDate();
const minDate = this.option("minDate");
const maxDate = this.option("maxDate");
const minYear = _date.default.sameYear(curDate, minDate);
const minMonth = minYear && curDate.getMonth() === minDate.getMonth();
const maxYear = _date.default.sameYear(curDate, maxDate);
const maxMonth = maxYear && curDate.getMonth() === maxDate.getMonth();
const minHour = minMonth && curDate.getDate() === minDate.getDate();
const maxHour = maxMonth && curDate.getDate() === maxDate.getDate();
const componentInfo = _ui2.default.DATE_COMPONENTS_INFO[componentName];
let startValue = componentInfo.startValue;
let endValue = componentInfo.endValue;
if (componentName === ROLLER_TYPE.year) {
startValue = minDate.getFullYear();
endValue = maxDate.getFullYear()
}
if (componentName === ROLLER_TYPE.month) {
if (minYear) {
startValue = minDate.getMonth()
}
if (maxYear) {
endValue = maxDate.getMonth()
}
}
if (componentName === ROLLER_TYPE.day) {
endValue = _ui2.default.getMaxMonthDay(curDate.getFullYear(), curDate.getMonth());
if (minYear && minMonth) {
startValue = minDate.getDate()
}
if (maxYear && maxMonth) {
endValue = maxDate.getDate()
}
}
if (componentName === ROLLER_TYPE.hours) {
startValue = minHour ? minDate.getHours() : startValue;
endValue = maxHour ? maxDate.getHours() : endValue
}
return {
startValue: startValue,
endValue: endValue
}
},
_refreshRollers: function() {
this._refreshRoller(ROLLER_TYPE.month);
this._refreshRoller(ROLLER_TYPE.day);
this._refreshRoller(ROLLER_TYPE.hours)
},
_optionChanged: function(args) {
switch (args.name) {
case "minDate":
case "maxDate":
case "type":
this._renderRollers();
this._toggleFormatClasses(args.value, args.previousValue);
break;
case "visible":
this.callBase(args);
if (args.value) {
this._renderRollers()
}
break;
case "value":
this.option("value", this._valueOption());
this._refreshRollers();
this._updateRollersPosition();
break;
default:
this.callBase(args)
}
},
_clean: function() {
this.callBase();
delete this._$rollersContainer
}
});
(0, _component_registrator.default)("dxDateView", DateView);
var _default = DateView;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;