devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
153 lines (151 loc) • 6.14 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/drop_down_editor/drop_down_button.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 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 _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _extend = require("../../../core/utils/extend");
var _button = _interopRequireDefault(require("../../../ui/button"));
var _button2 = _interopRequireDefault(require("../text_box/texteditor_button_collection/button"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const DROP_DOWN_EDITOR_BUTTON_CLASS = "dx-dropdowneditor-button";
const DROP_DOWN_EDITOR_BUTTON_VISIBLE = "dx-dropdowneditor-button-visible";
const STATE_FOCUSED_CLASS = "dx-state-focused";
const BUTTON_CLASS = "dx-button";
const BUTTON_MODE_CONTAINED_CLASS = "dx-button-mode-contained";
const BUTTON_MESSAGE = "dxDropDownEditor-selectLabel";
class DropDownButton extends _button2.default {
constructor(name, editor, options) {
super(name, editor, options);
this.currentTemplate = null
}
_attachEvents(instance) {
instance.option("onClick", e => {
var _this$editor, _this$editor$_shouldC, _this$editor3;
if (null !== (_this$editor = this.editor) && void 0 !== _this$editor && null !== (_this$editor$_shouldC = _this$editor._shouldCallOpenHandler) && void 0 !== _this$editor$_shouldC && _this$editor$_shouldC.call(_this$editor)) {
var _this$editor2;
null === (_this$editor2 = this.editor) || void 0 === _this$editor2 || _this$editor2._openHandler(e);
return
}
const {
openOnFieldClick: openOnFieldClick
} = (null === (_this$editor3 = this.editor) || void 0 === _this$editor3 ? void 0 : _this$editor3.option()) ?? {};
if (!openOnFieldClick) {
var _this$editor4;
null === (_this$editor4 = this.editor) || void 0 === _this$editor4 || _this$editor4._openHandler(e)
}
});
_events_engine.default.on(instance.$element(), "mousedown", e => {
var _this$editor5;
if (null !== (_this$editor5 = this.editor) && void 0 !== _this$editor5 && _this$editor5.$element().is(".dx-state-focused")) {
e.preventDefault()
}
})
}
_create() {
const {
editor: editor
} = this;
if (!editor) {
return
}
const $element = (0, _renderer.default)("<div>");
const options = this._getOptions();
this._addToContainer($element);
const instance = editor._createComponent($element, _button.default, (0, _extend.extend)({}, options, {
elementAttr: {
"aria-label": _message.default.format(BUTTON_MESSAGE)
}
}));
this._legacyRender(editor.$element(), $element, options.visible);
return {
$element: $element,
instance: instance
}
}
_getOptions() {
const {
editor: editor
} = this;
const visible = this._isVisible();
const {
readOnly: readOnly
} = (null === editor || void 0 === editor ? void 0 : editor.option()) ?? {};
const options = {
focusStateEnabled: false,
hoverStateEnabled: false,
activeStateEnabled: false,
useInkRipple: false,
disabled: readOnly,
visible: visible
};
this._addTemplate(options);
return options
}
_isVisible() {
const {
editor: editor
} = this;
const {
showDropDownButton: showDropDownButton
} = (null === editor || void 0 === editor ? void 0 : editor.option()) ?? {};
return super._isVisible() && !!showDropDownButton
}
_legacyRender($editor, $element, isVisible) {
null === $editor || void 0 === $editor || $editor.toggleClass(DROP_DOWN_EDITOR_BUTTON_VISIBLE, isVisible);
if ($element) {
$element.removeClass("dx-button").removeClass("dx-button-mode-contained").addClass("dx-dropdowneditor-button")
}
}
_isSameTemplate() {
const {
editor: editor
} = this;
const {
dropDownButtonTemplate: dropDownButtonTemplate
} = (null === editor || void 0 === editor ? void 0 : editor.option()) ?? {};
return dropDownButtonTemplate === this.currentTemplate
}
_addTemplate(options) {
var _this$editor6;
if (this._isSameTemplate()) {
return
}
const {
editor: editor
} = this;
const {
dropDownButtonTemplate: dropDownButtonTemplate
} = (null === editor || void 0 === editor ? void 0 : editor.option()) ?? {};
options.template = null === (_this$editor6 = this.editor) || void 0 === _this$editor6 ? void 0 : _this$editor6._getTemplateByOption("dropDownButtonTemplate");
this.currentTemplate = dropDownButtonTemplate
}
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 options = this._getOptions();
null === instance || void 0 === instance || instance.option(options);
this._legacyRender($editor, null === instance || void 0 === instance ? void 0 : instance.$element(), options.visible)
}
}
}
exports.default = DropDownButton;