@6thquake/react-material/OrderDrag/OrderDropTarget.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

var _GridList = _interopRequireDefault(require("../GridList"));

var _GridListTile = _interopRequireDefault(require("../GridListTile"));

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

var _OrderDragSource = _interopRequireDefault(require("./OrderDragSource"));

/**
 * @ignore - do not document.
 */
// import ManualDragTarget from './ManualDragTarget';
var styles = {
  root: {
    minheight: '100px'
  }
};

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

  function OrderDropTarget(_props) {
    var _this;

    (0, _classCallCheck2.default)(this, OrderDropTarget);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(OrderDropTarget).call(this, _props));

    _this.drop = function (props, monitor, component) {
      console.log('droptarget...'); // debugger;

      var item = monitor.getItem();
      console.log(item);

      if (!item.component) {
        // 内部元素被拖动
        _this.hasDroped = true;
        return;
      }

      if (item.component) {
        var componentWidth = item.width;
        var componentHeight = item.height;

        _this.state.childComponents.push({
          component: item.component,
          size: [Math.ceil(componentWidth / props.cellSize), Math.ceil(componentWidth / props.cellSize)]
        });

        _this.setState({
          childComponent: component.state.childComponents
        });

        if (props.add && item.value) {
          props.add(item.value);
        }
      } // debugger;

    };

    _this.sequenceComponent = function (from, to, callback) {
      // from 是指原数组的第from个位置 to 是指原数组的第to个位置
      var _cc = _this.state.childComponents;

      if (!_cc) {
        return;
      }

      var mycom = _cc.splice(from, 1);

      _cc.splice(to, 0, mycom[0]); // this.state();


      _this.setState({
        childComponents: _cc
      });

      if (!!callback && typeof callback === 'function') {
        callback();
      }

      if (_this.props.sequence) {
        _this.props.sequence(from, to);
      }
    };

    _this.removeComponent = function (index) {
      if (!index && index != 0) {
        return;
      }

      if (_this.hasDroped) {// 说明drop在了panel内部 不作处理
      } else {
        // 说明drop在了panle外部 需要删除指定index
        console.log("remove".concat(index));
        var _cc = _this.state.childComponents;

        if (!_cc) {
          return;
        }

        _cc.splice(index, 1);

        _this.setState({
          childComponents: _cc
        });
      }

      _this.hasDroped = false;

      if (_this.props.remove) {
        _this.props.remove(index);
      }
    };

    _this.state = {
      childComponents: _props.defaultComponents.map(function (v, i) {
        return {
          component: v,
          size: [v.props.cols, v.props.rows]
        };
      }),
      accept: ['DragIcon'] // 默认的可以接受的拖动元素

    };
    return _this;
  }

  (0, _createClass2.default)(OrderDropTarget, [{
    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 _this2 = this;

      var childComponents = this.state.childComponents;
      var _this$props = this.props,
          cellSize = _this$props.cellSize,
          colsCount = _this$props.colsCount,
          classes = _this$props.classes;

      var _childComponents = (childComponents || []).map(function (value, index) {
        if (value && value.size instanceof Array && value.size.length === 2) {
          return _react.default.createElement(_GridListTile.default, {
            key: index,
            cols: value.size[0],
            rows: value.size[1]
          }, _react.default.createElement(_DragBase.DandD, null, _react.default.createElement(_OrderDragSource.default, {
            type: "INNERITEM",
            sequence: _this2.sequenceComponent,
            remove: _this2.removeComponent,
            index: index
          }, value.component)));
        }

        return null;
      });

      return _react.default.createElement(_GridList.default, {
        spacing: 0,
        cellHeight: cellSize,
        cols: colsCount,
        className: classes.root
      }, _childComponents);
    }
  }]);
  return OrderDropTarget;
}(_DragBase.TargetWrapper);

OrderDropTarget.defaultProps = {
  cellSize: 30,
  colsCount: 6,
  defaultComponents: []
};
OrderDropTarget.propTypes = {
  /*
   *
   */
  add: _propTypes.default.func,

  /*
   *
   */
  cellSize: _propTypes.default.number,

  /*
   *
   */
  colsCount: _propTypes.default.number,

  /*
   *
   */
  defaultComponents: _propTypes.default.array,

  /*
   *
   */
  remove: _propTypes.default.func,

  /*
   *
   */
  sequence: _propTypes.default.func,

  /*
   *
   */
  value: _propTypes.default.array
}; // let OrderDragTarget=DropTarget(['ICON','BUTTON','PAPER','LISTITEM'],boxTarget,(connect,monitor)=>{
//     return {
//         connectDropTarget:connect.dropTarget(),
//         isOver:monitor.isOver({shallow:true}),
//         canDrop:monitor.canDrop(),
//         itemType:monitor.getItemType()
//     }
// })(_OrderDragTarget);
// OrderDragTarget.propTypes={
// }

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

exports.default = _default;