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

Yandex UI components

import { __read } from "tslib";
import React, { useState, useRef } from 'react';
import { select, boolean, number } from '@storybook/addon-knobs';
import { Tooltip } from '@yandex-lego/components/Tooltip/desktop/bundle';
import { directions } from '@yandex-lego/components/Popup';
import { Button } from '@yandex-lego/components/Button/desktop/bundle';
export var Playground = function () {
    var buttonRef = useRef(null);
    var _a = __read(useState(false), 2), visible = _a[0], setVisible = _a[1];
    var size = select('size', ['s', 'm', 'l'], 'm');
    var state = select('state', ['', 'warning', 'alert', 'success'], '');
    var direction = select('direction', directions, 'right');
    var hasTail = boolean('hasTail', true);
    var mainOffset = number('mainOffset', 0);
    var secondaryOffset = number('secondaryOffset', 0);
    var tailOffset = number('tailOffset', 0);
    return (React.createElement("div", { style: { backgroundColor: 'var(--color-bg-default)' } },
        React.createElement(Button, { innerRef: buttonRef, view: "default", size: "m", onClick: function () { return setVisible(!visible); } }, "Target"),
        React.createElement(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")));
};