@atlaskit/dynamic-table/dist/esm/components/loading-container-advanced.js

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

/* loading-container-advanced.tsx generated by @compiled/babel-plugin v3.0.2 */
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "testId"];
import "./loading-container-advanced.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
/* eslint-disable @repo/internal/react/require-jsdoc */

import React, { forwardRef } from 'react';
import Spinner from '@atlaskit/spinner/spinner';
var containerStyles = null;
var Container = /*#__PURE__*/forwardRef(function (props, ref) {
  var children = props.children,
    testId = props.testId,
    rest = _objectWithoutProperties(props, _excluded);
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
    "data-testid": testId,
    ref: ref,
    className: ax(["_kqswh2mm _6rth1ejb"])
  }), children);
});
var spinnerBackdropStyles = null;
var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
  var children = _ref.children,
    testId = _ref.testId;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": testId && "".concat(testId, "--spinner-backdrop"),
    className: ax(["_1r04idpf _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _lcxvglyw"])
  }, children);
};
var spinnerContainerStyles = null;
var SpinnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var children = _ref2.children;
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: ax(["_kqswh2mm _152tidpf"])
  }, children);
});
// eslint-disable-next-line @repo/internal/react/no-class-components
var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
  function LoadingContainerAdvanced() {
    var _this;
    _classCallCheck(this, LoadingContainerAdvanced);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, LoadingContainerAdvanced, [].concat(args));
    _defineProperty(_this, "spinnerRef", /*#__PURE__*/React.createRef());
    _defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
    _defineProperty(_this, "componentDidMount", function () {
      if (_this.props.isLoading && _this.hasTargetNode()) {
        _this.attachListeners();
        _this.updateTargetAppearance();
        _this.updateSpinnerPosition();
      }
    });
    _defineProperty(_this, "UNSAFE_componentWillReceiveProps", function (nextProps) {
      if (!nextProps.isLoading || !_this.hasTargetNode(nextProps)) {
        _this.detachListeners();
      } else if (!_this.props.isLoading) {
        _this.attachListeners();
      }
    });
    _defineProperty(_this, "componentDidUpdate", function () {
      if (_this.hasTargetNode()) {
        _this.updateTargetAppearance();
        if (_this.props.isLoading) {
          _this.updateSpinnerPosition();
        }
      }
    });
    _defineProperty(_this, "componentWillUnmount", function () {
      _this.detachListeners();
    });
    _defineProperty(_this, "getTargetNode", function () {
      var nextProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
      var targetRef = nextProps.targetRef;
      var target = targetRef === null || targetRef === void 0 ? void 0 : targetRef();
      return target || _this.containerRef.current;
    });
    _defineProperty(_this, "hasTargetNode", function (nextProps) {
      return !!_this.getTargetNode(nextProps);
    });
    _defineProperty(_this, "isVerticallyVisible", function (elementRect, viewportHeight) {
      var top = elementRect.top,
        bottom = elementRect.bottom;
      if (bottom <= 0) {
        return false;
      }
      return top < viewportHeight;
    });
    _defineProperty(_this, "isFullyVerticallyVisible", function (elementRect, viewportHeight) {
      var top = elementRect.top,
        bottom = elementRect.bottom;
      return top >= 0 && bottom <= viewportHeight;
    });
    _defineProperty(_this, "handleResize", function () {
      _this.updateSpinnerPosition();
    });
    _defineProperty(_this, "handleScroll", function () {
      _this.updateSpinnerPosition();
    });
    _defineProperty(_this, "translateSpinner", function (spinnerNode, transformY, isFixed) {
      spinnerNode.style.position = isFixed ? 'fixed' : '';
      spinnerNode.style.transform = transformY !== 0 ? "translate3d(0, ".concat(transformY, "px, 0)") : '';
    });
    _defineProperty(_this, "updateTargetAppearance", function () {
      var targetNode = _this.getTargetNode();
      var _this$props = _this.props,
        isLoading = _this$props.isLoading,
        contentsOpacity = _this$props.contentsOpacity;
      if (targetNode && targetNode.style && _typeof(targetNode.style) === 'object') {
        targetNode.style.pointerEvents = isLoading ? 'none' : '';
        targetNode.style.opacity = isLoading ? contentsOpacity.toString() : '';
      }
    });
    return _this;
  }
  _inherits(LoadingContainerAdvanced, _React$Component);
  return _createClass(LoadingContainerAdvanced, [{
    key: "attachListeners",
    value: function attachListeners() {
      window.addEventListener('scroll', this.handleScroll);
      window.addEventListener('resize', this.handleResize);
    }
  }, {
    key: "detachListeners",
    value: function detachListeners() {
      window.removeEventListener('scroll', this.handleScroll);
      window.removeEventListener('resize', this.handleResize);
    }
  }, {
    key: "updateSpinnerPosition",
    value: function updateSpinnerPosition() {
      var _this$spinnerRef, _this$containerRef;
      var viewportHeight = window.innerHeight;
      var targetNode = this.getTargetNode();
      var spinnerNode = (_this$spinnerRef = this.spinnerRef) === null || _this$spinnerRef === void 0 ? void 0 : _this$spinnerRef.current;
      if (!targetNode || typeof targetNode.getBoundingClientRect !== 'function' || !spinnerNode) {
        return;
      }
      var targetRect = targetNode.getBoundingClientRect();
      var spinnerRect = spinnerNode.getBoundingClientRect();
      var spinnerHeight = spinnerRect.height;
      var isInViewport = this.isVerticallyVisible(targetRect, viewportHeight);
      var top = targetRect.top,
        bottom = targetRect.bottom,
        height = targetRect.height;
      if (isInViewport) {
        // The spinner may follow the element only if there is enough space:
        // Let's say the element can fit at least three spinners (vertically)
        var canFollow = height >= spinnerHeight * 3;
        if (canFollow && !this.isFullyVerticallyVisible(targetRect, viewportHeight)) {
          if (top >= 0) {
            // Only the head of the element is visible
            var viewportSpaceTakenByElement = viewportHeight - top;
            var diff = viewportSpaceTakenByElement / 2 + top - spinnerHeight / 2;
            var y = viewportSpaceTakenByElement < spinnerHeight * 3 ? top + spinnerHeight : diff;
            this.translateSpinner(spinnerNode, y, true);
          } else if (top < 0 && bottom > viewportHeight) {
            // The element takes all viewport, nor its head nor tail are visible
            var _y = viewportHeight / 2 - spinnerHeight / 2;
            this.translateSpinner(spinnerNode, _y, true);
          } else {
            // Only the tail of the element is visible
            var _diff = bottom / 2 - spinnerHeight / 2;
            var _y2 = _diff < spinnerHeight ? _diff - (spinnerHeight - _diff) : _diff;
            this.translateSpinner(spinnerNode, _y2, true);
          }
          return;
        }
      } else {
        // If both the element and the spinner are off screen - quit
        if (!this.isVerticallyVisible(spinnerRect, viewportHeight)) {
          return;
        }
      }

      // Three options here:
      // 1) the element is fully visible
      // 2) the element is too small for the spinner to follow
      // 3) the spinner might still be visible while the element isn't
      var containerNode = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.current;
      if (containerNode && typeof containerNode.getBoundingClientRect === 'function') {
        var thisTop = containerNode.getBoundingClientRect().top;
        var _y3 = (top - thisTop) / 2;
        this.translateSpinner(spinnerNode, _y3, false);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        children = _this$props2.children,
        isLoading = _this$props2.isLoading,
        spinnerSize = _this$props2.spinnerSize,
        testId = _this$props2.testId,
        loadingLabel = _this$props2.loadingLabel;
      return /*#__PURE__*/React.createElement(Container, {
        testId: testId && "".concat(testId, "--loading--container--advanced"),
        ref: this.containerRef
      }, children, isLoading && /*#__PURE__*/React.createElement(SpinnerBackdrop, {
        testId: testId
      }, /*#__PURE__*/React.createElement(SpinnerContainer, {
        ref: this.spinnerRef
      }, /*#__PURE__*/React.createElement(Spinner, {
        size: spinnerSize,
        testId: testId && "".concat(testId, "--loadingSpinner"),
        label: loadingLabel
      }))));
    }
  }]);
}(React.Component);
_defineProperty(LoadingContainerAdvanced, "defaultProps", {
  isLoading: true,
  spinnerSize: 'large',
  contentsOpacity: "var(--ds-opacity-loading, 0.2)",
  loadingLabel: 'Loading table'
});
export { LoadingContainerAdvanced as default };