@6thquake/react-material/OrderDrag/OrderDragSource.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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

var _DragBase = require("../DragBase");

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

/**
 * @ignore - do not document.
 */
var styles = {
  inner: {
    display: 'inline-block',
    padding: '6px'
  }
};

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

  function OrderDragSource(props) {
    var _this;

    (0, _classCallCheck2.default)(this, OrderDragSource);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(OrderDragSource).call(this, props));

    _this.beginDrag = function (props, monitor, component) {
      console.log('start drag......', (0, _assertThisInitialized2.default)(_this));
      var item = {}; // 外部item，没有Index,拖入时把DragSource里面的东西拖入
      // console.log(component.decoratedComponentInstance.refs["text"]);
      // let _ripple = component.decoratedComponentInstance.refs.text.querySelectorAll('span[class^="MuiTouchRipple"]');
      // if(_ripple.length>0){
      //     _ripple.forEach((element, index, array)=>{
      // 	    element.style.display = 'none'
      //     })
      // }

      item.height = _this.refs.text.childNodes[0].offsetHeight;
      item.width = _this.refs.text.childNodes[0].offsetWidth;
      item.value = _this.props.value;
      console.log(_this.props.type);

      if (_this.props.type === 'OUTITEM') {
        item.component = _this.props.children;
      } else if (_this.props.type === 'INNERITEM') {
        item.sortFrom = _this.props.index || 0;
      }

      item.sourceType = 'DragIcon';
      return item;
    };

    _this.endDrag = function (props, monitor, component) {
      var item = monitor.getItem(); // 内部元素拖到外面，target要减掉一个元素

      console.log('delete it ', item); // console.log(item.sortFrom);
      // console.log(component.props.remove);

      if ((!!item.sortFrom || item.sortFrom === 0) && typeof _this.props.remove === 'function') {
        _this.props.remove(item.sortFrom); // item.component=component.props.children; //内部元素结束拖动之后给component,是为了实现拖出去可以拖到其它组件里面

      }

      console.log('end drag ......');
    };

    _this.hover = function (props, monitor, component) {
      // console.log('hoverprops',props);
      var gi = monitor.getItem();
      var from;

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

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

      var to = _this.props.index || 0;

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

        _this.props.sequence(parseInt(from), parseInt(to), function () {
          component.hasChanged = true;
          monitor.getItem().sortFrom = to;
        });
      }
    };

    _this.state = {
      accept: ['DragIcon']
    };
    return _this;
  }

  (0, _createClass2.default)(OrderDragSource, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.register(this);

      if (this.props.acceptItem) {
        this.props.accept([].concat((0, _toConsumableArray2.default)(this.props.acceptItem), (0, _toConsumableArray2.default)(this.state.accept))); // 传入可接受的拖动元素
      } else {
        this.props.accept((0, _toConsumableArray2.default)(this.state.accept));
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          classes = _this$props.classes;
      return _react.default.createElement("div", {
        className: classes.inner
      }, _react.default.createElement("div", {
        ref: 'text',
        className: classes.inner
      }, children));
    }
  }]);
  return OrderDragSource;
}(_DragBase.DandDWrapper);

var _default = (0, _withStyles.default)(styles)(OrderDragSource);

exports.default = _default;