CountDownButton.js 1.9 KB
import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';   
import cx from 'classnames';
import s from './buttons.scss'; 


class CloseButton extends React.Component {
    constructor(props) {
        super(props);
        this.clickBtn=this.clickBtn.bind(this); 
        this.subtractCount=this.subtractCount.bind(this);
        this.state={
            countTime:60,
            runCount:false,
        }
    }
    static propTypes = {     
        lable:PropTypes.string,
        onClick:PropTypes.func,
        countEnd:PropTypes.func,
        style:PropTypes.object,
        runCount:PropTypes.bool
    }  
    static defaultProps={  
        lable:'',
        style:{},  
        runCount:false,
        onClick:()=>{

        },
        countEnd:()=>{

        }
    }  
    clickBtn(e){
        const {onClick,runCount}=this.props;
        if(!runCount)
            onClick();
    }
    subtractCount(){
        const {countTime}=this.state;
        const {countEnd,runCount}=this.props;
        if(runCount&&countTime>0){
            this.setState({
                countTime:countTime-1
            })
        }else if(countTime<=0){
            countEnd();
        }
    }
    componentDidMount(){  
        this.timer=setInterval(this.subtractCount,1000);  
    }  
    componentWillReceiveProps(nextProps){   
        if(nextProps.runCount!=this.props.runCount){
            this.setState({
                countTime:60 
            })
        }
    }
    componentDidUpdate(prevProps,prevState){  
    }
    componentWillUnmount() {  
        clearInterval(this.timer)
    }  
    render(){      
        const {lable,style,runCount}=this.props;
        return (
            <a className={cx(s.success_btn,runCount?s.disabled:null)} onClick={this.clickBtn} style={style}>{lable}{runCount?"("+this.state.countTime+")":""}</a>
        )
    }
}



export default CloseButton;