@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
237 lines (235 loc) • 12.2 kB
JavaScript
/* loading-container-advanced.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./loading-container-advanced.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
var _excluded = ["children", "testId"];
/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
/* eslint-disable @repo/internal/react/require-jsdoc */
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
var containerStyles = null;
var Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var children = props.children,
testId = props.testId,
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
"data-testid": testId,
ref: ref,
className: (0, _runtime.ax)(["_kqswh2mm _6rth1ejb"])
}), children);
});
var spinnerBackdropStyles = null;
var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
var children = _ref.children,
testId = _ref.testId;
return /*#__PURE__*/_react.default.createElement("div", {
"data-testid": testId && "".concat(testId, "--spinner-backdrop"),
className: (0, _runtime.ax)(["_1r04idpf _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _lcxvglyw"])
}, children);
};
var spinnerContainerStyles = null;
var SpinnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
var children = _ref2.children;
return /*#__PURE__*/_react.default.createElement("div", {
ref: ref,
className: (0, _runtime.ax)(["_kqswh2mm _152tidpf"])
}, children);
});
// eslint-disable-next-line @repo/internal/react/no-class-components
var LoadingContainerAdvanced = exports.default = /*#__PURE__*/function (_React$Component) {
function LoadingContainerAdvanced() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "spinnerRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "containerRef", /*#__PURE__*/_react.default.createRef());
(0, _defineProperty2.default)(_this, "componentDidMount", function () {
if (_this.props.isLoading && _this.hasTargetNode()) {
_this.attachListeners();
_this.updateTargetAppearance();
_this.updateSpinnerPosition();
}
});
(0, _defineProperty2.default)(_this, "UNSAFE_componentWillReceiveProps", function (nextProps) {
if (!nextProps.isLoading || !_this.hasTargetNode(nextProps)) {
_this.detachListeners();
} else if (!_this.props.isLoading) {
_this.attachListeners();
}
});
(0, _defineProperty2.default)(_this, "componentDidUpdate", function () {
if (_this.hasTargetNode()) {
_this.updateTargetAppearance();
if (_this.props.isLoading) {
_this.updateSpinnerPosition();
}
}
});
(0, _defineProperty2.default)(_this, "componentWillUnmount", function () {
_this.detachListeners();
});
(0, _defineProperty2.default)(_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;
});
(0, _defineProperty2.default)(_this, "hasTargetNode", function (nextProps) {
return !!_this.getTargetNode(nextProps);
});
(0, _defineProperty2.default)(_this, "isVerticallyVisible", function (elementRect, viewportHeight) {
var top = elementRect.top,
bottom = elementRect.bottom;
if (bottom <= 0) {
return false;
}
return top < viewportHeight;
});
(0, _defineProperty2.default)(_this, "isFullyVerticallyVisible", function (elementRect, viewportHeight) {
var top = elementRect.top,
bottom = elementRect.bottom;
return top >= 0 && bottom <= viewportHeight;
});
(0, _defineProperty2.default)(_this, "handleResize", function () {
_this.updateSpinnerPosition();
});
(0, _defineProperty2.default)(_this, "handleScroll", function () {
_this.updateSpinnerPosition();
});
(0, _defineProperty2.default)(_this, "translateSpinner", function (spinnerNode, transformY, isFixed) {
spinnerNode.style.position = isFixed ? 'fixed' : '';
spinnerNode.style.transform = transformY !== 0 ? "translate3d(0, ".concat(transformY, "px, 0)") : '';
});
(0, _defineProperty2.default)(_this, "updateTargetAppearance", function () {
var targetNode = _this.getTargetNode();
var _this$props = _this.props,
isLoading = _this$props.isLoading,
contentsOpacity = _this$props.contentsOpacity;
if (targetNode && targetNode.style && (0, _typeof2.default)(targetNode.style) === 'object') {
targetNode.style.pointerEvents = isLoading ? 'none' : '';
targetNode.style.opacity = isLoading ? contentsOpacity.toString() : '';
}
});
return _this;
}
(0, _inherits2.default)(LoadingContainerAdvanced, _React$Component);
return (0, _createClass2.default)(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.default.createElement(Container, {
testId: testId && "".concat(testId, "--loading--container--advanced"),
ref: this.containerRef
}, children, isLoading && /*#__PURE__*/_react.default.createElement(SpinnerBackdrop, {
testId: testId
}, /*#__PURE__*/_react.default.createElement(SpinnerContainer, {
ref: this.spinnerRef
}, /*#__PURE__*/_react.default.createElement(_spinner.default, {
size: spinnerSize,
testId: testId && "".concat(testId, "--loadingSpinner"),
label: loadingLabel
}))));
}
}]);
}(_react.default.Component);
(0, _defineProperty2.default)(LoadingContainerAdvanced, "defaultProps", {
isLoading: true,
spinnerSize: 'large',
contentsOpacity: "var(--ds-opacity-loading, 0.2)",
loadingLabel: 'Loading table'
});