@yandex/ui/esm/Menu/__examples__/context-menu.js

Yandex UI components

import { __assign, __rest } from "tslib";
import React from 'react';
import { ListTile } from '@yandex-lego/components/ListTile/desktop';
import { Icon } from '@yandex-lego/components/Icon/desktop/bundle';
import { Text } from '@yandex-lego/components/Text/desktop/bundle';
import { Menu } from '@yandex-lego/components/Menu/desktop/bundle';
import { Group, Item, useMenuItem } from '@yandex-lego/components/Menu/desktop';
import { CopyIcon, DownloadIcon, PaseIcon, ShareIcon } from './icons';
var styles = "\n    .ContextMenu {\n        --menu-size-m-fontSize: 13px;\n        --menu-size-m-titleSibling-indentLeft: 0;\n        --menu-size-m-item-icon-indentRight: 5px;\n        --menu-size-m-spaceVert: 0;\n        --menu-size-m-spaceVert: 0;\n        --menu-size-m-group-indentBottom: 8px;\n        --menu-size-m-group-spaceVert: 0;\n\n        --menu-view-default-border-color-base: rgba(0, 0, 0, .07);\n        --menu-view-default-fill-color-base: #fff;\n        --menu-view-default-fill-color-hovered: #555;\n        --menu-view-default-typo-color-base: #000;\n        --menu-view-default-typo-color-secondary: #999;\n        --menu-view-default-typo-color-disabled: #999;\n        --menu-view-default-typo-color-hovered: #fff;\n\n        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .4);\n    }\n\n    .ContextMenu .ContextMenu-Item_hightlight {\n        background: rgba(0, 0, 0, .07);\n    }\n\n    .ContextMenu .Text {\n        color: inherit;\n    }\n\n    .ContextMenu .Text ~ .Icon {\n        margin-right: 8px;\n    }\n\n    .ContextMenu .Icon + .Text {\n        margin-left: 8px;\n    }\n";
var KEYBOARD_MAP = {
    cut: '⌘X',
    copy: '⌘C',
    paste: '⌘V',
};
var RenderItem = function (_a) {
    var needIconGlyph = _a.needIconGlyph, children = _a.children, innerRef = _a.innerRef, value = _a.value, props = __rest(_a, ["needIconGlyph", "children", "innerRef", "value"]);
    var itemProps = useMenuItem(props);
    var keyboard = KEYBOARD_MAP[value];
    var trailing = keyboard ? (React.createElement(Text, { as: "kbd", typography: "control-s", color: "secondary" }, keyboard)) : (undefined);
    return (React.createElement("div", __assign({}, itemProps),
        React.createElement(ListTile, { rightSpace: trailing ? 's' : undefined, leading: needIconGlyph && React.createElement(Icon, { glyph: "type-check" }), trailing: trailing }, children)));
};
export var ContextMenu = function () {
    return (React.createElement(React.Fragment, null,
        React.createElement("style", null, styles),
        React.createElement(Menu, { className: "ContextMenu", size: "m", view: "default", onChange: function (e) { return alert(e.target.value); }, renderItem: RenderItem },
            React.createElement(Group, null,
                React.createElement(Item, { value: "share" },
                    React.createElement(ShareIcon, null),
                    React.createElement(Text, null, "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F"))),
            React.createElement(Group, null,
                React.createElement(Item, { value: "cut" },
                    React.createElement(Text, null, "\u0412\u044B\u0440\u0435\u0437\u0430\u0442\u044C")),
                React.createElement(Item, { value: "copy" },
                    React.createElement(CopyIcon, null),
                    React.createElement(Text, null, "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C")),
                React.createElement(Item, { value: "paste", disabled: true },
                    React.createElement(PaseIcon, null),
                    React.createElement(Text, null, "\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C"))),
            React.createElement(Group, null,
                React.createElement(Item, { value: "download", className: "ContextMenu-Item_hightlight" },
                    React.createElement(DownloadIcon, null),
                    React.createElement(Text, null, "\u0421\u043A\u0430\u0447\u0430\u0442\u044C"))))));
};