joywok-material-components/components/utils/Dialog.js

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

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
// import dva from 'dva';
// import {connect} from 'dva';
// import { Router,hashHistory,browserHistory,Route} from 'dva/router';
import {generateMixed} from './pubfun';
import EventEmitter from 'events';
import { createMuiTheme,MuiThemeProvider} from '@material-ui/core/styles';
class Container extends Component{
  constructor(props) {
    super(props);
    this.state = props;
  }
  render(){
    let Template = this.state.Template;
    return (<div className={"dialog-w"}>
      <Template {...this.state.data} events={this.state.events}></Template>
    </div>)
  }
  componentDidMount() {
    let self = this;
    this.state.events.on('changeState',function(data){
      let newData = Object.assign({},self.state.data,data);
      self.setState({
        data:newData
      })
    })
  }
}
require('./style/dialog.css');
function removeCustomDialog(data){
  if($('.modal-'+data.data.containerId).length!=0){
    $('.modal-'+data.data.containerId).remove();
  }
  if(typeof(data.nohidebody)=='undefined'){
    if($('.dialog').length==0){
      $('body').removeClass('overflowhidden').css({overflow:'inherit'});
    }
  }
  if(typeof(data.stopPropagation)!='undefined'){
    $('body').undelegate('.'+data.rootClass, 'click');
  }
}
const Dialog=(props)=>{
	var div = document.createElement('div');
	let id = generateMixed(16);
	let rootClass = 'dialog '+(props.rootClass || '')
	div.setAttribute("class", rootClass);
	div.setAttribute("id", 'root-' + id);
	document.body.appendChild(div);
  if(typeof(props.nohidebody)=='undefined'){
    $('body') && $('body').addClass('overflowhidden');
  }
	if(typeof(props.style)!='undefined'){
    div.setAttribute("style",props.style);
  }
	let myEmitter = new EventEmitter();
	const close = () => {
    $('#root-' + id) && $('#root-' + id).remove();
    $('.dialog-child-'+id) && $('.dialog-child-'+id).remove();
    div = null;
    myEmitter = null;
    removeCustomDialog(props);
	}
	let object = {
		close: close,
	}
	object.events = myEmitter;
	myEmitter.on('cancel',()=>{
    if(typeof(props.manualCloase)!='undefined'){
    }else{
      setTimeout(function(){
        $('#root-' + id) && $('#root-' + id).remove();
        $('.dialog-child-'+id) && $('.dialog-child-'+id).remove();
        div = null;
        myEmitter = null;
        removeCustomDialog(props);
      },300)
    }
	})
  myEmitter.on('close',()=>{
    $('#root-' + id).remove()
    removeCustomDialog(props);
    div = null;
    myEmitter = null;
  })
  myEmitter.on('save',()=>{
    if(typeof(props.manualCloase)!='undefined'){
    }else{
      setTimeout(function(){
        $('#root-' + id) && $('#root-' + id).remove();
        $('.dialog-child-'+id) && $('.dialog-child-'+id).remove();
        removeCustomDialog(props);
        div = null;
        myEmitter = null;
      },300)
    }
  })

  if(typeof(props.duration)!='undefined'){
    setTimeout(function(){
      object.close();
    },props.duration)
  }

	let bbb = props.app || window.app;
  // console.log( props.app , window.app, 'xxxxx' )
	let container = "#root-" + id
  if(typeof(props.data)=='undefined'){
    props.data = {};
  }
	props.data.containerId = id;
	props.data.close = close;

  if(typeof(props.autoremove)!='undefined'){
    setTimeout(function(){
      $('#root-' + id).remove();
      $('.dialog-child-'+id).remove();
      removeCustomDialog(props);
    },300)
  }

  if(typeof(props.stopPropagation)!='undefined'){
    $('body').delegate('.'+props.rootClass, 'click', function(event) {
      event.stopPropagation()
    });
  }

	ReactDOM.render(
		<Provider store={bbb._store}>
      <MuiThemeProvider theme={createMuiTheme(window.theme)}>
        <Container data={props.data} Template={props.component} events={myEmitter} ></Container>
      </MuiThemeProvider>
	  </Provider>,document.getElementById('root-'+id));

	return object;
}

export default Dialog