joywok-material-components/components/teamscope/UploadDialog.js

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

/**
 * 自定义用户组 - 导入用户/团队 - 选择excel文件 上传
 */
import React , {Component,Fragment} from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import {createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import LinearProgress from '@material-ui/core/LinearProgress';

const styles = {

};

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

class UploadDialog extends  React.Component{
  constructor(props) {
    super(props);
    this.state = {
      progress:0
    }
    this.timer = null;
  }
  handClose(){
    // typeof(this.props.onChange)=='function' && this.props.onChange()
  }
  componentDidMount(){
    let self = this;
     this.timer  = setInterval(()=>{
      if (self.state.progress === 100) {
         return 0;
       }
       let diff = Math.random() * 10;
        self.setState({
          progress:Math.min(self.state.progress + diff, 100)
        })
    },500)
  }
  componentWillUnmount (){
     clearInterval(this.timer);
  }
  render(){
    let self = this;
    let {classes} = this.props;
    return <Dialog
             className="jw-m-upload-dialog"
             open={this.props.open}
             onClose={()=>this.handClose()}
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
            >
             <DialogTitle id="alert-dialog-title">{this.props.dialogTitle}</DialogTitle>
             <DialogContent>
               <LinearProgress className="jw-m-upload-progress" variant="determinate" value={this.state.progress}/>
             </DialogContent>
             <DialogActions className="addusergroup-actions">
                // 因为没有分块上传，所以，不能取消上传
                <Button onClick={()=>this.handClose()} disabled className="upload-cancel-btn" color="disabled">
                  {i18n('btn.cancel')}
                </Button>
             </DialogActions>
          </Dialog>
  }
}

export default connect((state)=>{return state})(UploadDialog);