devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
152 lines (151 loc) • 5.07 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/toolbar/m_toolbar.js)
* Version: 24.2.7
* Build date: Mon Apr 28 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
import registerComponent from "../../../core/component_registrator";
import ToolbarBase from "./m_toolbar.base";
import {
toggleItemFocusableElementTabIndex
} from "./m_toolbar.utils";
import {
MultiLineStrategy
} from "./strategy/m_toolbar.multiline";
import {
SingleLineStrategy
} from "./strategy/m_toolbar.singleline";
const TOOLBAR_MULTILINE_CLASS = "dx-toolbar-multiline";
const TOOLBAR_AUTO_HIDE_TEXT_CLASS = "dx-toolbar-text-auto-hide";
class Toolbar extends ToolbarBase {
_getDefaultOptions() {
return _extends({}, super._getDefaultOptions(), {
menuItemTemplate: "menuItem",
menuContainer: void 0,
overflowMenuVisible: false,
multiline: false
})
}
_isMultiline() {
return this.option("multiline")
}
_dimensionChanged(dimension) {
if ("height" === dimension) {
return
}
super._dimensionChanged();
this._layoutStrategy._dimensionChanged()
}
_initMarkup() {
super._initMarkup();
this._updateFocusableItemsTabIndex();
this._layoutStrategy._initMarkup()
}
_renderToolbar() {
super._renderToolbar();
this._renderLayoutStrategy()
}
_itemContainer() {
if (this._isMultiline()) {
return this._$toolbarItemsContainer
}
return super._itemContainer()
}
_renderLayoutStrategy() {
this.$element().toggleClass("dx-toolbar-multiline", this._isMultiline());
this._layoutStrategy = this._isMultiline() ? new MultiLineStrategy(this) : new SingleLineStrategy(this)
}
_renderSections() {
if (this._isMultiline()) {
return
}
return super._renderSections()
}
_postProcessRenderItems() {
this._layoutStrategy._hideOverflowItems();
this._layoutStrategy._updateMenuVisibility();
super._postProcessRenderItems();
this._layoutStrategy._renderMenuItems()
}
_renderItem(index, item, itemContainer, $after) {
const itemElement = super._renderItem(index, item, itemContainer, $after);
this._layoutStrategy._renderItem(item, itemElement);
const {
widget: widget,
showText: showText
} = item;
if ("dxButton" === widget && "inMenu" === showText) {
itemElement.toggleClass("dx-toolbar-text-auto-hide")
}
return itemElement
}
_getItemsWidth() {
return this._layoutStrategy._getItemsWidth()
}
_getMenuItems() {
return this._layoutStrategy._getMenuItems()
}
_getToolbarItems() {
return this._layoutStrategy._getToolbarItems()
}
_arrangeItems() {
if (this.$element().is(":hidden")) {
return
}
const elementWidth = this._layoutStrategy._arrangeItems();
if (!this._isMultiline()) {
super._arrangeItems(elementWidth)
}
}
_itemOptionChanged(item, property, value, prevValue) {
if (!this._isMenuItem(item)) {
super._itemOptionChanged(item, property, value, prevValue)
}
this._layoutStrategy._itemOptionChanged(item, property, value);
if ("disabled" === property || "options.disabled" === property) {
toggleItemFocusableElementTabIndex(this, item)
}
if ("location" === property) {
this.repaint()
}
}
_updateFocusableItemsTabIndex() {
this._getToolbarItems().forEach((item => toggleItemFocusableElementTabIndex(this, item)))
}
_isMenuItem(itemData) {
return "menu" === itemData.location || "always" === itemData.locateInMenu
}
_isToolbarItem(itemData) {
return void 0 === itemData.location || "never" === itemData.locateInMenu
}
_optionChanged(args) {
const {
name: name,
value: value
} = args;
this._layoutStrategy._optionChanged(name, value);
switch (name) {
case "menuContainer":
case "menuItemTemplate":
case "overflowMenuVisible":
break;
case "multiline":
this._invalidate();
break;
case "disabled":
super._optionChanged(args);
this._updateFocusableItemsTabIndex();
break;
default:
super._optionChanged(args)
}
}
updateDimensions() {
this._dimensionChanged()
}
}
registerComponent("dxToolbar", Toolbar);
export default Toolbar;