@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
107 lines (105 loc) • 4.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.updateStickyMargins = exports.updateControls = exports.syncStickyRowToTable = exports.isClickNear = exports.getResizeCellPos = void 0;
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _types = require("../../../types");
var _pluginFactory = require("../../plugin-factory");
var _columnControls = require("../../utils/column-controls");
var _rowControls = require("../../utils/row-controls");
var updateControls = exports.updateControls = function updateControls() {
return function (state) {
var _getMainPluginState = (0, _pluginFactory.getPluginState)(state),
tableRef = _getMainPluginState.tableRef;
if (!tableRef) {
return;
}
var tr = tableRef.querySelector('tr');
if (!tr) {
return;
}
var wrapper = tableRef.parentElement;
if (!(wrapper && wrapper.parentElement)) {
return;
}
var rowControls = wrapper.parentElement.querySelectorAll(".".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP));
var numberedRows = wrapper.parentElement.querySelectorAll(_types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
syncStickyRowToTable(tableRef);
var rowHeights = (0, _rowControls.getRowHeights)(tableRef);
// update rows controls height on resize
for (var i = 0, count = rowControls.length; i < count; i++) {
var height = rowHeights[i];
if (height) {
rowControls[i].style.height = "".concat(height, "px");
if (numberedRows.length) {
numberedRows[i].style.height = "".concat(height, "px");
}
}
}
};
};
var isClickNear = exports.isClickNear = function isClickNear(event, click) {
var dx = click.x - event.clientX,
dy = click.y - event.clientY;
return dx * dx + dy * dy < 100;
};
var getResizeCellPos = exports.getResizeCellPos = function getResizeCellPos(view, event) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = event.target;
if (!(0, _utils.containsClassName)(target, _types.TableCssClassName.RESIZE_HANDLE_DECORATION)) {
return null;
}
var tableCell = (0, _utils.closestElement)(target, 'td, th');
if (!tableCell) {
return null;
}
var cellStartPosition = view.posAtDOM(tableCell, 0);
return cellStartPosition - 1;
};
var updateStickyMargins = exports.updateStickyMargins = function updateStickyMargins(table) {
var row = table.querySelector('tr.sticky');
if (!row) {
table.style.marginTop = '';
return;
}
var paddingTop = (0, _utils.parsePx)(window.getComputedStyle(row).paddingTop || '') || 0;
var firstRowHeight = row.getBoundingClientRect().height - paddingTop - _styles.tableCellBorderWidth;
table.style.marginTop = "".concat(_styles.tableMarginTop + firstRowHeight, "px");
};
var applyColWidthsToStickyRow = function applyColWidthsToStickyRow(colGroup, headerRow) {
// sync column widths for the sticky row
var newCols = (0, _columnControls.colWidthsForRow)(headerRow);
if (newCols) {
headerRow.style.gridTemplateColumns = newCols;
}
};
var syncStickyRowToTable = exports.syncStickyRowToTable = function syncStickyRowToTable(tableRef) {
if (!tableRef) {
return;
}
var headerRow = tableRef.querySelector('tr[data-header-row]');
if (!headerRow) {
return;
}
applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
applyTableWidthToStickyRow(tableRef, headerRow);
};
var applyTableWidthToStickyRow = function applyTableWidthToStickyRow(tableRef, headerRow) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var tbody = tableRef.querySelector('tbody');
var wrapper = tableRef.parentElement;
if (tbody && wrapper) {
// when resizing in Chrome, clientWidth will give us 759px
// but toggling the sticky class will reset it to 760px.
//
// both elements in the dom + inspector will
// be the same width but at layout will be different..
var newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
headerRow.style.width = "".concat(newWidth, "px");
headerRow.scrollLeft = wrapper.scrollLeft;
}
};