@atlaskit/renderer/dist/cjs/react/nodes/TableStickyScrollbar.js

Renderer component

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableStickyScrollbar = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _styles = require("@atlaskit/editor-common/styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
  function TableStickyScrollbar(wrapper) {
    var _this = this;
    (0, _classCallCheck2.default)(this, TableStickyScrollbar);
    (0, _defineProperty2.default)(this, "sentinels", {});
    (0, _defineProperty2.default)(this, "handleScroll", function (event) {
      if (!_this.stickyScrollbarContainerElement || !_this.wrapper || event.target !== _this.stickyScrollbarContainerElement) {
        return;
      }
      _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
    });
    this.wrapper = wrapper;
    this.init();
  }
  return (0, _createClass2.default)(TableStickyScrollbar, [{
    key: "dispose",
    value: function 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();
    }
  }, {
    key: "scrollLeft",
    value: function scrollLeft(left) {
      if (this.stickyScrollbarContainerElement) {
        this.stickyScrollbarContainerElement.scrollLeft = left;
      }
    }
  }, {
    key: "init",
    value: function init() {
      var _this$wrapper$parentE, _this$wrapper$parentE2;
      if (!this.wrapper) {
        return;
      }
      var scrollbarContainers = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelectorAll(".".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));

      // eslint-disable-next-line @atlaskit/editor/no-as-casting, @atlaskit/platform/valid-gate-name
      this.stickyScrollbarContainerElement = (0, _platformFeatureFlags.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(".".concat(_styles.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();
    }
  }, {
    key: "createIntersectionObserver",
    value: function createIntersectionObserver() {
      var _this2 = this,
        _this$wrapper,
        _this$wrapper2,
        _this$wrapper3;
      this.rendererScrollableElement = window.document;
      if (!this.rendererScrollableElement || !this.wrapper) {
        return;
      }
      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
        if (!_this2.stickyScrollbarContainerElement) {
          return;
        }
        entries.forEach(function (entry) {
          // Ignored via go/ees005
          // eslint-disable-next-line @atlaskit/editor/no-as-casting
          var target = entry.target;
          if (target.classList.contains(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
            _this2.sentinelBottomCallback(entry);
          }
          if (target.classList.contains(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
            _this2.sentinelTopCallback(entry);
          }
        });
      }, {
        root: this.rendererScrollableElement
      });
      var bottomSentinels = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 || (_this$wrapper = _this$wrapper.parentElement) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM);

      // eslint-disable-next-line @atlaskit/platform/valid-gate-name
      this.sentinels.bottom = (0, _platformFeatureFlags.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 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.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 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.getElementsByClassName(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.item(0);
      [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
        return (
          // Ignored via go/ees005
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          _this2.intersectionObserver.observe(el)
        );
      });
    }
  }, {
    key: "deleteIntersectionObserver",
    value: function deleteIntersectionObserver() {
      if (this.intersectionObserver) {
        if (this.sentinels.bottom) {
          this.intersectionObserver.unobserve(this.sentinels.bottom);
        }
        this.intersectionObserver.disconnect();
      }
    }
  }, {
    key: "sentinelBottomCallback",
    value: function sentinelBottomCallback(entry) {
      var _entry$rootBounds;
      var 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();
    }
  }, {
    key: "sentinelTopCallback",
    value: function sentinelTopCallback(entry) {
      var _entry$rootBounds2;
      var 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();
    }
  }, {
    key: "toggle",
    value: function toggle() {
      if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
        this.show();
      } else {
        this.hide();
      }
    }
  }, {
    key: "hide",
    value: function hide() {
      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'hidden') {
        this.stickyScrollbarContainerElement.style.visibility = 'hidden';
      }
    }
  }, {
    key: "show",
    value: function show() {
      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'visible') {
        this.stickyScrollbarContainerElement.style.visibility = 'visible';
      }
    }
  }]);
}();