@yandex/ui/esm/Popup/__examples__/playground.js

Yandex UI components

import { __read } from "tslib";
import React, { useState, useRef } from 'react';
import { select, text } from '@storybook/addon-knobs';
import { Popup, directions } from '@yandex-lego/components/Popup/desktop/bundle';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
export var Playground = function () {
    var anchorRef = useRef(null);
    var _a = __read(useState(!false), 2), visible = _a[0], setVisible = _a[1];
    var children = text('children', 'Общедоступная многоязычная универсальная интернет-энциклопедия со свободным контентом.');
    var view = select('view', ['default', ''], 'default');
    var theme = view === '' ? select('theme', ['normal', 'clear'], 'normal') : null;
    var direction = select('direction', directions, 'bottom-start');
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, { onClick: function () { return setVisible(!visible); }, innerRef: anchorRef, size: "m", view: "default" }, "Open popup"),
        React.createElement(Popup, { hasTail: true, target: "anchor", anchor: anchorRef, direction: direction, view: view, theme: theme, visible: visible, style: { maxWidth: 280 }, onClose: function () { return setVisible(false); } },
            React.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)' } }, children))));
};