react-beautiful-dnd/lib/state/move-cross-axis/get-best-cross-axis-droppable.js

Beautiful, accessible drag and drop for lists with React.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _position = require('../position');

var _isWithin = require('../is-within');

var _isWithin2 = _interopRequireDefault(_isWithin);

var _spacing = require('../spacing');

var _getViewport = require('../visibility/get-viewport');

var _getViewport2 = _interopRequireDefault(_getViewport);

var _isVisibleThroughFrame = require('../visibility/is-visible-through-frame');

var _isVisibleThroughFrame2 = _interopRequireDefault(_isVisibleThroughFrame);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var getSafeClipped = function getSafeClipped(droppable) {
  var area = droppable.viewport.clipped;

  if (!area) {
    throw new Error('cannot get clipped area from droppable');
  }
  return area;
};

exports.default = function (_ref) {
  var isMovingForward = _ref.isMovingForward,
      pageCenter = _ref.pageCenter,
      source = _ref.source,
      droppables = _ref.droppables;

  var sourceClipped = source.viewport.clipped;

  if (!sourceClipped) {
    return null;
  }

  var axis = source.axis;
  var isBetweenSourceClipped = (0, _isWithin2.default)(sourceClipped[axis.start], sourceClipped[axis.end]);
  var viewport = (0, _getViewport2.default)();

  var candidates = (0, _keys2.default)(droppables).map(function (id) {
    return droppables[id];
  }).filter(function (droppable) {
    return droppable !== source;
  }).filter(function (droppable) {
    return droppable.isEnabled;
  }).filter(function (droppable) {
    return Boolean(droppable.viewport.clipped);
  }).filter(function (droppable) {
    return (0, _isVisibleThroughFrame2.default)(viewport)(droppable.viewport.frame);
  }).filter(function (droppable) {
    var targetClipped = getSafeClipped(droppable);

    if (isMovingForward) {
      return sourceClipped[axis.crossAxisEnd] <= targetClipped[axis.crossAxisStart];
    }

    return targetClipped[axis.crossAxisEnd] <= sourceClipped[axis.crossAxisStart];
  }).filter(function (droppable) {
    var targetClipped = getSafeClipped(droppable);

    var isBetweenDestinationClipped = (0, _isWithin2.default)(targetClipped[axis.start], targetClipped[axis.end]);

    return isBetweenSourceClipped(targetClipped[axis.start]) || isBetweenSourceClipped(targetClipped[axis.end]) || isBetweenDestinationClipped(sourceClipped[axis.start]) || isBetweenDestinationClipped(sourceClipped[axis.end]);
  }).sort(function (a, b) {
    var first = getSafeClipped(a)[axis.crossAxisStart];
    var second = getSafeClipped(b)[axis.crossAxisStart];

    if (isMovingForward) {
      return first - second;
    }
    return second - first;
  }).filter(function (droppable, index, array) {
    return getSafeClipped(droppable)[axis.crossAxisStart] === getSafeClipped(array[0])[axis.crossAxisStart];
  });

  if (!candidates.length) {
    return null;
  }

  if (candidates.length === 1) {
    return candidates[0];
  }

  var contains = candidates.filter(function (droppable) {
    var isWithinDroppable = (0, _isWithin2.default)(getSafeClipped(droppable)[axis.start], getSafeClipped(droppable)[axis.end]);
    return isWithinDroppable(pageCenter[axis.line]);
  });

  if (contains.length === 1) {
    return contains[0];
  }

  if (contains.length > 1) {
    return contains.sort(function (a, b) {
      return getSafeClipped(a)[axis.start] - getSafeClipped(b)[axis.start];
    })[0];
  }

  return candidates.sort(function (a, b) {
    var first = (0, _position.closest)(pageCenter, (0, _spacing.getCorners)(getSafeClipped(a)));
    var second = (0, _position.closest)(pageCenter, (0, _spacing.getCorners)(getSafeClipped(b)));

    if (first !== second) {
      return first - second;
    }

    return getSafeClipped(a)[axis.start] - getSafeClipped(b)[axis.start];
  })[0];
};