react_toast_horse/Toast.jsx

react toast 消息提示

/*
 * 弹出提示语
 * 	@param content 内容
 *	@param hideSec 显示的时间（毫秒） 
 *	@param onHide 隐藏后回调函数
 *  @param maskDisplay    遮罩层是否显示，默认是显示
 */
import React from 'react';
import ActUtil from 'ActUtil';
require("./css/toast.css");

var maskClick=false;
var secTimer; //回调函数定时器
var msgToken=""; //message token  
class Toast extends React.Component{ 
    constructor(props){
        super(props);
        this.state={
        	toastDisplay:false,
        	maskDisplay:false,
        	content:"",
        	hideSec:3000,//默认3000毫秒
        	layerMarginLeft:"0px",
        	layerMarginTop:"0px",
        	isShow:false, //触发显示(第一次加载不显示)
        	onHide:function(){}
        };
    };

    componentDidMount(){
    	msgToken = ActUtil.pubsub.subscribe("toast",(topic,toastParams)=>{
            var maskDisplay=toastParams.maskDisplay;
            if(maskDisplay!=false && !maskDisplay){
                maskDisplay=true;
            }
    		this.setState({
				toastDisplay:true,
				maskDisplay:maskDisplay,
	        	content:toastParams.content,
	        	hideSec:toastParams.hideSec?toastParams.hideSec:3000,
	        	isShow:true,
	        	onHide:toastParams.onHide?toastParams.onHide:function(){}
			});
    	});
    };

	componentDidUpdate(){
    	if(!this.state.isShow){
    		return;
    	}
    	this.locationToast();
    	this.setHideSec();    	
	};

    componentWillUnmount(){        
        ActUtil.pubsub.off("toast",msgToken);
    };

    //定位弹出层
    locationToast(){
    	var toastEl=document.getElementById("ui-view-toast");
		var height=toastEl.offsetHeight;
		var width=toastEl.offsetWidth;
		//console.log("height="+height+",width="+width);
		this.setState({
			layerMarginTop:-(parseInt(height)/2)+"px",
			layerMarginLeft:-(parseInt(width)/2)+"px",
			isShow:false
		});
    };

    //设置显示多少毫秒
    setHideSec(){
    	var _this=this;
    	secTimer = setTimeout(function(){
    		_this.setState({
    			toastDisplay:false,
    			isShow:false
    		});
    		_this.state.onHide();
    	},this.state.hideSec);
    };

    //隐藏 toast
    maskClickToHideToastHandler(){
    	this.setState({
    		toastDisplay:false
    	});    	
    	clearTimeout(secTimer);
    	this.state.onHide();
    };

    render() {      
        return (
        	<div className="ui-toast" style={{display:this.state.toastDisplay?"block":"none"}}>
	            <div className="ui-mask" style={{display:this.state.maskDisplay?"block":"none",height:ActUtil.getScrollHeight()+"px"}} onClick={(event)=>this.maskClickToHideToastHandler(event)}>	               
	            </div>
	            <div className="ui-layer" id="ui-view-toast" style={{marginLeft:this.state.layerMarginLeft,marginTop:this.state.layerMarginTop}}>
	           		<div className="ui-layer-padding">
	           			{this.state.content}
	           		</div>
	           </div>
            </div>
        );
    };
};

export default Toast;