@atlaskit/editor-plugin-table/dist/es2019/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 const ColumnDropTarget = ({
  index,
  localId,
  width,
  height,
  marginTop
}) => {
  const dropTargetRef = useRef(null);
  useEffect(() => {
    if (!dropTargetRef.current) {
      return;
    }
    return dropTargetForElements({
      element: dropTargetRef.current,
      canDrop({
        source,
        input
      }) {
        var _data$indexes, _data$indexes2;
        const data = source.data;
        const behaviour = getDragBehaviour(input);

        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
        const 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: ({
        input
      }) => getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
      getIsSticky: () => true,
      getData({
        source,
        input,
        element
      }) {
        var _srcData$indexes;
        const data = {
          localId,
          type: 'table-column',
          targetIndex: index
        };
        const srcData = source.data;
        const 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.
        const allowedEdges = behaviour === 'move' ? (_srcData$indexes = srcData.indexes) === null || _srcData$indexes === void 0 ? void 0 : _srcData$indexes.reduce((acc, v) => {
          if (v - index === -1) {
            acc.shift();
          }
          if (v - index === 1) {
            acc.pop();
          }
          return acc;
        }, ['left', 'right']) : ['left', 'right'];
        return attachClosestEdge(data, {
          input,
          element,
          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 && `${width - 1}px`,
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      height: height && `${height}px`,
      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
      marginTop: marginTop && `${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"
  });
};