joywok-material-components/components/select/multiple.js

<h1 align="center"> Joywok Material Components </h1>

// Select.js
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Checkbox from '@material-ui/core/Checkbox';
import CloseIcon from '@material-ui/icons/Close';
// import Chip from '../chips/index';
import CancelIcon from '@material-ui/icons/Cancel';
import Chip from '@material-ui/core/Chip';
require('./style/multiple.css');
const styles = {
  container: {
    display: 'flex'
  }
};
const MenuProps = {
  PaperProps: {
    style: {
      maxWidth: "500px",
      background: "#fff"
    },
  },
};

class Multiple extends React.Component {
  constructor(props) {
    super(props);
  }
  handleDelete(e, data) {
    let self = this;
    let list = [];
    if (self.props.disabled) {
      return
    }

    e.stopPropagation(); e.nativeEvent.stopImmediatePropagation();
    _.each(this.props.value, function (i) {
      if (i['key'] != data) {
        list.push(i)
      }
    });
    // this.props.onChange && this.props.onChange(list);
    this.props.onChange && this.props.onChange(list, data);
  }
  onChange(e, data) {
    let list = this.props.value;
    if (_.findWhere(list, { key: data.key })) {
      let newList = [];
      _.each(list, function (i) {
        if (i['key'] != data['key']) {
          newList.push(i)
        }
      })
      list = newList
    } else {
      list.push({
        key: data['props']['value'],
        value: data['props']['name']
      })
    }

    // this.props.onChange && this.props.onChange(list);
    this.props.onChange && this.props.onChange(list, data.props.value);
  }
  render() {
    let self = this;
    const { classes, options } = this.props;
    const selectClassName = classes.input + ' jw-custom-select-multiple ' + (this.props.className || '')
    // this.props.MenuProps=MenuProps;
    let value = _.map(self.props.value, function (i) {
      return i['key'] || i['id']
    })
    return (
      <div className={'jw-custom-select-w'}>
        <Select renderValue={(e) => {
          if (self.props.value.length != 0) {
            return <div className={classes.chips}>
              {self.props.value.map(item => {
                return <div className={'custom-select-check-i'}>
                  <span>{item['value']}</span>
                  <CancelIcon onClick={(e) => self.handleDelete(e, item.key)} />
                </div>
              })}
            </div>
          } else {
            return <span className="jw-custom-select-multiple-placeholder">{i18n('label.please-select')}</span>
          }
        }}
          {...this.props}
          className={selectClassName}
          MenuProps={MenuProps}
          onChange={(e, data) => self.onChange(e, data)} multiple={true} displayEmpty={true}  >
          {
            options.map(i => (
              <MenuItem disabled={i.disabled ? i.disabled : false} key={i.key} value={i.key} name={i['value']} className={"jw-custom-select-multiple-i"}>
                <Checkbox checked={value.indexOf(i['key']) > -1 ? true : false} />
                <div className={"ellipsis jw-custom-select-multiple-i-value"}>{i.value}</div>
              </MenuItem>
            ))
          }
        </Select>
      </div>
    );
  }
  componentDidMount() {
  }
}
export default withStyles(styles)(Multiple);