@6thquake/react-material/es/TransferDnD/DragListItem.js

React components that implement Google's Material Design.

/**
 * @ignore - do not document.
 */
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
import ListItem from '../ListItem';
import ListItemText from '../ListItemText';
import { DragSource } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Checkbox from '../Checkbox';
const boxSource = {
  beginDrag(props, monitor, component) {
    // 拖拽开始把水波层置为不显示
    component.refs.listItem.childNodes[0].childNodes[2].style.display = 'none';
    const {
      direction,
      value
    } = props;
    return {
      direction,
      value
    };
  }

};

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

    this.handleToggle = () => {};

    this.state = {};
  }

  render() {
    const {
      connectDragSource,
      value,
      isChecked,
      toggleChecked,
      direction
    } = this.props;
    return connectDragSource(React.createElement("div", null, React.createElement("div", {
      ref: "listItem"
    }, React.createElement(ListItem, {
      key: value.id,
      role: undefined,
      dense: true,
      button: true,
      onClick: () => {
        toggleChecked(value, direction);
      }
    }, React.createElement(Checkbox, {
      checked: isChecked,
      tabIndex: -1,
      disableRipple: true
    }), React.createElement(ListItemText, {
      primary: `${value.name}`
    })))));
  }

}

const DragListItem = DragSource('just-transfer', boxSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))(DLI);
export { DragListItem, ListItemText };