@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/dist/cjs/droppable/gap/index.js

An optional Pragmatic drag and drop package that enables rapid migration from react-beautiful-dnd to Pragmatic drag and drop

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.calculateGap = calculateGap;
exports.getGapOffset = getGapOffset;
var _rbdInvariant = require("../../drag-drop-context/rbd-invariant");
var _attributes = require("../../utils/attributes");
var _getElementByDraggableLocation = require("../../utils/get-element-by-draggable-location");
var _getDistance = require("./get-distance");
// eslint-disable-next-line import/no-extraneous-dependencies

function getDroppableId(element) {
  return (0, _attributes.getAttribute)(element, _attributes.customAttributes.draggable.droppableId);
}
function getIndex(element) {
  var value = (0, _attributes.getAttribute)(element, _attributes.customAttributes.draggable.index);
  var index = parseInt(value);
  (0, _rbdInvariant.rbdInvariant)(Number.isInteger(index), "invalid index: '".concat(index, "' is not an integer"));
  return index;
}

/**
 * ASSUMPTIONS:
 * - Adjacent `<Draggable>` items are visually adjacent.
 * - If there is an adjacent element, it is rendered.
 */
function calculateGap(_ref) {
  var element = _ref.element,
    where = _ref.where,
    direction = _ref.direction,
    contextId = _ref.contextId;
  var droppableId = getDroppableId(element);
  var index = getIndex(element);
  var indexBefore = index - 1;
  var indexAfter = index + 1;
  var isBefore = where === 'before';
  var adjacentElement = (0, _getElementByDraggableLocation.getElementByDraggableLocation)(contextId, {
    droppableId: droppableId,
    index: isBefore ? indexBefore : indexAfter
  });
  if (adjacentElement === null) {
    /**
     * If there is no adjacent element, we can guess based on margins.
     */
    var _getComputedStyle = getComputedStyle(element),
      marginTop = _getComputedStyle.marginTop,
      marginRight = _getComputedStyle.marginRight,
      marginBottom = _getComputedStyle.marginBottom,
      marginLeft = _getComputedStyle.marginLeft;
    if (direction === 'horizontal') {
      return parseFloat(marginLeft) + parseFloat(marginRight);
    }
    return parseFloat(marginTop) + parseFloat(marginBottom);
  }
  var distance = (0, _getDistance.getDistance)({
    direction: direction,
    a: element.getBoundingClientRect(),
    b: adjacentElement.getBoundingClientRect()
  });
  return distance;
}
function getGapOffset(_ref2) {
  var element = _ref2.element,
    where = _ref2.where,
    direction = _ref2.direction,
    contextId = _ref2.contextId;
  var gap = calculateGap({
    element: element,
    where: where,
    direction: direction,
    contextId: contextId
  });
  if (where === 'before') {
    return -gap / 2;
  }
  return gap / 2;
}