@yandex/ui
Version:
Yandex UI components
20 lines (19 loc) • 1.49 kB
JavaScript
import { __read } from "tslib";
import React, { useState, useCallback, useRef } from 'react';
import { usePreventScroll } from '@yandex-lego/components/usePreventScroll';
import { Button } from '@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";
export var Default = function () {
var containerRef = useRef(null);
var _a = __read(useState(false), 2), enabled = _a[0], setEnabled = _a[1];
var toggle = useCallback(function () { return setEnabled(function (v) { return !v; }); }, []);
usePreventScroll({ enabled: enabled, containerRef: containerRef });
var content = [];
for (var i = 0; i <= 50; i++) {
content.push(React.createElement("div", { key: i, className: "skeleton" }));
}
return (React.createElement(React.Fragment, null,
React.createElement("style", null, styles),
React.createElement(Button, { view: "default", size: "m", onClick: toggle }, enabled ? 'Разблокировать scroll' : 'Заблокировать scroll'),
React.createElement("div", { ref: containerRef, className: "scrollable" }, content)));
};