@yandex/ui
Version:
Yandex UI components
95 lines (94 loc) • 8.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Cell = exports.blocks = exports.getBlock = exports.Img16x9 = exports.Img9x16 = exports.Img4x3 = exports.Img3x4 = exports.Img1x1 = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var bundle_1 = require("@yandex-lego/components/Tumbler/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Checkbox/desktop/bundle");
var bundle_3 = require("@yandex-lego/components/Icon/bundle");
var bundle_4 = require("@yandex-lego/components/Text/bundle");
var bundle_5 = require("@yandex-lego/components/UserPic/desktop/bundle");
var Image_1 = require("@yandex-lego/components/Image");
var bundle_6 = require("@yandex-lego/components/Button/desktop/bundle");
var bundle_7 = require("@yandex-lego/components/Link/desktop/bundle");
exports.Img1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEQSURBVHgB7Zi9ioUwEIUnKtr401rY+DC+PyLYirUgaGEhorsRNlwWb6PGg3A+CGQIhHwkMwNR4zhu8mIceTkUQEMBNBRAQwE0FEBDATQUQPN6AU8usG2b1HVt4iRJJMsyeZLLAk3TmDhN08cFmANoLj2h/8zzLF3XmTgIAonjWGxyq4DOiWVZTKznjuNIGIZii1uf0LquRkAfXI9PIRvcKjAMg5RluT+lffNfAX0rNrGWxJ+3YROWUTSXqpBS6rDz6qrjuu4+931fpmmSvu8P99Dd2/POH0M98bnbtq1UVXW4VhTF3i/Ocmsf+EYURZLn+eHa302dRfF7HQwF0FAADQXQUAANBdBQAA0F0Lxe4AdZOk5YVpEfmAAAAABJRU5ErkJggg==';
exports.Img3x4 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABQCAYAAABFyhZTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFkSURBVHgB7dpJqoNAFIXhm5Y0s2QFjl2B+586UnANggNBxL55XCGZmPfwIVrheL6JUnGQX6q0CNklSdLLhuxlYxiMjsHoGIyOwegYjI7B6BiMjsHoGIyOwegYjI7B6BiMbnPBR5kpiiLxPG80frvdxHEc+Tazg9u2lTzPR+P7/XdOHq5hdAxGN/uh9Zuu6ySO49H44XCQ+/0+HE1YLLjveymK4uNnWZbJ8/mU0+kkazMypfVmJEkiJhhbw1VVDeFrWyxYY3RDUtf1e0yn8Pl8NrZ+1WLBZVlKEATi+/57LetN0B2YyV3YYg+tF41smmY41+Pr3BRuPNAxGB330v+l79bH4/HnNdfrdXj/fqIbkDRNZQr9FeVyucgcO9P/lw7DUFzXnXStbdtiWZbMwSm9Nt1m6pSf4nic/3WNT+m18bWEjsHoGIyOwegYjI7B6BiMjsHoGIyOwegYjI7B6BiMjsHofgDlt2Ijl284NwAAAABJRU5ErkJggg==';
exports.Img4x3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAYAAADxJz2MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGASURBVHgB7dpJioNQFIXhm5Y0s2QFjl2B+586UnANggNBxL4prpBMTFVJDjyfcL6J8uIkP1x9huyyLBuFvrYXgjAgiAFBDAhiQBADghgQxIAgBgQxIIgBQQwIYkAQA4IYEMSAIAYEMSDoKIYkSSJBEMzWb7ebeJ4nW2UsYN/3UpblbH2/3/YQcIRBDAhiQBADgow9RH4zDIOkaTpbPxwOcr/fp6PNVg84jqNUVfXxs6Io5Pl8yul0EltZPcIaN8sysZn198CmaaaQtlo9oMbRDXbbtu81Hdnz+Wz9/U+tHrCua4miSMIwfN8LNaq+oWzhLWX1h8iLRuu6bjrX4+vcdtwHghgQxIAgBgQxIMjYU1j3do/H489rrtfrtP/7RDfUeZ7LEvor9+VyERN2W/mXfhzH4vv+omtd1xXHccQEjjDImo30f/S1Tkd8iePR3NfazAjbiiMMYkAQA4IYEMSAIAYEMSCIAUEMCGJAEAOCGBDEgCAGBDEgiAFBDAhiQNAPJwph+8kNlNsAAAAASUVORK5CYII=';
exports.Img9x16 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABQCAYAAACNpvyFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7drLaoNAGIbh35zjRnHl1rUX4n279Da8AFERz9qOJaVEQgZkvmL7PRACw5C8kcloiFZRFLPszEF2iNEojEZhNAqjURiNwmgURqMwGoXRKIxGYTQKo1EYjbLL6JPOpCRJpCzL1XgYhuL7vqBpRTdNI3Vdr8bHcZTfwDWNwmgUrS/iK1VVSZZlq/Hb7Sb3+11M2RQ9DMOyszxTY23biuu6YoKx5aG2SBVugtE13XWdmLApuu/7ZSlM0/T1YoeDXC6X5WFZlsyzmX/7Nq3pNE2XZ8/zJAiC7/Hj8bh8IFM2RT88AtURN7UkfuLJBYXRKH/32sNxHDmdXk+1bXvZm5+prU/J81zrB4Pa53VO/Rbifo84juXzfd7OO5/PEkXR23n/79JU1/V61bpUVUdah8XbgUAYjcJoFEajMBqF0SiMRmE0CqNRGI3CaBRGozAahdEou4z+AEWCXTCHu8KWAAAAAElFTkSuQmCC';
exports.Img16x9 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7dpLy4JAGMXx45tEdCMiqFZ9/2/Ttk2L1oU3vKO+jVsjogPTCOcHUTwEwR/HsdKL47iDfO0PQlFAkgKSFJCkgCQFJCkgSQFJCkhSQJIPS/I8x+PxGMx938fhcMBYWQsYRRHO5/NgvlgsRh1QS5ikgCQFJCkgydom8k5d14OZ2Z09z4Prfh6waRrc7/fB3MSbz+dYr9dwmbNLuOs6pGmKJEngMufPgVmWwWXOB2zbtj8aXfXzgGYDuV6vuN1ufSxjNpv15z7z7DonNpEgCPrX2+0Wy+USRVH0jzHQdSBJAUkKSFJAkgKSFJDk2bo7q6oqPD/r7XvMd9/JZDKYT6dThGGIy+WCT5xOJxyPR9hg7TrQRNjtdvhWWZYvf3R4Zb/fwxYtYZI3lhsszb96nx6Bm80Gq9UKNowmoKu0hEkKSFJAkgKSFJCkgCQFJCkgSQFJCkj6B/ugZaxL+8yxAAAAAElFTkSuQmCC';
var Switch = function () {
var _a = tslib_1.__read(react_1.useState(false), 2), checked = _a[0], setChecked = _a[1];
return react_1.default.createElement(bundle_1.Tumbler, { view: "default", size: "s", checked: checked, onChange: function () { return setChecked(!checked); } });
};
var Check = function () {
var _a = tslib_1.__read(react_1.useState(false), 2), checked = _a[0], setChecked = _a[1];
return react_1.default.createElement(bundle_2.Checkbox, { view: "default", size: "m", checked: checked, onChange: function () { return setChecked(!checked); } });
};
var Title = function () { return (react_1.default.createElement(bundle_4.Text, { as: "div", typography: "control-xl", weight: "regular", color: "primary" }, "One-line item")); };
var SubTitle = function () { return (react_1.default.createElement(bundle_4.Text, { as: "div", typography: "control-m", weight: "regular", color: "secondary" },
"Secondary text",
react_1.default.createElement("br", null),
"Tertiary text")); };
var Overline = function () { return (react_1.default.createElement(bundle_4.Text, { as: "div", typography: "overline-l", weight: "medium", color: "secondary" }, "Overline")); };
var Meta = function () { return (react_1.default.createElement(bundle_4.Text, { as: "div", typography: "control-m", weight: "regular", color: "secondary" }, "Meta")); };
var getBlock = function (key) {
switch (key) {
case 'Icon':
var iconSize = 16;
return react_1.default.createElement(bundle_3.Icon, { glyph: "type-cross", style: { width: iconSize, height: iconSize } });
case 'Meta':
return react_1.default.createElement(Meta, null);
case 'Tumbler':
return react_1.default.createElement(Switch, null);
case 'Checkbox':
return react_1.default.createElement(Check, null);
case 'Userpic':
return react_1.default.createElement(bundle_5.UserPic, { size: "m" });
case 'Image 1:1':
var imageSize = 48;
return react_1.default.createElement(Image_1.Image, { src: exports.Img1x1, width: imageSize, height: imageSize });
case 'Image 3:4':
return react_1.default.createElement(Image_1.Image, { src: exports.Img3x4, width: 60, height: 80 });
case 'Image 4:3':
return react_1.default.createElement(Image_1.Image, { src: exports.Img4x3, width: 80, height: 60 });
case 'Image 9:16':
return react_1.default.createElement(Image_1.Image, { src: exports.Img9x16, width: 45, height: 80 });
case 'Image 16:9':
return react_1.default.createElement(Image_1.Image, { src: exports.Img16x9, width: 80, height: 45 });
case 'Button':
return (react_1.default.createElement(bundle_6.Button, { view: "default", size: "s" }, "Button"));
case 'Link':
return react_1.default.createElement(bundle_7.Link, { view: "default" }, "Link");
case 'Title':
return react_1.default.createElement(Title, null);
case 'Subtitle':
return react_1.default.createElement(SubTitle, null);
case 'Overline':
return react_1.default.createElement(Overline, null);
default:
return undefined;
}
};
exports.getBlock = getBlock;
exports.blocks = [
'Icon',
'Meta',
'Tumbler',
'Checkbox',
'Userpic',
'Image 1:1',
'Image 3:4',
'Image 4:3',
'Image 9:16',
'Image 16:9',
];
var styles = "\n .Grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n }\n\n .Cell {\n height: 160px;\n margin: 0 0 -1px -1px;\n padding: 16px;\n\n border: 1px solid var(--color-bg-border);\n }\n";
var Cell = function (_a) {
var children = _a.children, label = _a.label;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", null, styles),
react_1.default.createElement("div", { className: "Cell" },
react_1.default.createElement(bundle_4.Text, { as: "h3", typography: "control-xs", color: "secondary" }, label),
children)));
};
exports.Cell = Cell;