@yandex/ui/Popup/__examples__/scrollable.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Scrollable = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var bundle_1 = require("@yandex-lego/components/Popup/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Button/desktop/bundle");
var Scrollable = function () {
    var scopeRef = react_1.useRef(null);
    var anchorRef = react_1.useRef(null);
    var _a = tslib_1.__read(react_1.useState(false), 2), visible = _a[0], setVisible = _a[1];
    return (react_1.default.createElement("div", { ref: scopeRef, style: { position: 'relative' } },
        react_1.default.createElement("div", { className: "wrapper", style: { overflowY: 'hidden', overflowX: 'auto' } },
            react_1.default.createElement("div", { style: { width: 5000, overflow: 'auto' } },
                react_1.default.createElement("div", { className: "header", style: { background: '#555', color: '#eee', width: 10000 } },
                    "\u0412 1800-\u0445 \u0433\u043E\u0434\u0430\u0445,\u00A0",
                    react_1.default.createElement(bundle_2.Button, { onClick: function () { return setVisible(!visible); }, innerRef: anchorRef, size: "m", view: "default", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043F\u043E\u043F\u0430\u043F" }),
                    "\u00A0\u0432 \u0442\u0435 \u0432\u0440\u0435\u043C\u0435\u043D\u0430, \u043A\u043E\u0433\u0434\u0430 \u043D\u0435 \u0431\u044B\u043B\u043E \u0435\u0449\u0435 \u043D\u0438 \u0436\u0435\u043B\u0435\u0437\u043D\u044B\u0445, \u043D\u0438 \u0448\u043E\u0441\u0441\u0435\u0439\u043D\u044B\u0445 \u0434\u043E\u0440\u043E\u0433, \u043D\u0438 \u0433\u0430\u0437\u043E\u0432\u043E\u0433\u043E, \u043D\u0438 \u0441\u0442\u0435\u0430\u0440\u0438\u043D\u043E\u0432\u043E\u0433\u043E \u0441\u0432\u0435\u0442\u0430, \u043D\u0438 \u043F\u0440\u0443\u0436\u0438\u043D\u043D\u044B\u0445 \u043D\u0438\u0437\u043A\u0438\u0445 \u0434\u0438\u0432\u0430\u043D\u043E\u0432, \u043D\u0438 \u043C\u0435\u0431\u0435\u043B\u0438 \u0431\u0435\u0437 \u043B\u0430\u043A\u0443,\u00A0 \u043D\u0438 \u0440\u0430\u0437\u043E\u0447\u0430\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0445 \u044E\u043D\u043E\u0448\u0435\u0439 \u0441\u043E \u0441\u0442\u0435\u043A\u043B\u044B\u0448\u043A\u0430\u043C\u0438, \u043D\u0438 \u043B\u0438\u0431\u0435\u0440\u0430\u043B\u044C\u043D\u044B\u0445 \u0444\u0438\u043B\u043E\u0441\u043E\u0444\u043E\u0432-\u0436\u0435\u043D\u0449\u0438\u043D..."),
                react_1.default.createElement(bundle_1.Popup, { hasTail: true, target: "anchor", anchor: anchorRef, scope: scopeRef, view: "default", visible: visible, style: { maxWidth: 280 }, onClose: function () { return setVisible(false); } },
                    react_1.default.createElement("div", { style: { padding: 16, fontFamily: 'var(--control-font-family)' } }, "\u0410 \u0432\u044B \u043A\u0430\u043A \u0434\u0443\u043C\u0430\u0435\u0442\u0435?"))))));
};
exports.Scrollable = Scrollable;