@yandex/ui/usePreventScroll/__examples__/default.examples.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var usePreventScroll_1 = require("@yandex-lego/components/usePreventScroll");
var bundle_1 = require("@yandex-lego/components/Button/desktop/bundle");
var styles = "\n    .scrollable {\n        overflow: auto;\n        height: 200px;\n        border: 1px solid #e5e5e5;\n        padding: 12px;\n        border-radius: 4px;\n        margin-top: 16px;\n    }\n\n    .skeleton {\n        height: 20px;\n        border-radius: 1px;\n        background-color: rgb(240, 240, 240);\n    }\n\n    .skeleton + .skeleton {\n        margin-top: 8px;\n    }\n";
var Default = function () {
    var containerRef = react_1.useRef(null);
    var _a = tslib_1.__read(react_1.useState(false), 2), enabled = _a[0], setEnabled = _a[1];
    var toggle = react_1.useCallback(function () { return setEnabled(function (v) { return !v; }); }, []);
    usePreventScroll_1.usePreventScroll({ enabled: enabled, containerRef: containerRef });
    var content = [];
    for (var i = 0; i <= 50; i++) {
        content.push(react_1.default.createElement("div", { key: i, className: "skeleton" }));
    }
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("style", null, styles),
        react_1.default.createElement(bundle_1.Button, { view: "default", size: "m", onClick: toggle }, enabled ? 'Разблокировать scroll' : 'Заблокировать scroll'),
        react_1.default.createElement("div", { ref: containerRef, className: "scrollable" }, content)));
};
exports.Default = Default;