@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
125 lines • 6.25 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
import { getRowHeights } from '../../pm-plugins/utils/row-controls';
import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
import { TableCssClassName as ClassName } from '../../types';
import { ColumnControls } from './ColumnControls';
import { ColumnDropTargets } from './ColumnDropTargets';
var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
var editorView = _ref.editorView,
tableRef = _ref.tableRef,
getNode = _ref.getNode,
tableActive = _ref.tableActive,
hasHeaderRow = _ref.hasHeaderRow,
hoveredCell = _ref.hoveredCell,
isResizing = _ref.isResizing,
stickyHeader = _ref.stickyHeader,
selection = _ref.selection,
isInDanger = _ref.isInDanger,
isTableHovered = _ref.isTableHovered,
tableContainerWidth = _ref.tableContainerWidth,
isNumberColumnEnabled = _ref.isNumberColumnEnabled,
getScrollOffset = _ref.getScrollOffset,
tableWrapperHeight = _ref.tableWrapperHeight,
api = _ref.api,
isChromelessEditor = _ref.isChromelessEditor,
isDragAndDropEnabled = _ref.isDragAndDropEnabled;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isDragging = _useState2[0],
setIsDragging = _useState2[1];
var containerRef = useRef(null);
var node = getNode();
var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
var hasHeaderColumn = containsHeaderColumn(node);
var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
useEffect(function () {
return monitorForElements({
canMonitor: function canMonitor(_ref2) {
var source = _ref2.source;
var _ref3 = source.data,
type = _ref3.type,
localId = _ref3.localId,
indexes = _ref3.indexes;
return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
},
onDragStart: function onDragStart() {
setIsDragging(true);
},
onDrop: function onDrop() {
setIsDragging(false);
}
});
}, [editorView, currentNodeLocalId]);
var rowHeights = useMemo(function () {
// NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
if (tableRef && !!tableWrapperHeight) {
return getRowHeights(tableRef);
}
return [0];
}, [tableRef, tableWrapperHeight]);
if (!tableRef || !tableActive || isResizing) {
return null;
}
var colWidths = getColumnsWidths(editorView);
if (stickyTop) {
var _containerRef$current;
var columnControlTopOffsetFromParent = '-12px';
containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.style.setProperty('top', columnControlTopOffsetFromParent);
} else {
var _containerRef$current2;
containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
}
var anchorStyles = {};
if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
var _tableRef$querySelect, _tableRef$querySelect2;
var rowAnchorName = (_tableRef$querySelect = tableRef.querySelector('tr')) === null || _tableRef$querySelect === void 0 ? void 0 : _tableRef$querySelect.style.getPropertyValue('anchor-name');
// cast here is due to CSSProperties missing valid positionAnchor property
anchorStyles = {
/* We need to default to checking the anchor style because there may be a conflict with the block controls
plugin not using the data attribute value and setting the `anchor-name` style property independently of the data attribute.
*/
positionAnchor: rowAnchorName === '' ? (_tableRef$querySelect2 = tableRef.querySelector('tr')) === null || _tableRef$querySelect2 === void 0 ? void 0 : _tableRef$querySelect2.dataset.nodeAnchor : rowAnchorName
};
}
return /*#__PURE__*/React.createElement("div", {
ref: containerRef
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER + (isChromelessEditor ? ' ' + ClassName.TABLE_CHROMELESS : ''),
"data-testid": "table-floating-column-controls-wrapper"
// anchor name is determined dynamically so can't use static styles
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
,
style: anchorStyles
}, /*#__PURE__*/React.createElement(ColumnControls, {
editorView: editorView,
hoveredCell: hoveredCell,
tableRef: tableRef,
tableActive: tableActive,
isTableHovered: isTableHovered,
stickyTop: tableActive ? stickyTop : undefined,
localId: currentNodeLocalId,
isInDanger: isInDanger,
rowHeights: rowHeights,
colWidths: colWidths,
hasHeaderColumn: hasHeaderColumn,
tableContainerWidth: tableContainerWidth,
isNumberColumnEnabled: isNumberColumnEnabled,
isDragging: isDragging,
getScrollOffset: getScrollOffset,
api: api
}), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
tableRef: tableRef,
isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
tableHeight: tableWrapperHeight,
localId: currentNodeLocalId,
colWidths: colWidths,
getScrollOffset: getScrollOffset
}));
};
export default TableFloatingColumnControls;