@6thquake/react-material/DragAndDrop/DragSource.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _icons = require("@material-ui/icons");

var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));

var _reactDnd = require("react-dnd");

/**
 * @ignore - do not document.
 */

/* type:
position 对于panel中已存在的source 拖拽时会重新定位它的位置 当拖出panel以外时会删除
dragin 从panel外部拖入，源source不变，复制一份
style
*/
var styles = {
  position: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%'
  },
  dragin: {
    display: 'inline-block',
    padding: '6px'
  },
  isOvered: {
    opacity: '0.1'
  }
};
var _source = {
  beginDrag: function beginDrag(props, monitor, component) {
    console.log('start drag.......'); // Return the data describing the dragged item

    /*
    开始drag时，
    如果type==dragin 就会生成新的position source传给dropTarget
    如果type === position 就需要传回当前xy定位；
    */
    // 每次begin时 如果有span的class中有MuiTouchRipple 则display none

    var _ripple = component.decoratedComponentInstance.refs.mytttest.querySelectorAll('span[class^="MuiTouchRipple"]');

    if (_ripple.length > 0) {
      _ripple.forEach(function (element, index, array) {
        element.style.display = 'none';
      });
    }

    var item = {};

    if (props.type === 'POSITION') {
      // 拿到当前node的index
      var _from = props.index || 0;

      item.sortFrom = _from;
    } else if (props.type === 'DRAGIN') {
      item.component = component.props.children;
    }

    return item;
  },
  endDrag: function endDrag(props, monitor, component) {
    var item = monitor.getItem();

    if ((!!item.sortFrom || item.sortFrom === 0) && typeof props.remove === 'function') {
      props.remove(item.sortFrom);
    }

    console.log('end drag.......');
  }
};
var _target = {
  hover: function hover(props, monitor, component) {
    // 当hover的时候改变原数组的排列顺序
    //
    var justComeIn = true;
    var gi = monitor.getItem();
    var from;

    if (gi) {
      from = gi.sortFrom;
    }

    if (!from && from != 0) {
      return;
    }

    var to = props.index || 0;

    if (from != to && typeof props.sequence === 'function') {
      console.log("################# from ".concat(from, " to ").concat(to, " #################")); // const hovered = component.refs.dndwrap.parentElement.getBoundingClientRect();

      props.sequence(parseInt(from), parseInt(to), function () {
        component.hasChanged = true;
        monitor.getItem().sortFrom = to;
      });
    } // console.log('!!!!!!!!!!')

  }
};

function _dragCollect(connect, monitor) {
  return {
    // Call this function inside render()
    // to let React DnD handle the drag events:
    connectDragSource: connect.dragSource(),
    // You can ask the monitor about the current drag state:
    isDragging: monitor.isDragging()
  };
}

function _dropCollect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver({
      shallow: true
    }),
    // isOverCurrent: monitor.isOver({ shallow: false }),
    canDrop: monitor.canDrop(),
    itemType: monitor.getItemType()
  };
}

var _DragSouce =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(_DragSouce, _Component);

  function _DragSouce(props) {
    (0, _classCallCheck2.default)(this, _DragSouce);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(_DragSouce).call(this, props));
  }

  (0, _createClass2.default)(_DragSouce, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          connectDragSource = _this$props.connectDragSource,
          connectDropTarget = _this$props.connectDropTarget,
          children = _this$props.children,
          isDragging = _this$props.isDragging,
          type = _this$props.type,
          classes = _this$props.classes,
          isOver = _this$props.isOver;
      var _style = {};

      if (type === 'POSITION' && !!isDragging) {// return null;
      }

      return connectDropTarget(connectDragSource(_react.default.createElement("div", {
        className: "".concat(type === 'POSITION' ? classes.position : classes.dragin, " ").concat(isOver ? classes.isOvered : '')
      }, _react.default.createElement("div", {
        ref: 'dndwrap'
      }, _react.default.createElement("div", {
        ref: 'mytttest'
      }, children)))));
    }
  }]);
  return _DragSouce;
}(_react.Component);

var _mc = (0, _reactDnd.DropTarget)('DRAGANDDROP', _target, _dropCollect)(_DragSouce);

var DragSouce = (0, _reactDnd.DragSource)('DRAGANDDROP', _source, _dragCollect)(_mc);

var _default = (0, _withStyles.default)(styles, {
  name: 'RMDragSouce'
})(DragSouce);

exports.default = _default;