@atlaskit/renderer
Version:
Renderer component
123 lines (120 loc) • 6.92 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
import { fg } from '@atlaskit/platform-feature-flags';
export class TableStickyScrollbar {
constructor(wrapper) {
_defineProperty(this, "sentinels", {});
_defineProperty(this, "handleScroll", event => {
if (!this.stickyScrollbarContainerElement || !this.wrapper || event.target !== this.stickyScrollbarContainerElement) {
return;
}
this.wrapper.scrollLeft = this.stickyScrollbarContainerElement.scrollLeft;
});
this.wrapper = wrapper;
this.init();
}
dispose() {
if (this.stickyScrollbarContainerElement) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
}
this.deleteIntersectionObserver();
}
scrollLeft(left) {
if (this.stickyScrollbarContainerElement) {
this.stickyScrollbarContainerElement.scrollLeft = left;
}
}
init() {
var _this$wrapper$parentE, _this$wrapper$parentE2;
if (!this.wrapper) {
return;
}
const scrollbarContainers = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelectorAll(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
// eslint-disable-next-line @atlaskit/editor/no-as-casting, @atlaskit/platform/valid-gate-name
this.stickyScrollbarContainerElement = fg('platform_editor_querySelector_fix_table_renderer') ? scrollbarContainers === null || scrollbarContainers === void 0 ? void 0 : scrollbarContainers.item(scrollbarContainers.length - 1) : (_this$wrapper$parentE2 = this.wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : _this$wrapper$parentE2.querySelector(`.${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
if (this.stickyScrollbarContainerElement) {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
passive: true
});
}
this.createIntersectionObserver();
}
createIntersectionObserver() {
var _this$wrapper, _this$wrapper$parentE3, _this$wrapper2, _this$wrapper2$parent, _this$wrapper2$parent2, _this$wrapper3, _this$wrapper3$parent, _this$wrapper3$parent2;
this.rendererScrollableElement = window.document;
if (!this.rendererScrollableElement || !this.wrapper) {
return;
}
this.intersectionObserver = new IntersectionObserver((entries, _) => {
if (!this.stickyScrollbarContainerElement) {
return;
}
entries.forEach(entry => {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
const target = entry.target;
if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
this.sentinelBottomCallback(entry);
}
if (target.classList.contains(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
this.sentinelTopCallback(entry);
}
});
}, {
root: this.rendererScrollableElement
});
const bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper.parentElement) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);
// eslint-disable-next-line @atlaskit/platform/valid-gate-name
this.sentinels.bottom = fg('platform_editor_querySelector_fix_table_renderer') ? // eslint-disable-next-line @atlaskit/editor/no-as-casting
bottomSentinels === null || bottomSentinels === void 0 ? void 0 : bottomSentinels.item(bottomSentinels.length - 1) : // eslint-disable-next-line @atlaskit/editor/no-as-casting
(_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.sentinels.top = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : (_this$wrapper3$parent2 = _this$wrapper3$parent.getElementsByClassName(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3$parent2 === void 0 ? void 0 : _this$wrapper3$parent2.item(0);
[this.sentinels.bottom, this.sentinels.top].forEach(el =>
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
this.intersectionObserver.observe(el));
}
deleteIntersectionObserver() {
if (this.intersectionObserver) {
if (this.sentinels.bottom) {
this.intersectionObserver.unobserve(this.sentinels.bottom);
}
this.intersectionObserver.disconnect();
}
}
sentinelBottomCallback(entry) {
var _entry$rootBounds;
const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) || 0);
this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
this.toggle();
}
sentinelTopCallback(entry) {
var _entry$rootBounds2;
const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.top;
this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
this.toggle();
}
toggle() {
if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
this.show();
} else {
this.hide();
}
}
hide() {
if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'hidden') {
this.stickyScrollbarContainerElement.style.visibility = 'hidden';
}
}
show() {
if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'visible') {
this.stickyScrollbarContainerElement.style.visibility = 'visible';
}
}
}