joywok-material-components/components/modal/customHTML.js

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

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
const styles = {
  root:{
  },
  button:{
    display:'inline-block',
    maxWidth:"120px",
    color:"#00C78B"
  }
};
require('./style/customHTML.css');
class CustomHTML extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
    }
  }
  handleClose = () => {
    console.log(this.props,'dsadasdas');
    if(typeof(this.props.maskClosable)!='undefined'){

    }else{
      this.setState({
        open:false
      })
      this.props.onClose && this.props.onClose();
      this.props.events.emit('close')
    }
  };
  btnClick(e,item){
    let self = this;
    let key = item['key'];
    this.props[key] && this.props[key](e,item,this)
    if(typeof(this.props.events)!='undefined'){
      this.props.events.emit('click',self,item)
    }
  }
  render() {
    let self = this;
    const { classes } = this.props;
    return (
      <Dialog onClose={this.handleClose} aria-labelledby="simple-dialog-title" open={this.state.open} className={'custom-modal-dialog'}>
        <div className="custom-modal-dialog-w">
          <div className={'custom-modal-dialog-c'}>
            {
              this.props.title?<div className={'custom-modal-dialog-title'}>{this.props.title}</div>:''
            }
            <div className={'custom-modal-dialog-content'} dangerouslySetInnerHTML={{__html: this.props.content}}></div>
            {
              this.props.actions && this.props.actions.length!=0?<div className={'custom-modal-dialog-action'}>{_.map(this.props.actions,function(i){
                return <Button {...i} className={'ellipsis '+classes.button+' '+(typeof(i['className'])!='undefined'?i["className"]:'')} onClick={(e)=>self.btnClick(e,i)}>{i['value']}</Button>
              })}</div>:''
            }
          </div>
        </div>
      </Dialog>
    );
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
}

export default withStyles(styles)(CustomHTML);;