joywok-material-components/components/menu/customMenu.js

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

/**
 * 使用场景： 更多操作
 */

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';

require('./style/customMenu.css');

const styles = {
  container: {
    display: 'flex'
  }
};

class CustomMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  openMenu(event){
    let self = this;
    self.setState({
      menuOpen: true,
      anchorEl: event.currentTarget
    })
  }
  menuHandleClose(e,event){
    let self = this;
    if(e == null){
    }else{
      self.setState({
        menuOpen: false,
      })
      self.props.onChange && self.props.onChange(e,event)
    }
  }
  handleClose(){
    let self = this;
    this.setState({
      menuOpen: false,
    })
  }
  render() {
    let self = this;
    const { classes } = this.props;
    const { anchorEl } = this.state;
    // this.props.className = ' jw-custom-menu ' + (this.props.className || '')
    let selectValue = self.props.value==undefined?'':self.props.value;
    return (
      <div className={'jw-custom-menu-w'}>
      	{
      		this.props.showView ? <div className="jw-custom-menu-view" onClick={(e)=>self.openMenu(e)}>{
            this.props.showView
          }</div> : <IconButton style={{
      		}} onClick={(e)=>self.openMenu(e)}>
          <div className={this.props.flag=='shareobj' ? "icon-new" : 'menu-opear'}></div>
        </IconButton>
      	}
       	<Menu
          anchorEl={self.state.anchorEl}
          open={self.state.menuOpen}
          onClose={(e)=>self.menuHandleClose(null)}
          className={'custom-menu '+(self.props.checkIcon?'has-check-icon':"")}
          PaperProps={{
            style: {
              minWidth:'90px',
              background:"#fff"
            },
          }}
        >
          <ClickAwayListener onClickAway={(e)=>self.handleClose()}>
          {this.props.options.map(option => (
            <MenuItem disabled={option.disabled?true:false} className={'custom-menu-item '+(option.key === selectValue?'custom-menu-item-check ':' ')} key={option.key} selected={option.key === selectValue} onClick={(e)=>self.menuHandleClose(option,e)}>
              {self.props.checkIcon?self.props.checkIcon:""}
              <span className="custom-menu-i-value ellipsis">{option.value}</span>
            </MenuItem>
          ))}
          </ClickAwayListener>
        </Menu>
      </div>
    );
  }
  componentDidMount(){
  }
}
export default withStyles(styles)(CustomMenu);