@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
132 lines (129 loc) • 6.41 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.OverflowShadowsObserver = 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 _rafSchd = _interopRequireDefault(require("raf-schd"));
var _types = require("../types");
var _updateOverflowShadows = require("./update-overflow-shadows");
var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/function () {
// updateShadowState is a method to update shadow key
function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
var _this = this;
(0, _classCallCheck2.default)(this, OverflowShadowsObserver);
(0, _defineProperty2.default)(this, "leftShadowSentinel", null);
(0, _defineProperty2.default)(this, "rightShadowSentinel", null);
(0, _defineProperty2.default)(this, "shadowsObserved", false);
(0, _defineProperty2.default)(this, "isSticky", false);
(0, _defineProperty2.default)(this, "stickyRowHeight", 0);
(0, _defineProperty2.default)(this, "init", function () {
var table = _this.table;
if (!_this.wrapper || !table) {
return;
}
if (!_this.tableIntersectionObserver) {
var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
if (entry.target !== _this.leftShadowSentinel && entry.target !== _this.rightShadowSentinel) {
return;
}
_this.updateStickyShadowsHeightIfChanged();
_this.updateShadowState(_this.leftShadowSentinel === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW, entry.intersectionRatio !== 1);
};
_this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
entries.forEach(function (entry) {
return intersectonOnbserverCallback(entry);
});
}, {
threshold: [0, 1],
root: _this.wrapper,
rootMargin: '0px'
});
return;
}
});
(0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
var _this$table, _this$table2;
if (_this.isSticky === isSticky) {
return;
}
_this.isSticky = !!isSticky;
// reset height
_this.stickyRowHeight = 0;
// update sticky shadows
_this.updateStickyShadowsHeightIfChanged();
_this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
_this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_RIGHT));
if (_this.tableIntersectionObserver && _this.leftShadowSentinel && _this.rightShadowSentinel && !_this.shadowsObserved) {
_this.tableIntersectionObserver.disconnect();
_this.tableIntersectionObserver.observe(_this.leftShadowSentinel);
_this.tableIntersectionObserver.observe(_this.rightShadowSentinel);
_this.shadowsObserved = true;
}
});
/**
* Takes a heightStyle if it can be computed in a less expensive manner,
* e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
* reading it from sticky cell
*/
(0, _defineProperty2.default)(this, "updateStickyShadows", (0, _rafSchd.default)(function (stickyRowHeight) {
var _this$wrapper;
if (!_this.isSticky) {
return;
}
var stickyCell = _this.getStickyCell();
if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
return;
}
// Reflow Warning! - stickyCell.clientHeight
var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
if (newStickyRowHeight !== _this.stickyRowHeight) {
var _this$wrapper2, _this$wrapper3;
_this.stickyRowHeight = newStickyRowHeight;
var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
// Use getElementsByClassName here for a live node list to capture
// sticky shadows
var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
(0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
}
}));
this.updateShadowState = updateShadowState;
this.table = _table;
this.wrapper = wrapper;
this.init();
}
return (0, _createClass2.default)(OverflowShadowsObserver, [{
key: "updateStickyShadowsHeightIfChanged",
value: function updateStickyShadowsHeightIfChanged() {
if (!this.isSticky) {
return;
}
var stickyCell = this.getStickyCell();
if (!stickyCell) {
return;
}
this.updateStickyShadows();
}
}, {
key: "getStickyCell",
value: function getStickyCell() {
var _this$wrapper4;
var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
var stickyCell = stickyRow && stickyRow.firstElementChild;
return stickyCell;
}
}, {
key: "dispose",
value: function dispose() {
if (this.tableIntersectionObserver) {
this.tableIntersectionObserver.disconnect();
this.tableIntersectionObserver = undefined;
}
}
}]);
}();