@atlaskit/editor-plugin-table/dist/es2019/nodeviews/ExternalDropTargets.js

Table plugin for the @atlaskit/editor

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 const ExternalDropTargets = ({
  editorView,
  node,
  getScrollOffset,
  getTableWrapperWidth
}) => {
  const [isDragging, setIsDragging] = useState(false);
  const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
  useEffect(() => {
    return monitorForElements({
      canMonitor({
        source
      }) {
        const {
          type,
          indexes,
          localId
        } = source.data;
        return type === 'table-column' && !!(indexes !== null && indexes !== void 0 && indexes.length) && localId === currentNodeLocalId;
      },
      onDragStart() {
        setIsDragging(true);
      },
      onDrop() {
        setIsDragging(false);
      }
    });
  }, [currentNodeLocalId, editorView]);
  if (!isDragging) {
    return null;
  }
  const 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: `-${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: `${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: `-${getScrollOffset()}px`
    }
  }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((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
    });
  })));
};