@yandex/ui
Version:
Yandex UI components
156 lines (155 loc) • 10.6 kB
JavaScript
import { __read, __spread } from "tslib";
import React from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '@bem-react/di';
import { cnTheme } from '../Theme';
import './Showcase.css';
export var cnShowcase = 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 = __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
*/
export var Showcase = function (_a) {
var theme = _a.theme;
var _b = useComponentRegistry(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.createElement(Link, { theme: "normal" }, "\u041F\u043E\u0438\u0441\u043A") },
{ id: 'tab2', content: React.createElement(Link, { theme: "normal" }, "\u041A\u0430\u0440\u0442\u0438\u043D\u043A\u0438") },
{ id: 'tab3', disabled: true, content: React.createElement(Link, { theme: "normal" }, "\u0412\u0438\u0434\u0435\u043E") },
{ id: 'tab4', content: React.createElement(Link, { theme: "normal" }, "\u041A\u0430\u0440\u0442\u044B") },
{ id: 'tab5', content: React.createElement(Link, { theme: "normal" }, "\u041C\u0443\u0437\u044B\u043A\u0430") },
];
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: cnShowcase(null, [cnTheme(theme)]) },
React.createElement("h2", null,
"Showcase color ",
theme.color),
React.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.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Attach"),
React.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.createElement(Attach, { disabled: true, size: "s", view: "default" }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B")),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Button"),
pinButtonArray.map(function (pin) { return (React.createElement(React.Fragment, null,
React.createElement("div", { className: cnShowcase('Row') },
React.createElement(Button, { pin: pin, view: "clear", size: "m" }, "view clear"),
React.createElement(Button, { pin: pin, view: "link", size: "s" }, "view link"),
React.createElement(Button, { pin: pin, view: "default", size: "m" }, "view default"),
React.createElement(Button, { pin: pin, view: "action", size: "l" }, "view action")))); })),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Checkbox"),
React.createElement("div", { className: cnShowcase('Row') },
React.createElement(Checkbox, { view: "default", size: "m" }),
React.createElement(Checkbox, { disabled: true, view: "default", size: "m", label: "\u041D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E" }),
React.createElement(Checkbox, { checked: true, view: "default", size: "s" }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Icon"),
React.createElement("div", { className: cnShowcase('Row') }, iconTypeArray.map(function (iconType) { return (React.createElement(Icon, { key: iconType, type: iconType, size: "l", direction: "left" })); })),
React.createElement("div", { className: cnShowcase('Row') }, iconGlyphArray.map(function (iconGlyph) { return (React.createElement(Icon, { key: iconGlyph, glyph: iconGlyph, size: "l" })); }))),
React.createElement("div", null,
React.createElement("h3", null, "Image"),
React.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.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Link"),
React.createElement("div", null, linkThemes.map(function (linkTheme) { return (React.createElement(React.Fragment, null,
React.createElement(Link, { href: url, theme: linkTheme },
"_theme_",
linkTheme),
React.createElement("br", null))); }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Menu"),
React.createElement("div", null,
React.createElement(Menu, { view: "default", width: "max", items: menuItems, size: menuSize }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Radiobox"),
React.createElement(React.Fragment, null,
React.createElement(Radiobox, { value: "value1", view: "default", options: options, size: "m" }),
React.createElement(Radiobox, { value: "value1", view: "default", options: options, size: "s" }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Progress"),
React.createElement("div", null,
React.createElement(Progress, { value: 0.33 }),
React.createElement("br", null),
React.createElement(Progress, { value: 0.66 }),
React.createElement("br", null),
React.createElement(Progress, { value: 1 }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Select"),
React.createElement("div", { className: cnShowcase('Row') + ' Scope' },
React.createElement(Select, { value: "red", options: [{ value: 'red', content: 'Каждый' }, { value: 'orange', content: 'Охотник' }], view: "default", size: "m" }),
React.createElement(Select, { value: "red", options: [{ value: 'red', content: 'Каждый' }, { value: 'orange', content: 'Охотник' }], view: "default", size: "s" }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Spin"),
React.createElement("div", { className: cnShowcase('Row') }, sizesSpin.map(function (size) { return (React.createElement(Spin, { key: size, progress: true, size: size, view: "default" })); }))),
React.createElement("div", null,
React.createElement("h3", null, "TabsMenu"),
React.createElement(React.Fragment, null,
React.createElement(TabsMenu, { view: "default", layout: "horiz", size: "m", activeTab: "tab1", tabs: tabs }))),
React.createElement("div", null,
React.createElement("h3", null, "TabsPanes"),
React.createElement(React.Fragment, null,
React.createElement(TabsMenu, { layout: "horiz", size: "m", activeTab: "tab2", view: "default", tabs: tabs }),
React.createElement(TabsPanes, { activePane: "tab2", panes: [
{ id: 'tab1', content: 'Pane 1 Поиск' },
{ id: 'tab2', content: 'Pane 2 Картинки' },
{ id: 'tab6', content: 'Pane 4 Маркет' },
] }))),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Textinput"),
pinArray.map(function (pin) { return (React.createElement(React.Fragment, null,
React.createElement(Textinput, { size: "m", pin: pin, view: "default", placeholder: "Textinput" }),
React.createElement(Textinput, { size: "m", pin: pin, type: "number", view: "default", placeholder: "Textinput" }))); })),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "Textarea"),
React.createElement(Textarea, { size: "m", placeholder: "Textarea", view: "default" }),
React.createElement(Textarea, { disabled: true, size: "s", placeholder: "Textarea", view: "default" })),
React.createElement("div", { className: cnShowcase('Group') },
React.createElement("h3", null, "UserPic"),
React.createElement("div", null,
React.createElement(UserPic, { plus: true, avatarId: "43978/351415393-30646433" }))))));
};