@yandex/ui
Version:
Yandex UI components
49 lines (48 loc) • 4.57 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextMenu = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var desktop_1 = require("@yandex-lego/components/ListTile/desktop");
var bundle_1 = require("@yandex-lego/components/Icon/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Text/desktop/bundle");
var bundle_3 = require("@yandex-lego/components/Menu/desktop/bundle");
var desktop_2 = require("@yandex-lego/components/Menu/desktop");
var icons_1 = require("./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 = tslib_1.__rest(_a, ["needIconGlyph", "children", "innerRef", "value"]);
var itemProps = desktop_2.useMenuItem(props);
var keyboard = KEYBOARD_MAP[value];
var trailing = keyboard ? (react_1.default.createElement(bundle_2.Text, { as: "kbd", typography: "control-s", color: "secondary" }, keyboard)) : (undefined);
return (react_1.default.createElement("div", tslib_1.__assign({}, itemProps),
react_1.default.createElement(desktop_1.ListTile, { rightSpace: trailing ? 's' : undefined, leading: needIconGlyph && react_1.default.createElement(bundle_1.Icon, { glyph: "type-check" }), trailing: trailing }, children)));
};
var ContextMenu = function () {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", null, styles),
react_1.default.createElement(bundle_3.Menu, { className: "ContextMenu", size: "m", view: "default", onChange: function (e) { return alert(e.target.value); }, renderItem: RenderItem },
react_1.default.createElement(desktop_2.Group, null,
react_1.default.createElement(desktop_2.Item, { value: "share" },
react_1.default.createElement(icons_1.ShareIcon, null),
react_1.default.createElement(bundle_2.Text, null, "\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F"))),
react_1.default.createElement(desktop_2.Group, null,
react_1.default.createElement(desktop_2.Item, { value: "cut" },
react_1.default.createElement(bundle_2.Text, null, "\u0412\u044B\u0440\u0435\u0437\u0430\u0442\u044C")),
react_1.default.createElement(desktop_2.Item, { value: "copy" },
react_1.default.createElement(icons_1.CopyIcon, null),
react_1.default.createElement(bundle_2.Text, null, "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C")),
react_1.default.createElement(desktop_2.Item, { value: "paste", disabled: true },
react_1.default.createElement(icons_1.PaseIcon, null),
react_1.default.createElement(bundle_2.Text, null, "\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C"))),
react_1.default.createElement(desktop_2.Group, null,
react_1.default.createElement(desktop_2.Item, { value: "download", className: "ContextMenu-Item_hightlight" },
react_1.default.createElement(icons_1.DownloadIcon, null),
react_1.default.createElement(bundle_2.Text, null, "\u0421\u043A\u0430\u0447\u0430\u0442\u044C"))))));
};
exports.ContextMenu = ContextMenu;