devextreme/cjs/__internal/ui/toolbar/internal/m_toolbar.menu.list.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/ui/toolbar/internal/m_toolbar.menu.list.js)
 * Version: 25.1.3
 * Build date: Wed Jun 25 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 _renderer = _interopRequireDefault(require("../../../../core/renderer"));
var _iterator = require("../../../../core/utils/iterator");
var _m_list = require("../../../ui/list/m_list.base");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}
const TOOLBAR_MENU_ACTION_CLASS = "dx-toolbar-menu-action";
const TOOLBAR_HIDDEN_BUTTON_CLASS = "dx-toolbar-hidden-button";
const TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS = "dx-toolbar-hidden-button-group";
const TOOLBAR_MENU_SECTION_CLASS = "dx-toolbar-menu-section";
const TOOLBAR_MENU_CUSTOM_CLASS = "dx-toolbar-menu-custom";
const TOOLBAR_MENU_LAST_SECTION_CLASS = "dx-toolbar-menu-last-section";
const SCROLLVIEW_CONTENT_CLASS = "dx-scrollview-content";
class ToolbarMenuList extends _m_list.ListBase {
    _init() {
        super._init();
        this._activeStateUnit = ".dx-toolbar-menu-action:not(.dx-toolbar-hidden-button-group)"
    }
    _initMarkup() {
        this._renderSections();
        super._initMarkup();
        this._setMenuRole()
    }
    _getSections() {
        return this._itemContainer().children()
    }
    _itemElements() {
        return this._getSections().children(this._itemSelector())
    }
    _renderSections() {
        const $container = this._itemContainer();
        (0, _iterator.each)(["before", "center", "after", "menu"], ((_, section) => {
            const sectionName = `_$${section}Section`;
            if (!this[sectionName]) {
                this[sectionName] = (0, _renderer.default)("<div>").addClass("dx-toolbar-menu-section")
            }
            this[sectionName].appendTo($container)
        }))
    }
    _renderItems() {
        super._renderItems.apply(this, arguments);
        this._updateSections()
    }
    _setMenuRole() {
        const $menuContainer = this.$element().find(".dx-scrollview-content");
        $menuContainer.attr("role", "menu")
    }
    _updateSections() {
        const $sections = this.$element().find(".dx-toolbar-menu-section");
        $sections.removeClass("dx-toolbar-menu-last-section");
        $sections.not(":empty").eq(-1).addClass("dx-toolbar-menu-last-section")
    }
    _renderItem(index, item, itemContainer, $after) {
        const $container = this[`_$${item.location??"menu"}Section`];
        const itemElement = super._renderItem(index, item, $container, $after);
        const itemCssClasses = this._getItemCssClasses(item);
        itemElement.addClass(itemCssClasses.join(" "));
        return itemElement
    }
    _getItemCssClasses(item) {
        const cssClasses = [];
        const actionableComponents = this._getActionableComponents();
        if (this._getItemTemplateName({
                itemData: item
            })) {
            cssClasses.push("dx-toolbar-menu-custom")
        }
        if (!item.widget || actionableComponents.includes(item.widget)) {
            cssClasses.push("dx-toolbar-menu-action")
        }
        if ("dxButton" === item.widget) {
            cssClasses.push("dx-toolbar-hidden-button")
        }
        if ("dxButtonGroup" === item.widget) {
            cssClasses.push("dx-toolbar-hidden-button-group")
        }
        cssClasses.push(item.cssClass);
        return cssClasses
    }
    _getActionableComponents() {
        return ["dxButton", "dxButtonGroup"]
    }
    _getItemTemplateName(args) {
        const template = super._getItemTemplateName(args);
        const data = args.itemData;
        const menuTemplate = null === data || void 0 === data ? void 0 : data.menuItemTemplate;
        return menuTemplate || template
    }
    _dataSourceOptions() {
        return {
            paginate: false
        }
    }
    _itemClickHandler(e, args, config) {
        if ((0, _renderer.default)(e.target).closest(".dx-toolbar-menu-action").length) {
            super._itemClickHandler(e, args, config)
        }
    }
    _clean() {
        this._getSections().empty();
        super._clean()
    }
}
exports.default = ToolbarMenuList;