ffr-components/es/drag-drop/DragDropContext.js

Fiori styled UI components

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
// Import React Framework
import React, { Component } from 'react';

var DragDropContext =
/*#__PURE__*/
function (_Component) {
  _inherits(DragDropContext, _Component);

  function DragDropContext(props) {
    var _this;

    _classCallCheck(this, DragDropContext);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(DragDropContext).call(this, props));

    _this.dragOver = function (e, droppableId) {
      if (_this.sourceId === droppableId) return;
      e.preventDefault();
      _this.destinationId = droppableId;

      _this.setState({
        dragInfo: _defineProperty({}, droppableId, true)
      });
    };

    _this.dragStart = function (e, droppableId) {
      _this.sourceId = droppableId;
    };

    _this.dragEnd = function (e, droppableId, draggableId, index) {
      var onDragEnd = _this.props.onDragEnd;

      _this.setState({
        dragInfo: {}
      });

      var destination = {
        droppableId: _this.destinationId,
        index: 0
      };
      var source = {
        droppableId: droppableId,
        index: index
      };
      onDragEnd && onDragEnd({
        e: e,
        source: source,
        destination: destination
      });
    };

    _this.state = {
      dragInfo: {}
    };
    _this.sourceId = null;
    _this.destinationId = null;
    return _this;
  }

  _createClass(DragDropContext, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var children = this.props.children;
      var dragInfo = this.state.dragInfo;
      return React.Children.map(children, function (child) {
        var id = child.props.droppableId;
        var dropClass = dragInfo[id] ? 'draggingOver' : null;
        var _props = {
          dropClass: dropClass,
          dragOver: _this2.dragOver,
          dragStart: _this2.dragStart,
          dragEnd: _this2.dragEnd
        };
        return React.cloneElement(child, _props);
      });
    }
  }]);

  return DragDropContext;
}(Component);

export { DragDropContext as default };