@6thquake/react-material/es/TransferDnD/Transfer.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 DropList from './DropList';
import MyDropList from './MyDropList';
import { DragListItem as ListItem, ListItemText } from './DragListItem';
import Checkbox from '../Checkbox';
import Button from '../Button';
import IconButton from '../IconButton';
import { ChevronRight, ChevronLeft, LastPage, FirstPage } from '@material-ui/icons';
import { DropTarget, DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
const styles = {
  root: {
    minWidth: '700px',
    height: '100%',
    minHeight: '300px',
    width: '100%',
    position: 'relative'
  },
  lists: {
    height: '100%',
    maxHeight: '400px',
    overflow: 'scroll',
    display: 'inline-block',
    border: '1px solid rgba(0,0,0,0.1)',
    width: '45%',
    minWidth: '300px',
    maxWidth: '300px',
    position: 'absolute'
  },
  leftLists: {},
  rightLists: {
    right: '0',
    top: '0'
  },
  btngrp: {
    position: 'absolute',
    width: '100%',
    textAlign: 'center',
    top: '50%',
    transform: 'translateY(-50%)'
  }
};

var _ref = React.createElement(LastPage, null);

var _ref2 = React.createElement("br", null);

var _ref3 = React.createElement(ChevronRight, null);

var _ref4 = React.createElement("br", null);

var _ref5 = React.createElement(ChevronLeft, null);

var _ref6 = React.createElement("br", null);

var _ref7 = React.createElement(FirstPage, null);

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

    this.subSet = (arr1, arr2) => {
      const set1 = new Set(arr1);
      const set2 = new Set(arr2);
      const subset = [];

      for (const item of set1) {
        if (!set2.has(item)) {
          subset.push(item);
        }
      }

      return subset;
    };

    this.dragToggle = (value, position) => () => {
      const _checked = [];

      _checked.push(value);

      this.transferData(_checked, position);
    };

    this.transferToggle = position => () => {
      const {
        leftChecked,
        rightChecked
      } = this.state;

      const _checked = position === 'left' ? leftChecked : position === 'right' ? rightChecked : '';

      this.transferData(_checked, position);
    };

    this.transferAllToggle = position => () => {
      const {
        left,
        right
      } = this.props;

      const _checked = position === 'left' ? left : position === 'right' ? right : '';

      this.transferData(_checked, position);
    };

    this.transferData = (_checked, position) => {
      const _otherPos = position === 'left' ? 'right' : 'left';

      const aaa = this.subSet(this.props[position], _checked);
      const newData = {};
      newData[position] = aaa;
      newData[_otherPos] = [].concat(this.props[_otherPos], _checked);
      this.setState({
        leftChecked: [],
        rightChecked: []
      });
      this.props.onChange(newData);
    };

    this.handleToggle = (value, position) => {
      const {
        leftChecked,
        rightChecked
      } = this.state;

      const _checked = position === 'left' ? leftChecked : position === 'right' ? rightChecked : '';

      const currentIndex = _checked.indexOf(value);

      const newChecked = [..._checked];

      if (currentIndex === -1) {
        newChecked.push(value);
      } else {
        newChecked.splice(currentIndex, 1);
      }

      if (position === 'left') {
        this.setState({
          leftChecked: newChecked
        });
      }

      if (position === 'right') {
        this.setState({
          rightChecked: newChecked
        });
      }
    };

    this.state = {
      leftChecked: [],
      rightChecked: []
    };
  } // 数组去重


  render() {
    const {
      left,
      right,
      classes
    } = this.props;
    return React.createElement("div", {
      className: classes.root
    }, React.createElement("div", {
      className: classes.btngrp
    }, React.createElement(Button, {
      color: "primary",
      onClick: this.transferAllToggle('left')
    }, _ref), _ref2, React.createElement(Button, {
      color: "primary",
      onClick: this.transferToggle('left')
    }, _ref3), _ref4, React.createElement(Button, {
      color: "primary",
      onClick: this.transferToggle('right')
    }, _ref5), _ref6, React.createElement(Button, {
      color: "primary",
      onClick: this.transferAllToggle('right')
    }, _ref7)), React.createElement("div", {
      className: `${classes.lists} ${classes.leftLists}`
    }, React.createElement(MyDropList, {
      data: left,
      direction: "left",
      checkedItem: this.state.leftChecked,
      toggleChecked: this.handleToggle,
      dragToggle: this.dragToggle
    })), React.createElement("div", {
      className: `${classes.lists} ${classes.rightLists}`
    }, React.createElement(MyDropList, {
      data: right,
      direction: "right",
      checkedItem: this.state.rightChecked,
      toggleChecked: this.handleToggle,
      dragToggle: this.dragToggle
    })));
  }

}

const C = DragDropContext(HTML5Backend)(Transfer);
export default withStyles(styles, {
  name: 'RMTransferDnD'
})(C);