@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
105 lines • 4.12 kB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
import { getRowHeights } from '../../pm-plugins/utils/row-controls';
import { TableCssClassName as ClassName } from '../../types';
import { ColumnControls } from './ColumnControls';
import { ColumnDropTargets } from './ColumnDropTargets';
const TableFloatingColumnControls = ({
editorView,
tableRef,
getNode,
tableActive,
hasHeaderRow,
hoveredCell,
isResizing,
stickyHeader,
selection,
isInDanger,
isTableHovered,
tableContainerWidth,
isNumberColumnEnabled,
getScrollOffset,
tableWrapperHeight,
api,
isChromelessEditor
}) => {
const [isDragging, setIsDragging] = useState(false);
const containerRef = useRef(null);
const node = getNode();
const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
const hasHeaderColumn = containsHeaderColumn(node);
const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
useEffect(() => {
return monitorForElements({
canMonitor({
source
}) {
const {
type,
localId,
indexes
} = source.data;
return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
},
onDragStart() {
setIsDragging(true);
},
onDrop() {
setIsDragging(false);
}
});
}, [editorView, currentNodeLocalId]);
const rowHeights = useMemo(() => {
// 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;
}
const colWidths = getColumnsWidths(editorView);
if (stickyTop) {
var _containerRef$current;
const columnControlTopOffsetFromParent = '-12px';
containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('top', columnControlTopOffsetFromParent);
} else {
var _containerRef$current2;
containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
}
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"
}, /*#__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;