@yandex/ui
Version:
Yandex UI components
48 lines (47 loc) • 2.26 kB
JavaScript
import { __extends } from "tslib";
import React from 'react';
import * as ScrollLocker from '@yandex-lego/components/lib/scroll-locker';
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";
var Default = /** @class */ (function (_super) {
__extends(Default, _super);
function Default() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
enabled: false,
};
_this.containerRef = React.createRef();
_this.toggle = function () {
_this.setState({
enabled: !_this.state.enabled,
}, _this.toggleScrollLock);
};
_this.toggleScrollLock = function () {
if (_this.state.enabled) {
ScrollLocker.lock(_this.containerRef.current);
}
else {
ScrollLocker.unlock(_this.containerRef.current);
}
};
return _this;
}
Default.prototype.componentWillUnmount = function () {
if (this.state.enabled) {
ScrollLocker.unlock(this.containerRef.current);
}
};
Default.prototype.render = function () {
var enabled = this.state.enabled;
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: this.toggle }, enabled ? 'Разблокировать scroll' : 'Заблокировать scroll'),
React.createElement("div", { ref: this.containerRef, className: "scrollable" }, content)));
};
return Default;
}(React.Component));
export { Default };