@yandex/ui/Tumbler/__examples__/showcase.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Showcase = 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 Showcase = function () {
    var _a = tslib_1.__read(react_1.useState(false), 2), checked1 = _a[0], setChecked1 = _a[1];
    var _b = tslib_1.__read(react_1.useState(false), 2), checked2 = _b[0], setChecked2 = _b[1];
    var _c = tslib_1.__read(react_1.useState(false), 2), checked3 = _c[0], setChecked3 = _c[1];
    var _d = tslib_1.__read(react_1.useState(true), 2), checked4 = _d[0], setChecked4 = _d[1];
    var _e = tslib_1.__read(react_1.useState(true), 2), checked5 = _e[0], setChecked5 = _e[1];
    var _f = tslib_1.__read(react_1.useState(true), 2), checked6 = _f[0], setChecked6 = _f[1];
    return (react_1.default.createElement("div", { style: { backgroundColor: 'var(--color-bg-default)' } },
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "s", view: "default", checked: checked1, onChange: function () { return setChecked1(!checked1); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "m", view: "default", checked: checked2, onChange: function () { return setChecked2(!checked2); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "l", view: "default", checked: checked3, onChange: function () { return setChecked3(!checked3); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "s", view: "default", checked: false, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "m", view: "default", checked: false, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "l", view: "default", checked: false, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "s", view: "default", checked: checked4, onChange: function () { return setChecked4(!checked4); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "m", view: "default", checked: checked5, onChange: function () { return setChecked5(!checked5); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { size: "l", view: "default", checked: checked6, onChange: function () { return setChecked6(!checked6); }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "s", view: "default", checked: true, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "m", view: "default", checked: true, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" })),
        react_1.default.createElement("div", { style: { marginBottom: 8 } },
            react_1.default.createElement(bundle_1.Tumbler, { disabled: true, size: "l", view: "default", checked: true, onChange: function () { return null; }, labelBefore: "labelBefore", labelAfter: "labelAfter" }))));
};
exports.Showcase = Showcase;