devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
306 lines (303 loc) • 11.3 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/date_box/m_time_view.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _date = _interopRequireDefault(require("../../../common/core/localization/date"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _editor = _interopRequireDefault(require("../../ui/editor/editor"));
var _m_box = _interopRequireDefault(require("../../ui/m_box"));
var _m_select_box = _interopRequireDefault(require("../../ui/m_select_box"));
var _m_number_box = _interopRequireDefault(require("../../ui/number_box/m_number_box"));
var _m_date_utils = _interopRequireDefault(require("./m_date_utils"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
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)
}
const TIMEVIEW_CLASS = "dx-timeview";
const TIMEVIEW_CLOCK_CLASS = "dx-timeview-clock";
const TIMEVIEW_FIELD_CLASS = "dx-timeview-field";
const TIMEVIEW_HOURARROW_CLASS = "dx-timeview-hourarrow";
const TIMEVIEW_TIME_SEPARATOR_CLASS = "dx-timeview-time-separator";
const TIMEVIEW_FORMAT12_CLASS = "dx-timeview-format12";
const TIMEVIEW_FORMAT12_AM = -1;
const TIMEVIEW_FORMAT12_PM = 1;
const TIMEVIEW_MINUTEARROW_CLASS = "dx-timeview-minutearrow";
const rotateArrow = function($arrow, angle, offset) {
cssRotate($arrow, angle, offset)
};
const cssRotate = function($arrow, angle, offset) {
$arrow.css("transform", `rotate(${angle}deg) translate(0,${offset}px)`)
};
class TimeView extends _editor.default {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
value: new Date(Date.now()),
use24HourFormat: true,
_showClock: true,
_arrowOffset: 5
})
}
_getValue() {
const {
value: value
} = this.option();
return value || new Date
}
_init() {
super._init();
this.$element().addClass("dx-timeview")
}
_render() {
super._render();
this._renderBox();
this._updateTime()
}
_renderBox() {
const $box = (0, _renderer.default)("<div>").appendTo(this.$element());
const items = [];
if (this.option("_showClock")) {
items.push({
ratio: 1,
shrink: 0,
baseSize: "auto",
template: this._renderClock.bind(this)
})
}
items.push({
ratio: 0,
shrink: 0,
baseSize: "auto",
template: this._renderField.bind(this)
});
this._createComponent($box, _m_box.default, {
height: "100%",
width: "100%",
direction: "col",
items: items
})
}
_renderClock(_, __, container) {
this._$hourArrow = (0, _renderer.default)("<div>").addClass("dx-timeview-hourarrow");
this._$minuteArrow = (0, _renderer.default)("<div>").addClass("dx-timeview-minutearrow");
const $container = (0, _renderer.default)(container);
$container.addClass("dx-timeview-clock").append(this._$hourArrow).append(this._$minuteArrow);
this.setAria("role", "presentation", $container)
}
_updateClock() {
const time = this._getValue();
const hourArrowAngle = time.getHours() / 12 * 360 + time.getMinutes() / 60 * 30;
const minuteArrowAngle = time.getMinutes() / 60 * 360;
rotateArrow(this._$hourArrow, hourArrowAngle, this.option("_arrowOffset"));
rotateArrow(this._$minuteArrow, minuteArrowAngle, this.option("_arrowOffset"))
}
_getBoxItems(is12HourFormat) {
const items = [{
ratio: 0,
shrink: 0,
baseSize: "auto",
template: () => this._hourBox.$element()
}, {
ratio: 0,
shrink: 0,
baseSize: "auto",
template: (0, _renderer.default)("<div>").addClass("dx-timeview-time-separator").text(_date.default.getTimeSeparator())
}, {
ratio: 0,
shrink: 0,
baseSize: "auto",
template: () => this._minuteBox.$element()
}];
if (is12HourFormat) {
items.push({
ratio: 0,
shrink: 0,
baseSize: "auto",
template: () => this._format12.$element()
})
}
return items
}
_renderField() {
const is12HourFormat = !this.option("use24HourFormat");
this._createHourBox(is12HourFormat);
this._createMinuteBox();
if (is12HourFormat) {
this._createFormat12Box()
}
return this._createComponent((0, _renderer.default)("<div>").addClass("dx-timeview-field"), _m_box.default, {
direction: "row",
align: "center",
crossAlign: "center",
items: this._getBoxItems(is12HourFormat)
}).$element()
}
_createHourBox(is12HourFormat) {
this._hourBox = this._createComponent((0, _renderer.default)("<div>"), _m_number_box.default, _extends({
min: -1,
max: is12HourFormat ? 13 : 24,
value: this._getValue().getHours(),
onValueChanged: this._onHourBoxValueChanged.bind(this),
onKeyboardHandled: opts => this._keyboardHandler(opts)
}, this._getNumberBoxConfig()));
this._hourBox.setAria("label", "hours")
}
_isPM() {
return !this.option("use24HourFormat") && 1 === this._format12.option("value")
}
_onHourBoxValueChanged(_ref) {
let {
value: value,
component: component
} = _ref;
const currentValue = this._getValue();
const newValue = new Date(currentValue);
let newHours = this._convertMaxHourToMin(value);
component.option("value", newHours);
if (this._isPM()) {
newHours += 12
}
newValue.setHours(newHours);
_m_date_utils.default.normalizeTime(newValue);
this.option("value", newValue)
}
_convertMaxHourToMin(hours) {
const maxHoursValue = this.option("use24HourFormat") ? 24 : 12;
return (maxHoursValue + hours) % maxHoursValue
}
_createMinuteBox() {
this._minuteBox = this._createComponent((0, _renderer.default)("<div>"), _m_number_box.default, _extends({
min: -1,
max: 60,
value: this._getValue().getMinutes(),
onKeyboardHandled: opts => this._keyboardHandler(opts),
onValueChanged: _ref2 => {
let {
value: value,
component: component
} = _ref2;
const newMinutes = (60 + value) % 60;
component.option("value", newMinutes);
const time = new Date(this._getValue());
time.setMinutes(newMinutes);
_m_date_utils.default.normalizeTime(time);
this.option("value", time)
}
}, this._getNumberBoxConfig()));
this._minuteBox.setAria("label", "minutes")
}
_createFormat12Box() {
const periodNames = _date.default.getPeriodNames();
this._format12 = this._createComponent((0, _renderer.default)("<div>").addClass("dx-timeview-format12"), _m_select_box.default, {
items: [{
value: -1,
text: periodNames[0]
}, {
value: 1,
text: periodNames[1]
}],
valueExpr: "value",
displayExpr: "text",
onKeyboardHandled: opts => this._keyboardHandler(opts),
onValueChanged: _ref3 => {
let {
value: value
} = _ref3;
const hours = this._getValue().getHours();
const time = new Date(this._getValue());
const newHours = (hours + 12 * value) % 24;
time.setHours(newHours);
this.option("value", time)
},
value: this._getValue().getHours() >= 12 ? 1 : -1,
stylingMode: this.option("stylingMode")
});
this._format12.setAria("label", "type")
}
_refreshFormat12() {
if (this.option("use24HourFormat")) {
return
}
const value = this._getValue();
const hours = value.getHours();
const isPM = hours >= 12;
const newValue = isPM ? 1 : -1;
this._silentEditorValueUpdate(this._format12, newValue)
}
_silentEditorValueUpdate(editor, value) {
if (editor) {
editor._suppressValueChangeAction();
editor.option("value", value);
editor._resumeValueChangeAction()
}
}
_getNumberBoxConfig() {
const {
stylingMode: stylingMode
} = this.option();
return {
showSpinButtons: true,
displayValueFormatter: value => (value < 10 ? "0" : "") + value,
stylingMode: stylingMode
}
}
_normalizeHours(hours) {
return this.option("use24HourFormat") ? hours : hours % 12 || 12
}
_updateField() {
const hours = this._normalizeHours(this._getValue().getHours());
this._silentEditorValueUpdate(this._hourBox, hours);
this._silentEditorValueUpdate(this._minuteBox, this._getValue().getMinutes());
this._refreshFormat12()
}
_updateTime() {
if (this.option("_showClock")) {
this._updateClock()
}
this._updateField()
}
_visibilityChanged(visible) {
if (visible) {
this._updateTime()
}
}
_optionChanged(args) {
switch (args.name) {
case "value":
this._updateTime();
super._optionChanged(args);
break;
case "_arrowOffset":
break;
case "use24HourFormat":
case "_showClock":
case "stylingMode":
this._invalidate();
break;
default:
super._optionChanged(args)
}
}
}(0, _component_registrator.default)("dxTimeView", TimeView);
var _default = exports.default = TimeView;