@yandex/ui
Version:
Yandex UI components
160 lines (159 loc) • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Showcase = exports.cnShowcase = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var classname_1 = require("@bem-react/classname");
var di_1 = require("@bem-react/di");
var Theme_1 = require("../Theme");
require("./Showcase.css");
exports.cnShowcase = classname_1.cn('Showcase');
var options = [
{ label: 'Радио 1', value: 'value1' },
{ label: 'Радио 2', value: 'value2' },
{ label: 'Радио 3', value: 'value3' },
];
var pinArray = ['brick-brick', 'clear-clear', 'round-round'];
var pinButtonArray = tslib_1.__spread(pinArray, ['circle-circle']);
var sizesSpin = ['l', 'm', 's', 'xs', 'xxs'];
var url = 'https://yandex.ru';
var menuItems = [
{ value: 'a', content: 'Каждый' },
{ value: 'b', content: 'Охотник' },
{ value: 'c', content: 'Желает' },
{ value: 'd', content: 'Знать' },
{ value: 'e', content: 'Где', disabled: true },
{ value: 'f', content: 'Сидит' },
{ value: 'g', content: 'Фазан' },
];
var menuSize = 'm';
var iconTypeArray = ['arrow', 'filter', 'close', 'cross', 'cross-websearch'];
var iconGlyphArray = [
'carets-v',
'type-arrow',
'type-check',
'type-close',
'type-cross',
'type-cross-websearch',
'type-filter',
'type-tick',
'x-sign',
];
var linkThemes = [
'black',
'ghost',
'normal',
'outer',
'pseudo',
'strong',
'black',
'ghost',
'normal',
'outer',
'pseudo',
'strong',
];
/**
* Витрина компонентов @yandex-lego/components
*/
var Showcase = function (_a) {
var theme = _a.theme;
var _b = di_1.useComponentRegistry(exports.cnShowcase()), Attach = _b.Attach, Button = _b.Button, Icon = _b.Icon, Checkbox = _b.Checkbox, Image = _b.Image, Link = _b.Link, Progress = _b.Progress, Spin = _b.Spin, Textarea = _b.Textarea, Textinput = _b.Textinput, TabsMenu = _b.TabsMenu, TabsPanes = _b.TabsPanes, Radiobox = _b.Radiobox, Select = _b.Select, Menu = _b.Menu, UserPic = _b.UserPic;
var tabs = [
{ id: 'tab1', content: react_1.default.createElement(Link, { theme: "normal" }, "\u041F\u043E\u0438\u0441\u043A") },
{ id: 'tab2', content: react_1.default.createElement(Link, { theme: "normal" }, "\u041A\u0430\u0440\u0442\u0438\u043D\u043A\u0438") },
{ id: 'tab3', disabled: true, content: react_1.default.createElement(Link, { theme: "normal" }, "\u0412\u0438\u0434\u0435\u043E") },
{ id: 'tab4', content: react_1.default.createElement(Link, { theme: "normal" }, "\u041A\u0430\u0440\u0442\u044B") },
{ id: 'tab5', content: react_1.default.createElement(Link, { theme: "normal" }, "\u041C\u0443\u0437\u044B\u043A\u0430") },
];
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: exports.cnShowcase(null, [Theme_1.cnTheme(theme)]) },
react_1.default.createElement("h2", null,
"Showcase color ",
theme.color),
react_1.default.createElement("p", null, "\u042D\u0442\u043E \u0441\u0442\u0435\u043D\u0434 \u0434\u043B\u044F \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u043A\u0438, \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u044B stateless"),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Attach"),
react_1.default.createElement(Attach, { hasHolder: true, holderText: "Attach \u0441 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C Holder", size: "m", view: "default" }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B"),
react_1.default.createElement(Attach, { disabled: true, size: "s", view: "default" }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B")),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Button"),
pinButtonArray.map(function (pin) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: exports.cnShowcase('Row') },
react_1.default.createElement(Button, { pin: pin, view: "clear", size: "m" }, "view clear"),
react_1.default.createElement(Button, { pin: pin, view: "link", size: "s" }, "view link"),
react_1.default.createElement(Button, { pin: pin, view: "default", size: "m" }, "view default"),
react_1.default.createElement(Button, { pin: pin, view: "action", size: "l" }, "view action")))); })),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Checkbox"),
react_1.default.createElement("div", { className: exports.cnShowcase('Row') },
react_1.default.createElement(Checkbox, { view: "default", size: "m" }),
react_1.default.createElement(Checkbox, { disabled: true, view: "default", size: "m", label: "\u041D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E" }),
react_1.default.createElement(Checkbox, { checked: true, view: "default", size: "s" }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Icon"),
react_1.default.createElement("div", { className: exports.cnShowcase('Row') }, iconTypeArray.map(function (iconType) { return (react_1.default.createElement(Icon, { key: iconType, type: iconType, size: "l", direction: "left" })); })),
react_1.default.createElement("div", { className: exports.cnShowcase('Row') }, iconGlyphArray.map(function (iconGlyph) { return (react_1.default.createElement(Icon, { key: iconGlyph, glyph: iconGlyph, size: "l" })); }))),
react_1.default.createElement("div", null,
react_1.default.createElement("h3", null, "Image"),
react_1.default.createElement(Image, { src: "https://yastatic.net/s3/frontend/_/KRVa1hWm.svg", alt: "\u041B\u043E\u0433\u043E\u0442\u0438\u043F \u042F\u043D\u0434\u0435\u043A\u0441\u0430", width: 200 })),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Link"),
react_1.default.createElement("div", null, linkThemes.map(function (linkTheme) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Link, { href: url, theme: linkTheme },
"_theme_",
linkTheme),
react_1.default.createElement("br", null))); }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Menu"),
react_1.default.createElement("div", null,
react_1.default.createElement(Menu, { view: "default", width: "max", items: menuItems, size: menuSize }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Radiobox"),
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Radiobox, { value: "value1", view: "default", options: options, size: "m" }),
react_1.default.createElement(Radiobox, { value: "value1", view: "default", options: options, size: "s" }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Progress"),
react_1.default.createElement("div", null,
react_1.default.createElement(Progress, { value: 0.33 }),
react_1.default.createElement("br", null),
react_1.default.createElement(Progress, { value: 0.66 }),
react_1.default.createElement("br", null),
react_1.default.createElement(Progress, { value: 1 }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Select"),
react_1.default.createElement("div", { className: exports.cnShowcase('Row') + ' Scope' },
react_1.default.createElement(Select, { value: "red", options: [{ value: 'red', content: 'Каждый' }, { value: 'orange', content: 'Охотник' }], view: "default", size: "m" }),
react_1.default.createElement(Select, { value: "red", options: [{ value: 'red', content: 'Каждый' }, { value: 'orange', content: 'Охотник' }], view: "default", size: "s" }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Spin"),
react_1.default.createElement("div", { className: exports.cnShowcase('Row') }, sizesSpin.map(function (size) { return (react_1.default.createElement(Spin, { key: size, progress: true, size: size, view: "default" })); }))),
react_1.default.createElement("div", null,
react_1.default.createElement("h3", null, "TabsMenu"),
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(TabsMenu, { view: "default", layout: "horiz", size: "m", activeTab: "tab1", tabs: tabs }))),
react_1.default.createElement("div", null,
react_1.default.createElement("h3", null, "TabsPanes"),
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(TabsMenu, { layout: "horiz", size: "m", activeTab: "tab2", view: "default", tabs: tabs }),
react_1.default.createElement(TabsPanes, { activePane: "tab2", panes: [
{ id: 'tab1', content: 'Pane 1 Поиск' },
{ id: 'tab2', content: 'Pane 2 Картинки' },
{ id: 'tab6', content: 'Pane 4 Маркет' },
] }))),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Textinput"),
pinArray.map(function (pin) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Textinput, { size: "m", pin: pin, view: "default", placeholder: "Textinput" }),
react_1.default.createElement(Textinput, { size: "m", pin: pin, type: "number", view: "default", placeholder: "Textinput" }))); })),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "Textarea"),
react_1.default.createElement(Textarea, { size: "m", placeholder: "Textarea", view: "default" }),
react_1.default.createElement(Textarea, { disabled: true, size: "s", placeholder: "Textarea", view: "default" })),
react_1.default.createElement("div", { className: exports.cnShowcase('Group') },
react_1.default.createElement("h3", null, "UserPic"),
react_1.default.createElement("div", null,
react_1.default.createElement(UserPic, { plus: true, avatarId: "43978/351415393-30646433" }))))));
};
exports.Showcase = Showcase;