@6thquake/react-material/esm/DragAndDrop/DragSourceList.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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 _reactDom = require("react-dom");

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

var _flow = _interopRequireDefault(require("lodash/flow"));

/**
 * @ignore - do not document.
 */
var style = {
  cursor: 'move'
};
var listSource = {
  beginDrag: function beginDrag(props, monitor, component) {
    // 拖拽开始把水波层置为不显示
    // console.log(component.refs["listItemDrag"].childNodes[0].childNodes[1].className)
    if (component.refs.listItemDrag.childNodes[0].childNodes[2] && component.refs.listItemDrag.childNodes[0].childNodes[2].className === 'MuiTouchRipple-root-61') {
      component.refs.listItemDrag.childNodes[0].childNodes[2].style.display = 'none';
    } else if (component.refs.listItemDrag.childNodes[0].firstChild.childNodes[2] && component.refs.listItemDrag.childNodes[0].firstChild.childNodes[2].className === 'MuiTouchRipple-root-61') {
      component.refs.listItemDrag.childNodes[0].firstChild.childNodes[2].style.display = 'none';
    } else if (component.refs.listItemDrag.childNodes[0].childNodes[1] && component.refs.listItemDrag.childNodes[0].childNodes[1].className === 'MuiTouchRipple-root-61') {
      component.refs.listItemDrag.childNodes[0].childNodes[1].style.display = 'none';
    } else {
      null;
    } // component.refs["listItemDrag"].childNodes[0].childNodes[2].style.display='none';
    // component.refs["listItemDrag"].childNodes[0].firstChild.childNodes[2].style.display='none';


    return {
      id: props.key,
      index: props.index
    };
  }
};
var listTarget = {
  hover: function hover(props, monitor, component) {
    if (!component) {
      return null;
    }

    var dragIndex = monitor.getItem().index;
    var hoverIndex = props.index; // Don't replace items with themselves

    if (dragIndex === hoverIndex) {
      return;
    } // Determine rectangle on screen


    var hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect(); // Get vertical middle

    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; // Determine mouse position

    var clientOffset = monitor.getClientOffset(); // Get pixels to the top

    var hoverClientY = clientOffset.y - hoverBoundingRect.top; // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%
    // Dragging downwards

    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    } // Dragging upwards


    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    } // Time to actually perform the action


    props.moveList(dragIndex, hoverIndex); // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.

    monitor.getItem().index = hoverIndex;
  }
};

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

  function ListItemDrag() {
    (0, _classCallCheck2.default)(this, ListItemDrag);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ListItemDrag).apply(this, arguments));
  }

  (0, _createClass2.default)(ListItemDrag, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          key = _this$props.key,
          index = _this$props.index,
          moveList = _this$props.moveList,
          isDragging = _this$props.isDragging,
          connectDragSource = _this$props.connectDragSource,
          connectDropTarget = _this$props.connectDropTarget;
      var opacity = isDragging ? 0 : 1;
      return connectDragSource(connectDropTarget(_react.default.createElement("div", null, _react.default.createElement("div", {
        index: index,
        moveList: moveList,
        style: (0, _extends2.default)({}, style, {
          opacity: opacity
        }),
        ref: "listItemDrag"
      }, this.props.children))));
    }
  }]);
  return ListItemDrag;
}(_react.Component);

var _default = (0, _flow.default)((0, _reactDnd.DragSource)('ListItemDrag', listSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}), (0, _reactDnd.DropTarget)('ListItemDrag', listTarget, function (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
}))(ListItemDrag);

exports.default = _default;