@yandex/ui/LayerManager/__examples__/complex-modal.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComplexModal = 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/Popup/desktop/bundle");
var bundle_3 = require("@yandex-lego/components/Modal/desktop/bundle");
var bundle_4 = require("@yandex-lego/components/MessageBox/desktop/bundle");
var bundle_5 = require("@yandex-lego/components/Tooltip/desktop/bundle");
var bundle_6 = require("@yandex-lego/components/Select/desktop/bundle");
var ComplexModal = function () {
    var _a = tslib_1.__read(react_1.useState(false), 2), visible1 = _a[0], setVisible1 = _a[1];
    var _b = tslib_1.__read(react_1.useState(false), 2), visible2 = _b[0], setVisible2 = _b[1];
    var _c = tslib_1.__read(react_1.useState(false), 2), visible3 = _c[0], setVisible3 = _c[1];
    var _d = tslib_1.__read(react_1.useState(''), 2), value1 = _d[0], setValue1 = _d[1];
    var buttonRef1 = react_1.useRef(null);
    var buttonRef2 = react_1.useRef(null);
    var buttonRef3 = react_1.useRef(null);
    var rootRef = react_1.useRef(null);
    return (react_1.default.createElement("div", { ref: rootRef, style: { position: 'relative', height: '500px' } },
        react_1.default.createElement(bundle_1.Button, { innerRef: buttonRef1, view: "default", size: "m", onClick: function () { return setVisible1(!visible1); } }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C"),
        react_1.default.createElement(bundle_3.Modal, { theme: "normal", visible: visible1, onClose: function () { return setVisible1(false); }, scope: rootRef },
            react_1.default.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)', width: 400 } },
                react_1.default.createElement("div", { style: { marginBottom: 16 } },
                    "\u041E\u0431\u0449\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430\u044F \u043C\u043D\u043E\u0433\u043E\u044F\u0437\u044B\u0447\u043D\u0430\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u044D\u043D\u0446\u0438\u043A\u043B\u043E\u043F\u0435\u0434\u0438\u044F \u0441\u043E \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C.",
                    react_1.default.createElement("div", null,
                        react_1.default.createElement(bundle_6.Select, { size: "m", view: "default", value: value1, onChange: function (event) { return setValue1(event.target.value); }, options: [
                                { value: 'a', content: 'Каждый' },
                                { value: 'b', content: 'Охотник' },
                                { value: 'c', content: 'Желает' },
                                { value: 'd', content: 'Знать' },
                                { value: 'e', content: 'Где', disabled: true },
                                { value: 'f', content: 'Сидит' },
                                { value: 'g', content: 'Фазан' },
                            ] }))),
                react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } },
                    react_1.default.createElement(bundle_1.Button, { view: "default", size: "m", innerRef: buttonRef3, onClick: function () { return setVisible3(!visible3); } }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C MessageBox"),
                    react_1.default.createElement(bundle_4.MessageBoxPopup, { scope: rootRef, onClose: function () { return setVisible3(false); }, visible: visible3, hasTail: true, anchor: buttonRef3, direction: "bottom", view: "default", size: "m" }, "\u041E\u0431\u0449\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430\u044F \u043C\u043D\u043E\u0433\u043E\u044F\u0437\u044B\u0447\u043D\u0430\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u044D\u043D\u0446\u0438\u043A\u043B\u043E\u043F\u0435\u0434\u0438\u044F \u0441\u043E \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C."),
                    react_1.default.createElement(bundle_1.Button, { view: "default", size: "m", innerRef: buttonRef2, onClick: function () { return setVisible2(!visible2); } }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C Popup"),
                    react_1.default.createElement(bundle_2.Popup, { scope: rootRef, hasTail: true, visible: visible2, anchor: buttonRef2, onClose: function () { return setVisible2(false); }, target: "anchor", view: "default" },
                        react_1.default.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)' } },
                            react_1.default.createElement(bundle_5.TooltipStateful, { hasTail: true, view: "default", size: "m", content: "\u041E\u0431\u0449\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430\u044F \u043C\u043D\u043E\u0433\u043E\u044F\u0437\u044B\u0447\u043D\u0430\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442-\u044D\u043D\u0446\u0438\u043A\u043B\u043E\u043F\u0435\u0434\u0438\u044F \u0441\u043E \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C.", trigger: "click", scope: rootRef },
                                react_1.default.createElement(bundle_1.Button, { view: "default", size: "m" }, "\u041E\u0442\u043A\u0440\u044B\u0442\u044C Tooltip")))))))));
};
exports.ComplexModal = ComplexModal;