react-beautiful-dnd/lib/state/action-creators.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.lift = exports.dropAnimationFinished = exports.cancel = exports.drop = exports.completeDrop = exports.clean = exports.crossAxisMoveBackward = exports.crossAxisMoveForward = exports.moveForward = exports.moveBackward = exports.moveByWindowScroll = exports.move = exports.updateDroppableDimensionIsEnabled = exports.updateDroppableDimensionScroll = exports.publishDroppableDimension = exports.publishDraggableDimension = exports.requestDimensions = undefined;

var _noImpact = require('./no-impact');

var _noImpact2 = _interopRequireDefault(_noImpact);

var _getNewHomeClientCenter = require('./get-new-home-client-center');

var _getNewHomeClientCenter2 = _interopRequireDefault(_getNewHomeClientCenter);

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

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

var origin = { x: 0, y: 0 };

var getScrollDiff = function getScrollDiff(_ref) {
  var initial = _ref.initial,
      current = _ref.current,
      droppable = _ref.droppable;

  var windowScrollDiff = (0, _position.subtract)(initial.windowScroll, current.windowScroll);

  var droppableScrollDiff = droppable ? (0, _position.subtract)(droppable.container.scroll.initial, droppable.container.scroll.current) : origin;

  return (0, _position.add)(windowScrollDiff, droppableScrollDiff);
};

var requestDimensions = exports.requestDimensions = function requestDimensions(type) {
  return {
    type: 'REQUEST_DIMENSIONS',
    payload: type
  };
};

var beginLift = function beginLift() {
  return {
    type: 'BEGIN_LIFT'
  };
};

var completeLift = function completeLift(id, type, client, windowScroll, isScrollAllowed) {
  return {
    type: 'COMPLETE_LIFT',
    payload: {
      id: id,
      type: type,
      client: client,
      windowScroll: windowScroll,
      isScrollAllowed: isScrollAllowed
    }
  };
};

var publishDraggableDimension = exports.publishDraggableDimension = function publishDraggableDimension(dimension) {
  return {
    type: 'PUBLISH_DRAGGABLE_DIMENSION',
    payload: dimension
  };
};

var publishDroppableDimension = exports.publishDroppableDimension = function publishDroppableDimension(dimension) {
  return {
    type: 'PUBLISH_DROPPABLE_DIMENSION',
    payload: dimension
  };
};

var updateDroppableDimensionScroll = exports.updateDroppableDimensionScroll = function updateDroppableDimensionScroll(id, offset) {
  return {
    type: 'UPDATE_DROPPABLE_DIMENSION_SCROLL',
    payload: {
      id: id,
      offset: offset
    }
  };
};

var updateDroppableDimensionIsEnabled = exports.updateDroppableDimensionIsEnabled = function updateDroppableDimensionIsEnabled(id, isEnabled) {
  return {
    type: 'UPDATE_DROPPABLE_DIMENSION_IS_ENABLED',
    payload: {
      id: id,
      isEnabled: isEnabled
    }
  };
};

var move = exports.move = function move(id, client, windowScroll) {
  return {
    type: 'MOVE',
    payload: {
      id: id,
      client: client,
      windowScroll: windowScroll
    }
  };
};

var moveByWindowScroll = exports.moveByWindowScroll = function moveByWindowScroll(id, windowScroll) {
  return {
    type: 'MOVE_BY_WINDOW_SCROLL',
    payload: {
      id: id,
      windowScroll: windowScroll
    }
  };
};

var moveBackward = exports.moveBackward = function moveBackward(id) {
  return {
    type: 'MOVE_BACKWARD',
    payload: id
  };
};

var moveForward = exports.moveForward = function moveForward(id) {
  return {
    type: 'MOVE_FORWARD',
    payload: id
  };
};

var crossAxisMoveForward = exports.crossAxisMoveForward = function crossAxisMoveForward(id) {
  return {
    type: 'CROSS_AXIS_MOVE_FORWARD',
    payload: id
  };
};

var crossAxisMoveBackward = exports.crossAxisMoveBackward = function crossAxisMoveBackward(id) {
  return {
    type: 'CROSS_AXIS_MOVE_BACKWARD',
    payload: id
  };
};

var clean = exports.clean = function clean() {
  return {
    type: 'CLEAN',
    payload: null
  };
};

var animateDrop = function animateDrop(_ref2) {
  var trigger = _ref2.trigger,
      newHomeOffset = _ref2.newHomeOffset,
      impact = _ref2.impact,
      result = _ref2.result;
  return {
    type: 'DROP_ANIMATE',
    payload: {
      trigger: trigger,
      newHomeOffset: newHomeOffset,
      impact: impact,
      result: result
    }
  };
};

var completeDrop = exports.completeDrop = function completeDrop(result) {
  return {
    type: 'DROP_COMPLETE',
    payload: result
  };
};

var drop = exports.drop = function drop() {
  return function (dispatch, getState) {
    var state = getState();

    if (state.phase === 'COLLECTING_DIMENSIONS') {
      console.error('canceling drag while collecting');
      dispatch(clean());
      return;
    }

    if (state.phase !== 'DRAGGING') {
      console.error('cannot drop if not dragging', state);

      setTimeout(function () {
        return dispatch(clean());
      });
      return;
    }

    if (!state.drag) {
      console.error('invalid drag state', state);
      dispatch(clean());
      return;
    }

    var _state$drag = state.drag,
        impact = _state$drag.impact,
        initial = _state$drag.initial,
        current = _state$drag.current;

    var draggable = state.dimension.draggable[current.id];
    var home = state.dimension.droppable[draggable.droppableId];
    var destination = impact.destination ? state.dimension.droppable[impact.destination.droppableId] : null;

    var result = {
      draggableId: current.id,
      type: current.type,
      source: initial.source,
      destination: impact.destination
    };

    var newCenter = (0, _getNewHomeClientCenter2.default)({
      movement: impact.movement,
      draggable: draggable,
      draggables: state.dimension.draggable,
      destination: destination
    });

    var clientOffset = (0, _position.subtract)(newCenter, draggable.client.withMargin.center);
    var scrollDiff = getScrollDiff({
      initial: initial,
      current: current,
      droppable: destination || home
    });
    var newHomeOffset = (0, _position.add)(clientOffset, scrollDiff);

    var isAnimationRequired = !(0, _position.isEqual)(current.client.offset, newHomeOffset);

    if (!isAnimationRequired) {
      dispatch(completeDrop(result));
      return;
    }

    dispatch(animateDrop({
      trigger: 'DROP',
      newHomeOffset: newHomeOffset,
      impact: impact,
      result: result
    }));
  };
};

var cancel = exports.cancel = function cancel() {
  return function (dispatch, getState) {
    var state = getState();

    if (state.phase !== 'DRAGGING') {
      dispatch(clean());
      return;
    }

    if (!state.drag) {
      console.error('invalid drag state', state);
      dispatch(clean());
      return;
    }

    var _state$drag2 = state.drag,
        initial = _state$drag2.initial,
        current = _state$drag2.current;

    var droppable = state.dimension.droppable[initial.source.droppableId];

    var result = {
      draggableId: current.id,
      type: current.type,
      source: initial.source,

      destination: null
    };

    var isAnimationRequired = !(0, _position.isEqual)(current.client.offset, origin);

    if (!isAnimationRequired) {
      dispatch(completeDrop(result));
      return;
    }

    var scrollDiff = getScrollDiff({ initial: initial, current: current, droppable: droppable });

    dispatch(animateDrop({
      trigger: 'CANCEL',
      newHomeOffset: scrollDiff,
      impact: _noImpact2.default,
      result: result
    }));
  };
};

var dropAnimationFinished = exports.dropAnimationFinished = function dropAnimationFinished() {
  return function (dispatch, getState) {
    var state = getState();

    if (state.phase !== 'DROP_ANIMATING') {
      console.error('cannot end drop that is no longer animating', state);
      dispatch(clean());
      return;
    }

    if (!state.drop || !state.drop.pending) {
      console.error('cannot end drop that has no pending state', state);
      dispatch(clean());
      return;
    }

    dispatch(completeDrop(state.drop.pending.result));
  };
};

var lift = exports.lift = function lift(id, type, client, windowScroll, isScrollAllowed) {
  return function (dispatch, getState) {
    (function () {
      var state = getState();

      if (state.phase === 'DROP_ANIMATING') {
        if (!state.drop || !state.drop.pending) {
          console.error('cannot flush drop animation if there is no pending');
          dispatch(clean());
          return;
        }
        dispatch(completeDrop(state.drop.pending.result));
      }
    })();

    setTimeout(function () {
      var state = getState();

      if (state.phase !== 'IDLE' && state.phase !== 'DRAG_COMPLETE') {
        dispatch(clean());
      }

      dispatch(beginLift());
      dispatch(requestDimensions(type));

      setTimeout(function () {
        var newState = getState();

        if (newState.phase !== 'COLLECTING_DIMENSIONS') {
          return;
        }
        dispatch(completeLift(id, type, client, windowScroll, isScrollAllowed));
      });
    });
  };
};