@atlaskit/editor-plugin-table/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

Table plugin for the @atlaskit/editor

import React, { useEffect, useRef } from 'react';
import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDragBehaviour';
export var ColumnDropTarget = function ColumnDropTarget(_ref) {
  var index = _ref.index,
    localId = _ref.localId,
    width = _ref.width,
    height = _ref.height,
    marginTop = _ref.marginTop;
  var dropTargetRef = useRef(null);
  useEffect(function () {
    if (!dropTargetRef.current) {
      return;
    }
    return dropTargetForElements({
      element: dropTargetRef.current,
      canDrop: function canDrop(_ref2) {
        var _data$indexes, _data$indexes2;
        var source = _ref2.source,
          input = _ref2.input;
        var data = source.data;
        var behaviour = getDragBehaviour(input);

        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
        var isDropValid = behaviour === 'move' ? ((_data$indexes = data.indexes) === null || _data$indexes === void 0 ? void 0 : _data$indexes.indexOf(index)) === -1 : behaviour === 'clone';
        return (
          // Only draggables of row type can be dropped on this target
          data.type === 'table-column' &&
          // Only draggables which came from the same table can be dropped on this target
          data.localId === localId &&
          // Only draggables which DO NOT include this drop targets index can be dropped
          !!((_data$indexes2 = data.indexes) !== null && _data$indexes2 !== void 0 && _data$indexes2.length) && isDropValid
        );
      },
      getDropEffect: function getDropEffect(_ref3) {
        var input = _ref3.input;
        return getDragBehaviour(input) === 'clone' ? 'copy' : 'move';
      },
      getIsSticky: function getIsSticky() {
        return true;
      },
      getData: function getData(_ref4) {
        var _srcData$indexes;
        var source = _ref4.source,
          input = _ref4.input,
          element = _ref4.element;
        var data = {
          localId: localId,
          type: 'table-column',
          targetIndex: index
        };
        var srcData = source.data;
        var behaviour = getDragBehaviour(input);

        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
        var allowedEdges = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _srcData$indexes.reduce(function (acc, v) {
          if (v - index === -1) {
            acc.shift();
          }
          if (v - index === 1) {
            acc.pop();
          }
          return acc;
        }, ['left', 'right']) : ['left', 'right'];
        return attachClosestEdge(data, {
          input: input,
          element: element,
          allowedEdges: allowedEdges
        });
      }
    });
  }, [index, localId]);
  return /*#__PURE__*/React.createElement("div", {
    ref: dropTargetRef,
    style: {
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      width: width && "".concat(width - 1, "px"),
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      height: height && "".concat(height, "px"),
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      marginTop: marginTop && "".concat(marginTop, "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/enforce-style-prop -- Ignored via go/DSP-18766
      flexShrink: 0
    },
    "data-drop-target-index": index,
    "data-drop-target-localid": localId,
    "data-testid": "table-floating-column-controls-drop-target"
  });
};