devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
118 lines (117 loc) • 4.98 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/number_box/m_number_box.spins.js)
* Version: 25.2.8
* Build date: Mon Jun 08 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import eventsEngine from "../../../common/core/events/core/events_engine";
import pointer from "../../../common/core/events/pointer";
import {
addNamespace
} from "../../../common/core/events/utils/index";
import $ from "../../../core/renderer";
import {
extend
} from "../../../core/utils/extend";
import TextEditorButton from "../../ui/text_box/texteditor_button_collection/button";
import SpinButton from "./m_number_box.spin";
const SPIN_CLASS = "dx-numberbox-spin";
const SPIN_CONTAINER_CLASS = "dx-numberbox-spin-container";
const SPIN_TOUCH_FRIENDLY_CLASS = "dx-numberbox-spin-touch-friendly";
export default class SpinButtons extends TextEditorButton {
_attachEvents(instance, $spinContainer) {
const {
editor: editor
} = this;
if (!editor) {
return
}
const eventName = addNamespace(pointer.down, editor.NAME ?? "");
const $spinContainerChildren = $spinContainer.children();
const pointerDownAction = editor._createAction(e => {
var _this$editor;
null === (_this$editor = this.editor) || void 0 === _this$editor || _this$editor._spinButtonsPointerDownHandler(e)
});
eventsEngine.off($spinContainer, eventName);
eventsEngine.on($spinContainer, eventName, e => pointerDownAction({
event: e
}));
SpinButton.getInstance($spinContainerChildren.eq(0)).option("onChange", e => {
var _this$editor2;
null === (_this$editor2 = this.editor) || void 0 === _this$editor2 || _this$editor2._spinUpChangeHandler(e)
});
SpinButton.getInstance($spinContainerChildren.eq(1)).option("onChange", e => {
var _this$editor3;
null === (_this$editor3 = this.editor) || void 0 === _this$editor3 || _this$editor3._spinDownChangeHandler(e)
})
}
_create() {
const {
editor: editor
} = this;
const $spinContainer = $("<div>").addClass(SPIN_CONTAINER_CLASS);
const $spinUp = $("<div>").appendTo($spinContainer);
const $spinDown = $("<div>").appendTo($spinContainer);
const options = this._getOptions();
this._addToContainer($spinContainer);
null === editor || void 0 === editor || editor._createComponent($spinUp, SpinButton, extend({
direction: "up"
}, options));
null === editor || void 0 === editor || editor._createComponent($spinDown, SpinButton, extend({
direction: "down"
}, options));
this._legacyRender(null === editor || void 0 === editor ? void 0 : editor.$element(), this._isTouchFriendly(), options.visible);
return {
instance: $spinContainer,
$element: $spinContainer
}
}
_getOptions() {
const {
editor: editor
} = this;
const visible = this._isVisible();
const disabled = null === editor || void 0 === editor ? void 0 : editor.option("disabled");
return {
visible: visible,
disabled: disabled
}
}
_isVisible() {
const {
editor: editor
} = this;
return super._isVisible() && (null === editor || void 0 === editor ? void 0 : editor.option("showSpinButtons"))
}
_isTouchFriendly() {
const {
editor: editor
} = this;
return (null === editor || void 0 === editor ? void 0 : editor.option("showSpinButtons")) && (null === editor || void 0 === editor ? void 0 : editor.option("useLargeSpinButtons"))
}
_legacyRender($editor, isTouchFriendly, isVisible) {
$editor.toggleClass(SPIN_TOUCH_FRIENDLY_CLASS, isTouchFriendly);
$editor.toggleClass(SPIN_CLASS, isVisible)
}
update() {
const shouldUpdate = super.update();
if (shouldUpdate) {
const {
editor: editor,
instance: instance
} = this;
const $editor = null === editor || void 0 === editor ? void 0 : editor.$element();
const isVisible = this._isVisible();
const isTouchFriendly = this._isTouchFriendly();
const $spinButtons = instance.children();
const spinUp = SpinButton.getInstance($spinButtons.eq(0));
const spinDown = SpinButton.getInstance($spinButtons.eq(1));
const options = this._getOptions();
spinUp.option(options);
spinDown.option(options);
this._legacyRender($editor, isTouchFriendly, isVisible)
}
}
}