@skbkontur/db-viewer-ui
Version:
Database Viewer with custom configuration
190 lines • 7.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScrollableContainer = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
const react_1 = tslib_1.__importDefault(require("react"));
const ScrollableContainer_styles_1 = require("./ScrollableContainer.styles");
function top(element) {
return element.getBoundingClientRect().top;
}
function bottom(element) {
return element.getBoundingClientRect().bottom;
}
class ScrollableContainer extends react_1.default.Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "scrollLeft", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "scrollingSource", {
enumerable: true,
configurable: true,
writable: true,
value: "none"
});
Object.defineProperty(this, "root", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "container", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "scrollbarChild", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "scrollbar", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "setScrollingSource", {
enumerable: true,
configurable: true,
writable: true,
value: (0, debounce_1.default)(x => {
this.scrollingSource = x;
}, 50)
});
Object.defineProperty(this, "handlePageScroll", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.adjustPositions();
this.adjustShadows();
}
});
Object.defineProperty(this, "handlePageResize", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
this.adjustPositions();
this.adjustShadows();
}
});
}
componentDidUpdate() {
this.adjustShadows();
}
componentDidMount() {
this.adjustPositions();
this.init();
document.addEventListener("scroll", this.handlePageScroll);
window.addEventListener("scroll", this.handlePageScroll);
document.addEventListener("resize", this.handlePageResize);
window.addEventListener("resize", this.handlePageResize);
}
componentWillUnmount() {
document.removeEventListener("scroll", this.handlePageScroll);
window.removeEventListener("scroll", this.handlePageScroll);
document.removeEventListener("resize", this.handlePageResize);
window.removeEventListener("resize", this.handlePageResize);
}
render() {
const { children, className } = this.props;
return ((0, jsx_runtime_1.jsx)("div", { ref: el => (this.root = el), className: `${ScrollableContainer_styles_1.jsStyles.container()} ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `${ScrollableContainer_styles_1.jsStyles.root()} ${className}`, ref: el => (this.container = el), children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
overflowX: "auto",
position: "fixed",
width: "100%",
bottom: 0,
}, ref: el => (this.scrollbar = el), children: (0, jsx_runtime_1.jsx)("div", { ref: el => (this.scrollbarChild = el), style: { height: "1px" } }) })] }) }));
}
adjustPositions() {
const scrollLeft = this.scrollLeft;
const container = this.container;
const scrollbar = this.scrollbar;
const scrollbarChild = this.scrollbarChild;
this.showFixedScrollbar();
if (container != null && scrollbar != null && scrollbarChild != null) {
if (top(container) < top(scrollbar) && bottom(container) > bottom(scrollbar)) {
scrollbarChild.style.width = container.scrollWidth + "px";
scrollbar.style.left = container.getBoundingClientRect().left + "px";
scrollbar.style.width =
container.getBoundingClientRect().right - container.getBoundingClientRect().left + "px";
scrollbar.scrollLeft = scrollLeft;
}
else {
this.hideFixedScrollbar();
}
}
}
adjustShadows() {
const container = this.container;
const scrollbar = this.scrollbar;
const root = this.root;
if (scrollbar == null || root == null || container == null) {
return;
}
if (container.scrollLeft > 5) {
root.classList.add(ScrollableContainer_styles_1.jsStyles.leftShadow());
}
else {
root.classList.remove(ScrollableContainer_styles_1.jsStyles.leftShadow());
}
if (container.scrollLeft < container.scrollWidth - container.offsetWidth - 5) {
root.classList.add(ScrollableContainer_styles_1.jsStyles.rightShadow());
}
else {
root.classList.remove(ScrollableContainer_styles_1.jsStyles.rightShadow());
}
}
hideFixedScrollbar() {
const scrollbar = this.scrollbar;
if (scrollbar != null) {
scrollbar.style.display = "none";
}
}
showFixedScrollbar() {
const scrollbar = this.scrollbar;
if (scrollbar != null) {
scrollbar.style.display = "block";
}
}
init() {
const scrollbar = this.scrollbar;
const container = this.container;
if (scrollbar == null || container == null) {
return;
}
scrollbar.addEventListener("scroll", () => {
if (this.scrollingSource === "scrollbar" || this.scrollingSource === "none") {
this.scrollingSource = "scrollbar";
container.scrollLeft = scrollbar.scrollLeft;
this.setScrollingSource("none");
}
else {
this.scrollLeft = scrollbar.scrollLeft;
}
this.adjustShadows();
});
container.addEventListener("scroll", () => {
if (this.scrollingSource === "container" || this.scrollingSource === "none") {
this.scrollingSource = "container";
scrollbar.scrollLeft = container.scrollLeft;
this.scrollLeft = container.scrollLeft;
this.setScrollingSource("none");
}
else {
this.scrollLeft = container.scrollLeft;
}
this.adjustShadows();
});
}
}
exports.ScrollableContainer = ScrollableContainer;
//# sourceMappingURL=ScrollableContainer.js.map