@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
76 lines • 3.52 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from 'react';
import { tableMarginTop } from '@atlaskit/editor-common/styles';
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { getColumnsWidths } from '../pm-plugins/utils/column-controls';
import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';
import { ColumnDropTarget } from '../ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget';
export var ExternalDropTargets = function ExternalDropTargets(_ref) {
var editorView = _ref.editorView,
node = _ref.node,
getScrollOffset = _ref.getScrollOffset,
getTableWrapperWidth = _ref.getTableWrapperWidth;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isDragging = _useState2[0],
setIsDragging = _useState2[1];
var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
useEffect(function () {
return monitorForElements({
canMonitor: function canMonitor(_ref2) {
var source = _ref2.source;
var _ref3 = source.data,
type = _ref3.type,
indexes = _ref3.indexes,
localId = _ref3.localId;
return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
},
onDragStart: function onDragStart() {
setIsDragging(true);
},
onDrop: function onDrop() {
setIsDragging(false);
}
});
}, [currentNodeLocalId, editorView]);
if (!isDragging) {
return null;
}
var colWidths = getColumnsWidths(editorView);
return /*#__PURE__*/React.createElement("div", {
style: {
width: getTableWrapperWidth(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
overflow: 'hidden',
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
position: 'absolute',
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
top: "-".concat(dropTargetExtendedWidth - tableMarginTop, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
pointerEvents: 'auto',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
zIndex: "".concat(dropTargetsZIndex)
},
"data-testid": "table-floating-column-extended-drop-targets"
}, /*#__PURE__*/React.createElement("div", {
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
display: 'flex',
// move drop targets based on table wrapper scroll
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
marginLeft: "-".concat(getScrollOffset(), "px")
}
}, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {
return /*#__PURE__*/React.createElement(ColumnDropTarget
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
, {
key: index,
index: index,
localId: currentNodeLocalId,
width: width,
height: dropTargetExtendedWidth,
marginTop: 0
});
})));
};