@yandex/ui/Tooltip/__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/Tooltip/desktop/bundle");
var Popup_1 = require("@yandex-lego/components/Popup");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var Playground = function () {
    var buttonRef = react_1.useRef(null);
    var _a = tslib_1.__read(react_1.useState(false), 2), visible = _a[0], setVisible = _a[1];
    var size = addon_knobs_1.select('size', ['s', 'm', 'l'], 'm');
    var state = addon_knobs_1.select('state', ['', 'warning', 'alert', 'success'], '');
    var direction = addon_knobs_1.select('direction', Popup_1.directions, 'right');
    var hasTail = addon_knobs_1.boolean('hasTail', true);
    var mainOffset = addon_knobs_1.number('mainOffset', 0);
    var secondaryOffset = addon_knobs_1.number('secondaryOffset', 0);
    var tailOffset = addon_knobs_1.number('tailOffset', 0);
    return (react_1.default.createElement("div", { style: { backgroundColor: 'var(--color-bg-default)' } },
        react_1.default.createElement(bundle_2.Button, { innerRef: buttonRef, view: "default", size: "m", onClick: function () { return setVisible(!visible); } }, "Target"),
        react_1.default.createElement(bundle_1.Tooltip, { key: direction, hasTail: hasTail, mainOffset: mainOffset, secondaryOffset: secondaryOffset, tailOffset: tailOffset, direction: direction, anchor: buttonRef, visible: visible, view: "default", size: size, state: state }, "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0435")));
};
exports.Playground = Playground;