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

Fiori styled UI components

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 Draggable =
/*#__PURE__*/
function (_Component) {
  _inherits(Draggable, _Component);

  function Draggable() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Draggable);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Draggable)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.handleDragStart = function (e) {
      var _this$props = _this.props,
          dragStart = _this$props.dragStart,
          droppableId = _this$props.droppableId,
          draggableId = _this$props.draggableId,
          index = _this$props.index;
      var dragTarget = e.currentTarget;
      var _e$nativeEvent = e.nativeEvent,
          moveX = _e$nativeEvent.clientX,
          moveY = _e$nativeEvent.clientY;

      var _dragTarget$getBoundi = dragTarget.getBoundingClientRect(),
          screenX = _dragTarget$getBoundi.x,
          screenY = _dragTarget$getBoundi.y;

      dragTarget.style.opacity = 0.5;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setDragImage(e.currentTarget, moveX - screenX, moveY - screenY);
      dragStart && dragStart(e, droppableId, draggableId, index);
    };

    _this.handleDragEnd = function (e) {
      var _this$props2 = _this.props,
          dragEnd = _this$props2.dragEnd,
          droppableId = _this$props2.droppableId,
          draggableId = _this$props2.draggableId,
          index = _this$props2.index;
      var dragTarget = e.currentTarget;
      dragTarget.style.opacity = 1;
      dragEnd && dragEnd(e, droppableId, draggableId, index);
    };

    return _this;
  }

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

      var children = this.props.children;
      return React.Children.map(children, function (child) {
        var _props = {
          draggable: true,
          onDragStart: _this2.handleDragStart,
          onDragEnd: _this2.handleDragEnd
        };
        return React.cloneElement(child, _props);
      });
    }
  }]);

  return Draggable;
}(Component);

Draggable.defaultProps = {
  draggableId: '-1'
};
export { Draggable as default };