devextreme/esm/__internal/ui/toolbar/toolbar.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/ui/toolbar/toolbar.js)
 * Version: 25.1.4
 * Build date: Tue Aug 05 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 {
    MultiLineStrategy
} from "./strategy/toolbar.multiline";
import {
    SingleLineStrategy
} from "./strategy/toolbar.singleline";
import ToolbarBase from "./toolbar.base";
import {
    toggleItemFocusableElementTabIndex
} from "./toolbar.utils";
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",
            overflowMenuVisible: false,
            multiline: false
        })
    }
    _isMultiline() {
        const {
            multiline: multiline
        } = this.option();
        return 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
        }
        super._renderSections()
    }
    _postProcessRenderItems() {
        this._layoutStrategy._hideOverflowItems();
        this._layoutStrategy._updateMenuVisibility();
        super._postProcessRenderItems();
        this._layoutStrategy._renderMenuItems()
    }
    _renderItem(index, itemData, $container, $itemToReplace) {
        const $itemElement = super._renderItem(index, itemData, $container, $itemToReplace);
        this._layoutStrategy._renderItem(itemData, $itemElement);
        const {
            widget: widget,
            showText: showText
        } = itemData;
        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 "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;