@yandex/ui
Version:
Yandex UI components
51 lines (50 loc) • 2.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Default = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var ScrollLocker = tslib_1.__importStar(require("@yandex-lego/components/lib/scroll-locker"));
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 = /** @class */ (function (_super) {
tslib_1.__extends(Default, _super);
function Default() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
enabled: false,
};
_this.containerRef = react_1.default.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_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: this.toggle }, enabled ? 'Разблокировать scroll' : 'Заблокировать scroll'),
react_1.default.createElement("div", { ref: this.containerRef, className: "scrollable" }, content)));
};
return Default;
}(react_1.default.Component));
exports.Default = Default;