@wix/design-system/dist/cjs/Table/FloatingScrollBar/FloatingScrollBarState.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.FloatingScrollBarState = void 0;
var _addResizeObserver = require("../../utils/addResizeObserver");
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var addResizeObserverThrottled = (element, cb) => (0, _addResizeObserver.addResizeObserver)(element, (0, _throttle.default)(cb, 100));
class FloatingScrollBarState {
  constructor(params) {
    this.setFloatingPosition = void 0;
    this.setScrollContentSize = void 0;
    this.setScrollContentPosition = void 0;
    this.viewportRef = void 0;
    this.scrollableContentRef = void 0;
    this.scrollElementRef = void 0;
    this.setFloatingPosition = params.setFloatingPosition;
    this.setScrollContentSize = params.setScrollContentSize;
    this.setScrollContentPosition = params.setScrollContentPosition;
    this.viewportRef = params.viewportRef;
    this.scrollableContentRef = params.scrollableContentRef;
    this.scrollElementRef = params.scrollElementRef;
  }
  init() {
    var {
      setFloatingPosition,
      setScrollContentSize,
      setScrollContentPosition,
      viewportRef,
      scrollableContentRef,
      scrollElementRef
    } = this;
    var scrollElement = scrollElementRef == null ? void 0 : scrollElementRef.current;
    var viewportElement = viewportRef == null ? void 0 : viewportRef.current;
    var scrollableContentElement = scrollableContentRef == null ? void 0 : scrollableContentRef.current;
    var scrollableContentParentElement = scrollableContentElement == null ? void 0 : scrollableContentElement.parentElement;
    if (!viewportElement || !scrollableContentElement || !scrollableContentParentElement || !scrollElement) {
      return;
    }
    var checkIfTableEndExceedsContainer = () => {
      var scrollableContentRect = scrollableContentElement.getBoundingClientRect();
      var scrollElementRect = scrollElement.getBoundingClientRect();
      var viewportRect = viewportElement.getBoundingClientRect();
      // min between the bottom of viewport element and the bottom of the viewport

      var viewportVerticalEndRelative = Math.min(scrollElement.clientHeight, viewportElement.clientHeight, window.innerHeight - viewportRect.top);
      setFloatingPosition(scrollableContentRect.bottom > scrollElementRect.bottom ? {
        top: viewportVerticalEndRelative
      } : undefined);
    };
    var syncPosition = () => {
      var viewportRect = viewportElement.getBoundingClientRect();
      var scrollableContentParentRect = scrollableContentParentElement.getBoundingClientRect();
      setScrollContentPosition({
        left: scrollableContentParentRect.left - viewportRect.left,
        width: scrollableContentParentElement.clientWidth
      });
    };
    var syncSize = () => {
      setScrollContentSize({
        width: scrollableContentParentElement.scrollWidth
      });
    };
    var onScroll = (0, _throttle.default)(() => {
      checkIfTableEndExceedsContainer();
    }, 100);
    scrollElement == null || scrollElement.addEventListener('scroll', onScroll);
    var disposers = [addResizeObserverThrottled(viewportElement, () => {
      checkIfTableEndExceedsContainer();
      syncPosition();
    }), addResizeObserverThrottled(scrollableContentElement, () => {
      checkIfTableEndExceedsContainer();
    }), addResizeObserverThrottled(scrollElement, () => {
      checkIfTableEndExceedsContainer();
    }), addResizeObserverThrottled(scrollableContentParentElement, () => {
      syncSize();
      syncPosition();
    })];
    return () => {
      disposers.forEach(disposer => disposer && disposer());
      scrollElement == null || scrollElement.removeEventListener('scroll', onScroll);
    };
  }
}
exports.FloatingScrollBarState = FloatingScrollBarState;
//# sourceMappingURL=FloatingScrollBarState.js.map