@yandex/ui
Version:
Yandex UI components
97 lines (96 loc) • 8.89 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { cn } from '@bem-react/classname';
import { Divider } from '@yandex-lego/components/Divider';
import { ListTile } from '@yandex-lego/components/ListTile';
import { Text } from '@yandex-lego/components/Text/bundle';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
import { Tumbler } from '@yandex-lego/components/Tumbler/desktop/bundle';
import { Slider, useSliderState } from '@yandex-lego/components/Slider/desktop/bundle';
// TODO: Перенести в общее место.
var Grid = function (_a) {
var children = _a.children, id = _a.id;
return (React.createElement("div", { id: id, className: "Grid" }, children));
};
var Cell = function (_a) {
var children = _a.children, label = _a.label, id = _a.id;
return (React.createElement("div", { id: id, className: cn('Grid')('Cell') },
label && (React.createElement(Text, { as: "h3", typography: "control-xs", color: "secondary" }, label)),
React.createElement("div", { className: "Grid-CellContent" }, children)));
};
var SliderStateful = function (_a) {
var value = _a.value, props = __rest(_a, ["value"]);
var state = useSliderState({ value: value });
return React.createElement(Slider, __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";
export var Showcase = function () { return (React.createElement(React.Fragment, null,
React.createElement("style", null, styles),
React.createElement(Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (horizontal)"),
React.createElement(Grid, { id: "horizontal" },
React.createElement(Cell, { id: "horizontal-sipmple", label: "Simple [filled]" },
React.createElement(SliderStateful, { filled: true, view: "default", value: [10] })),
React.createElement(Cell, { label: "Simple [step=10 | filled]" },
React.createElement(SliderStateful, { filled: true, step: 10, view: "default", value: [10] })),
React.createElement(Cell, { label: "Simple [step=10 | showTicks | filled]" },
React.createElement(SliderStateful, { filled: true, showTicks: true, step: 10, view: "default", value: [10] })),
React.createElement(Cell, { label: "Simple [step=10 | showTicks | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 10, view: "default", value: [10] })),
React.createElement(Cell, { label: "Range [filled]" },
React.createElement(SliderStateful, { filled: true, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Range [step=10 | filled]" },
React.createElement(SliderStateful, { filled: true, step: 10, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Range [step=10 | showTicks | filled]" },
React.createElement(SliderStateful, { filled: true, showTicks: true, step: 10, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Range [step=10 | showTicks | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 10, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Simple [reverse | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, reverse: true, showTickValues: true, view: "default", value: [10] })),
React.createElement(Cell, { label: "Range [reverse | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, reverse: true, showTickValues: true, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Simple" },
React.createElement(SliderStateful, { view: "default", value: [10] })),
React.createElement(Cell, { label: "Range" },
React.createElement(SliderStateful, { view: "default", value: [10, 50] })),
React.createElement(Cell, { id: "horizontal-disabled", label: "Simple [step=5 | disabled | showTicks | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, disabled: true, showTicks: true, showTickValues: true, step: 5, view: "default", value: [10] })),
React.createElement(Cell, { label: "Range [step=5 | disabled | showTicks | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, disabled: true, showTicks: true, showTickValues: true, step: 5, view: "default", value: [10, 50] })),
React.createElement(Cell, { label: "Simple [step=100 | min=-500 | max=1000 | showTicks | showTickValues | filled]" },
React.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, step: 100, min: -500, max: 1000, view: "default", value: [100] })),
React.createElement(Cell, { label: "Simple (align) [showTickValues | filled]" },
React.createElement(ListTile, { alignItems: "start", leading: React.createElement(Button, { view: "default", size: "m" }, "Button"), trailing: React.createElement(Tumbler, { view: "default", size: "m", checked: true, onChange: function () { return null; }, labelAfter: "Tumbler" }), leftSpace: "m", rightSpace: "m" },
React.createElement(SliderStateful, { filled: true, showTickValues: true, view: "default", value: [10] })))),
React.createElement(Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
React.createElement(Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (outlined)"),
React.createElement(Grid, { id: "outlined" },
React.createElement(Cell, { label: "Simple (outline)" },
React.createElement("div", { style: { border: '1px solid #fc0' } },
React.createElement(SliderStateful, { view: "default", value: [10] }))),
React.createElement(Cell, { label: "Simple (outline) [showTickValues]" },
React.createElement("div", { style: { border: '1px solid #fc0' } },
React.createElement(SliderStateful, { showTickValues: true, view: "default", value: [10] })))),
React.createElement(Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
React.createElement(Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (overriden)"),
React.createElement(Grid, { id: "overriden" },
React.createElement(Cell, { label: "Simple [showTickValues | renderTickLabel | filled]" },
React.createElement(SliderStateful, { filled: true, showTickValues: true, view: "default", step: 10, value: [10], renderTickLabel: function (props, TickLabel) {
return props.index % 2 === 0 ? React.createElement(TickLabel, __assign({}, props, { style: { color: '#00985f' } })) : null;
} })),
React.createElement(Cell, { label: "Range (inner) [renderThumb | filled]" },
React.createElement(SliderStateful, { filled: true, view: "default", step: 10, max: 1000, value: [100, 500], renderThumb: function (_a, Thumb) {
var value = _a.value, props = __rest(_a, ["value"]);
return (React.createElement(Thumb, __assign({}, props, { value: value, style: { width: 48, height: 28, borderRadius: 4 } }), value));
} }))),
React.createElement(Divider, { color: "var(--color-bg-border)", style: { margin: '32px 0' } }),
React.createElement(Text, { as: "h2", typography: "control-m", weight: "medium", color: "secondary" }, "Slider (tokenize)"),
React.createElement(Grid, { id: "tokenize" },
React.createElement(Cell, { label: "Simple [showTicks | showTickValues]" },
React.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.createElement(SliderStateful, { filled: true, showTicks: true, showTickValues: true, view: "default", step: 10, value: [10] })))))); };