@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
125 lines (123 loc) • 5.83 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import rafSchedule from 'raf-schd';
import { TableCssClassName as ClassName, ShadowEvent } from '../types';
import { updateShadowListForStickyStyles } from './update-overflow-shadows';
export var OverflowShadowsObserver = /*#__PURE__*/function () {
// updateShadowState is a method to update shadow key
function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
var _this = this;
_classCallCheck(this, OverflowShadowsObserver);
_defineProperty(this, "leftShadowSentinel", null);
_defineProperty(this, "rightShadowSentinel", null);
_defineProperty(this, "shadowsObserved", false);
_defineProperty(this, "isSticky", false);
_defineProperty(this, "stickyRowHeight", 0);
_defineProperty(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 ? ShadowEvent.SHOW_BEFORE_SHADOW : 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;
}
});
_defineProperty(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(ClassName.TABLE_SHADOW_SENTINEL_LEFT));
_this.rightShadowSentinel = (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(".".concat(ClassName.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
*/
_defineProperty(this, "updateStickyShadows", rafSchedule(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(ClassName.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(ClassName.TABLE_LEFT_SHADOW));
updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
}
}));
this.updateShadowState = updateShadowState;
this.table = _table;
this.wrapper = wrapper;
this.init();
}
return _createClass(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;
}
}
}]);
}();