joywok-material-components/components/dialog/sliderDialog.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';
import Button from '@material-ui/core/Button';

require('./style/sliderDialog.css');
const styles = theme => ({
  appBar: {
    position: 'relative',
  },
  flex: {
    flex: 1,
  },
  title:{
    margin:'0 10px'
  }
});
class SliderDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
    }
  }
  handleClose(e){
    let self = this;
    this.setState({ open: false });
    setTimeout(function(){
      self.props.onClose && self.props.onClose();
      self.props.events.emit('cancel');
    },300)
  }
  agreeClick(e){
    this.props.onSave && this.props.onSave();
    if(typeof(this.props.dialogType)!='undefined'){
      this.props.events.emit('save',this);
    }
    e.stopPropagation()
  }
  render() {
    const { classes } = this.props;
    let data = this.props.data || this.props;
    let self = this;
    let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let style = {
      top:0,bottom:0,right:0,
      width:clientWidth / 2 +'px'
    }
    if(this.props.style){
      style = this.props.style
    }
    return (
      <div className={'slider-dialog-w'}>
        <Slide direction="left" in={this.state.open}>
          <div className={"slider-dialog"} style={style}>

            <div className="slider-dialog-h">
              {
                this.props.disabled?"":<Button className="" style={Object.assign({
                  background:"#00C78C",
                  "padding":"4px 12px",
                  "color":"#fff",
                  textTransform:"none",
                  "fontSize":"13px",
                  border:"1px solid #00C78C",
                  height:'30px',
                  lineHeight:1,
                  "minWidth":"85px"
                })} onClick={(e)=>self.agreeClick(e)}>{this.props.agreeVal || 'Save'}</Button>
              }
              {
                this.props.disabled?"":<Button className="" style={Object.assign({
                  background:"#fff",
                  "padding":"4px 12px",
                  "color":"#fff",
                  textTransform:"none",
                  "fontSize":"13px",
                  border:"1px solid #00C78C",
                  color:"#00C78C",
                  height:'30px',
                  lineHeight:1,
                  "minWidth":"85px"
                })} onClick={(e)=>self.handleClose(e)}>{this.props.cancelVal || 'Cancel'}</Button>
              }
              <div className="slider-dialog-close" onClick={(e)=>self.handleClose(e)}></div>
            </div>
            <div className="slider-dialog-c">
              {
                this.props.children
              }
            </div>
          </div>
        </Slide>
      </div>
    );
  }
  componentDidMount(){
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
  componentWillUnmount(){
    // alert('sdasda');
    
  }
}
export default withStyles(styles)(SliderDialog);