@yandex/ui/Drawer/Drawer.examples/touch-phone/playground.examples.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Playground = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var bundle_1 = require("@yandex-lego/components/Drawer/touch-phone/bundle");
var Playground = function () {
    var scopeRef = react_1.default.useRef(null);
    var _a = tslib_1.__read(react_1.useState(false), 2), visible = _a[0], setVisible = _a[1];
    var maxSize = addon_knobs_1.text('maxSize', '');
    var nested = addon_knobs_1.boolean('nested', false);
    var dragDisabled = addon_knobs_1.boolean('dragDisabled', false);
    var direction = addon_knobs_1.select('direction', ['left', 'right', 'bottom'], 'bottom');
    var animation = {
        tension: addon_knobs_1.number('tension', 230),
        friction: addon_knobs_1.number('friction', 24),
        disabled: addon_knobs_1.boolean('disable animation', false),
        dragImmediate: addon_knobs_1.boolean('drag immediate', false),
    };
    return (react_1.default.createElement("div", { ref: scopeRef },
        react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
        react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
        react_1.default.createElement("p", null,
            react_1.default.createElement("button", { onClick: function () { return setVisible(true); }, "data-testid": "opener" }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0431\u043E\u043B\u044C\u0448\u0443\u044E \u0448\u0442\u043E\u0440\u043A\u0443")),
        react_1.default.createElement(bundle_1.Drawer, { visible: visible, onClose: function () { return setVisible(false); }, scope: scopeRef, nested: nested, dragDisabled: dragDisabled, direction: direction, animation: animation, maxSize: maxSize, view: "default" },
            react_1.default.createElement("div", { className: "DrawerInnerContent", style: { padding: '20px' } },
                react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
                react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
                react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
                react_1.default.createElement("p", null, "Phasellus sollicitudin in pellentesque cras sagittis platea mattis himenaeos, dui ligula congue ad nisi tempor laoreet lacus, etiam gravida taciti mauris adipiscing id erat. Mollis scelerisque vivamus sit dictum ultrices eros, suscipit varius cursus litora lectus montes, et posuere diam mauris conubia. Inceptos metus vel ac hendrerit lacinia arcu taciti potenti, vulputate class mollis maecenas orci nibh."),
                react_1.default.createElement("button", { onClick: function () { return setVisible(false); } }, "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0448\u0442\u043E\u0440\u043A\u0443")))));
};
exports.Playground = Playground;
exports.Playground.story = {
    name: 'playground',
};