@yandex/ui/Popup/__examples__/playground.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/Popup/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var Playground = function () {
    var anchorRef = react_1.useRef(null);
    var _a = tslib_1.__read(react_1.useState(!false), 2), visible = _a[0], setVisible = _a[1];
    var children = addon_knobs_1.text('children', 'Общедоступная многоязычная универсальная интернет-энциклопедия со свободным контентом.');
    var view = addon_knobs_1.select('view', ['default', ''], 'default');
    var theme = view === '' ? addon_knobs_1.select('theme', ['normal', 'clear'], 'normal') : null;
    var direction = addon_knobs_1.select('direction', bundle_1.directions, 'bottom-start');
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(bundle_2.Button, { onClick: function () { return setVisible(!visible); }, innerRef: anchorRef, size: "m", view: "default" }, "Open popup"),
        react_1.default.createElement(bundle_1.Popup, { hasTail: true, target: "anchor", anchor: anchorRef, direction: direction, view: view, theme: theme, visible: visible, style: { maxWidth: 280 }, onClose: function () { return setVisible(false); } },
            react_1.default.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)' } }, children))));
};
exports.Playground = Playground;