@yandex/ui/Tooltip/__examples__/state.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.State = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var bundle_1 = require("@yandex-lego/components/Button/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Tooltip/desktop/bundle");
var State = function () {
    var _a = tslib_1.__read(react_1.useState(true), 2), visible1 = _a[0], setVisible1 = _a[1];
    var _b = tslib_1.__read(react_1.useState(true), 2), visible2 = _b[0], setVisible2 = _b[1];
    var _c = tslib_1.__read(react_1.useState(true), 2), visible3 = _c[0], setVisible3 = _c[1];
    var anchorRef1 = react_1.useRef(null);
    var anchorRef2 = react_1.useRef(null);
    var anchorRef3 = react_1.useRef(null);
    return (react_1.default.createElement("div", { style: { display: 'flex', height: 64 } },
        react_1.default.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            react_1.default.createElement(bundle_1.Button, { innerRef: anchorRef1, size: "m", view: "default", onClick: function () { return setVisible1(!visible1); } }, "Warning")),
        react_1.default.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            react_1.default.createElement(bundle_1.Button, { innerRef: anchorRef2, size: "m", view: "default", onClick: function () { return setVisible2(!visible2); } }, "Alert")),
        react_1.default.createElement("div", { style: { marginLeft: 32, marginRight: 32 } },
            react_1.default.createElement(bundle_1.Button, { innerRef: anchorRef3, size: "m", view: "default", onClick: function () { return setVisible3(!visible3); } }, "Success")),
        react_1.default.createElement(bundle_2.Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef1, visible: visible1, state: "warning" }, "Warning message"),
        react_1.default.createElement(bundle_2.Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef2, visible: visible2, state: "alert" }, "Alert message"),
        react_1.default.createElement(bundle_2.Tooltip, { hasTail: true, direction: "bottom", view: "default", size: "m", anchor: anchorRef3, visible: visible3, state: "success" }, "Success message")));
};
exports.State = State;