@yandex/ui
Version:
Yandex UI components
101 lines (100 loc) • 9.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Showcase = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var classname_1 = require("@bem-react/classname");
var Divider_1 = require("@yandex-lego/components/Divider");
var ListTile_1 = require("@yandex-lego/components/ListTile");
var bundle_1 = require("@yandex-lego/components/Text/bundle");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var bundle_3 = require("@yandex-lego/components/Tumbler/desktop/bundle");
var bundle_4 = require("@yandex-lego/components/Slider/desktop/bundle");
// TODO: Перенести в общее место.
var Grid = function (_a) {
var children = _a.children, id = _a.id;
return (react_1.default.createElement("div", { id: id, className: "Grid" }, children));
};
var Cell = function (_a) {
var children = _a.children, label = _a.label, id = _a.id;
return (react_1.default.createElement("div", { id: id, className: classname_1.cn('Grid')('Cell') },
label && (react_1.default.createElement(bundle_1.Text, { as: "h3", typography: "control-xs", color: "secondary" }, label)),
react_1.default.createElement("div", { className: "Grid-CellContent" }, children)));
};
var SliderStateful = function (_a) {
var value = _a.value, props = tslib_1.__rest(_a, ["value"]);
var state = bundle_4.useSliderState({ value: value });
return react_1.default.createElement(bundle_4.Slider, tslib_1.__assign({}, props, state));
};
var styles = "\n .Grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n }\n\n .Grid-Cell {\n height: 160px;\n margin: 0 0 -1px -1px;\n padding: 16px;\n\n border: 1px solid rgba(0, 0, 0, 0.05);\n }\n\n .Grid-CellHeader {\n display: flex;\n\n height: 40px;\n }\n\n .Grid-CellHeader .Grid-CellAction {\n margin-left: auto;\n }\n\n .Grid-CellContent {\n width: 100%;\n }\n";
var Showcase = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", null, styles),
react_1.default.createElement(bundle_1.Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (horizontal)"),
react_1.default.createElement(Grid, { id: "horizontal" },
react_1.default.createElement(Cell, { id: "horizontal-sipmple", label: "Simple [filled]" },
react_1.default.createElement(SliderStateful, { filled: true, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Simple [step=10 | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, step: 10, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Simple [step=10 | showTicks | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, step: 10, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Simple [step=10 | showTicks | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 10, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Range [filled]" },
react_1.default.createElement(SliderStateful, { filled: true, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Range [step=10 | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, step: 10, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Range [step=10 | showTicks | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, step: 10, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Range [step=10 | showTicks | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 10, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Simple [reverse | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, reverse: true, showTickValues: true, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Range [reverse | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, reverse: true, showTickValues: true, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Simple" },
react_1.default.createElement(SliderStateful, { view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Range" },
react_1.default.createElement(SliderStateful, { view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { id: "horizontal-disabled", label: "Simple [step=5 | disabled | showTicks | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, disabled: true, showTicks: true, showTickValues: true, step: 5, view: "default", value: [10] })),
react_1.default.createElement(Cell, { label: "Range [step=5 | disabled | showTicks | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, disabled: true, showTicks: true, showTickValues: true, step: 5, view: "default", value: [10, 50] })),
react_1.default.createElement(Cell, { label: "Simple [step=100 | min=-500 | max=1000 | showTicks | showTickValues | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 100, min: -500, max: 1000, view: "default", value: [100] })),
react_1.default.createElement(Cell, { label: "Simple (align) [showTickValues | filled]" },
react_1.default.createElement(ListTile_1.ListTile, { alignItems: "start", leading: react_1.default.createElement(bundle_2.Button, { view: "default", size: "m" }, "Button"), trailing: react_1.default.createElement(bundle_3.Tumbler, { view: "default", size: "m", checked: true, onChange: function () { return null; }, labelAfter: "Tumbler" }), leftSpace: "m", rightSpace: "m" },
react_1.default.createElement(SliderStateful, { filled: true, showTickValues: true, view: "default", value: [10] })))),
react_1.default.createElement(Divider_1.Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
react_1.default.createElement(bundle_1.Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (outlined)"),
react_1.default.createElement(Grid, { id: "outlined" },
react_1.default.createElement(Cell, { label: "Simple (outline)" },
react_1.default.createElement("div", { style: { border: '1px solid #fc0' } },
react_1.default.createElement(SliderStateful, { view: "default", value: [10] }))),
react_1.default.createElement(Cell, { label: "Simple (outline) [showTickValues]" },
react_1.default.createElement("div", { style: { border: '1px solid #fc0' } },
react_1.default.createElement(SliderStateful, { showTickValues: true, view: "default", value: [10] })))),
react_1.default.createElement(Divider_1.Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
react_1.default.createElement(bundle_1.Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (overriden)"),
react_1.default.createElement(Grid, { id: "overriden" },
react_1.default.createElement(Cell, { label: "Simple [showTickValues | renderTickLabel | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, showTickValues: true, view: "default", step: 10, value: [10], renderTickLabel: function (props, TickLabel) {
return props.index % 2 === 0 ? react_1.default.createElement(TickLabel, tslib_1.__assign({}, props, { style: { color: '#00985f' } })) : null;
} })),
react_1.default.createElement(Cell, { label: "Range (inner) [renderThumb | filled]" },
react_1.default.createElement(SliderStateful, { filled: true, view: "default", step: 10, max: 1000, value: [100, 500], renderThumb: function (_a, Thumb) {
var value = _a.value, props = tslib_1.__rest(_a, ["value"]);
return (react_1.default.createElement(Thumb, tslib_1.__assign({}, props, { value: value, style: { width: 48, height: 28, borderRadius: 4 } }), value));
} }))),
react_1.default.createElement(Divider_1.Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
react_1.default.createElement(bundle_1.Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (tokenize)"),
react_1.default.createElement(Grid, { id: "tokenize" },
react_1.default.createElement(Cell, { label: "Simple [showTicks | showTickValues]" },
react_1.default.createElement("div", { style: {
'--slider-view-default-range-fill-color-base': '#00985f',
'--slider-view-default-range-fill-color-hovered': '#008554',
'--slider-view-default-tick-fill-color-base': '#00985f',
'--slider-view-default-tick-height': '14px',
'--slider-view-default-track-height': '4px',
} },
react_1.default.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, view: "default", step: 10, value: [10] })))))); };
exports.Showcase = Showcase;