joywok-material-components/components/dialog/fulldialog.js

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

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
const styles = theme => ({
  appBar: {
    position: 'relative',
  },
  flex: {
    flex: 1,
  },
  title:{
    margin:'0 10px'
  }
});
function Transition(props) {
  return <Slide direction="left" {...props} />;
}
class FullScreenDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
    }
  }
  handleClose(){
    this.setState({ open: false });
    this.props.onClose && this.props.onClose()
    if(typeof(this.props.dialogType)!='undefined'){
      this.props.events.emit('cancel');
    }
  }
  render() {
    const { classes } = this.props;
    let data = this.props.data || this.props;
    let self = this;
    let customClass = '';
    if(typeof(this.props.dialogType)!='undefined'){
      customClass = customClass+' jw-dialog-child-'+this.props.containerId
    }
    return (
      <div className={'jw-dialog-full'}>
        <Dialog
          fullScreen
          open={typeof(this.props.allopen)!='undefined'?true:this.state.open}
          onClose={(e)=>self.handleClose(e)}
          TransitionComponent={Transition}
          className={customClass}
          style={{
            zIndex:3001
          }}
        >
          <AppBar className={classes.appBar}>
            <Toolbar>
              <IconButton color="inherit" onClick={(e)=>self.handleClose()} aria-label="Close">
                <CloseIcon />
              </IconButton>
              {
                typeof(data.title)!='undefined'?<Typography variant="h6" color="inherit" className={classes.flex+' '+classes.title}>
                    {
                      data.title
                    }
                </Typography>:''
              }
              {
                typeof(this.props.other!='undefined')?data.other:''
              }
            </Toolbar>
          </AppBar>
          <div className={'jw-dialog-full-main'}>
            {this.props.data && this.props.data.children?this.props.data.children:this.props.children}
          </div>
        </Dialog>
      </div>
    );
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
}
export default withStyles(styles)(FullScreenDialog);