joywok-material-components/components/dialog/simpleDialog.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"
  }
};
require('./style/simpleDialog.css');
class SimpleDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: props.open || false,
      curcount: {}
    }
  }
  handleClose = () => {
    console.log('触发leme');
    this.setState({
      open:false
    })
    this.props.onClose && this.props.onClose()
  };
  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)
    }
  }
  componentDidMount(){
    let self = this;
    let interval = {};
    if(this.props.actions&&this.props.actions.length>0){
      _.each(this.props.actions,(item,i)=>{
        if(item.countdown){
          self.state.curcount[i] = item.countdown.time;
          self.setState({
            curcount:self.state.curcount
          });
          interval[i] = setInterval(
            ()=>{
              self.state.curcount[i] = self.state.curcount[i]-1
              console.log('self.state.curcount[i]',self.state.curcount)
              self.setState({
                curcount:self.state.curcount
              });
              if(self.state.curcount[i]<=0) clearInterval(interval[i]);
            }
            ,1000
          )
        }
      })
    }
  }
  render() {
    let self = this;
    const { classes } = this.props;
    return (
      <Dialog onClose={this.handleClose} aria-labelledby="simple-dialog-title" open={this.state.open} className={'simple-dialog'}>
        <div className={'simple-dialog-c'}>
          {
            this.props.title?<div className={'simple-dialog-title'}>{this.props.title}</div>:''
          }
          <div className={'simple-dialog-content'}>{
            this.props.content
          }</div>
          {
            this.props.actions && this.props.actions.length!=0?<div className={'simple-dialog-action'}>{_.map(this.props.actions,function(i,index){
              if(i.countdown&&self.state.curcount[index]>0){
                i.countdown.unit = i.countdown.unit ? i.countdown.unit.toUpperCase():'S';
                return <Button {...i} disabled className={'ellipsis jw-button-count-down '+classes.button+' '+(typeof(i['className'])!='undefined'?i["className"]:'')} >{self.state.curcount[index]+i.countdown.unit}</Button>
              }else{
                return <Button {...i} className={'ellipsis '+classes.button+' '+(typeof(i['className'])!='undefined'?i["className"]:'')} onClick={(e)=>self.btnClick(e,i)}>{i['value']}</Button>
              }
            })}</div>:''
          }
        </div>
      </Dialog>
    );
  }
  componentWillReceiveProps(nextProps){
    this.setState(nextProps);
  }
}

export default withStyles(styles)(SimpleDialog);;