@6thquake/react-material/es/Table/CrossTabulation/CrossTabulationDropZone.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";

/**
 * @ignore - do not document.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
import CrossTabulationColumn from './CrossTabulationColumn';
import { getSort } from './CrossTabulationUtilities';
const ItemTypes = {
  FILTER: 'filterBox',
  COLUMN: 'column',
  CHIP: 'chip'
};
const columnTarget = {
  drop(props, monitor, component) {
    // 获取正在拖放的数据
    const item = monitor.getItem(); // 更新组件状态

    const items = component.state.items;
    items.push(item.name);
    component.setState({
      items
    });
    component.props.onDrop(items);
  }

};

function chipDropcollect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget()
  };
}
/**
 * @ignore - internal component.
 */


class DropZone extends React.Component {
  constructor(props) {
    super(props);

    this.dragOut = val => {
      return () => {
        const items = this.state.items;
        const index = items.indexOf(val);

        if (index > -1) {
          items.splice(index, 1);
          this.setState({
            items
          });
        }
      };
    };

    this.state = {
      items: props.items
    };
  }

  render() {
    const {
      connectDropTarget
    } = this.props;
    return connectDropTarget(React.createElement("div", {
      style: {
        display: 'inline-block',
        width: '100%',
        height: '100%'
      }
    }, this.state.items.map((value, index) => React.createElement(CrossTabulationColumn, _extends({
      name: value,
      key: value,
      attrValues: this.props.attrValuess[value],
      valueFilter: this.props.valueFilters[value] || {},
      zIndex: this.props.zIndices[value] || this.props.maxZIndex,
      sorter: getSort(this.props.sorters, value),
      dragOut: this.dragOut(value).bind(this)
    }, this.props)))));
  }

}

export default DropTarget(ItemTypes.CHIP, columnTarget, chipDropcollect)(DropZone);