react-zeanium-ui-ui/src/ui/PopupManager.js

Zeanium UI Framework for React.js

require('./PopupManager.less');
var React = require('react');
var Dialog = require('./Dialog');
var Message = require('./Message');
var Loading = require('../loading/index.js');
var ButtonGroup = require('./ButtonGroup');

module.exports = React.createClass({
	displayName:'PopupManager',
	getInitialState:function(){
		return {
			mask: false,
			active: false
		}
	},
	componentDidMount:function(){
		this._count = 0;
		window.Popup = this;
		window.addEventListener('click', function (e) {
			this.setBottomView(null);
		}.bind(this), false);
	},
	setBottomView: function (bottomView){
		if(window.Popup.bottomView){
			window.Popup.bottomView.active(false);
		}
		window.Popup.bottomView = bottomView;
	},
	popup: function (type, view){
		this._count++;
		var _state = {
			mask: true,
			active: true
		};
		_state[type] = view;
		this.setState(_state);
	},
	close: function (type, argv){
		this._count--;
		var _state = {
			mask: (this._count ? true : false),
			active: (this._count ? true : false)
		};
		_state[type] = null;
		this.setState(_state);
	},
	loading: function (argv){
		if(argv){
			this._count++;
			this.setState({
				loading: <Loading.Default {...(argv || {})} />,
				mask: true,
				active: true
			});
		}else {
			this.close('loading');
		}
	},
	message: function (argv) {
		this._count++;
		this.setState({
			message: <Message {...argv} />,
			mask: this.state.mask||argv.mask,
			active: true
		});
		var _destory = function () { this.close('message'); }.bind(this);
		if(argv.callback){
			argv.callback(_destory);
		}else {
			setTimeout(_destory, argv.delay || 2000);
		}
	},
	confirm: function (argv) {
		var _key = 'confirm',
			_width = argv.width || 300,
			_style = argv.style || {};

		_style.width = _style.width || _width;
		_style.marginLeft = -(_width/2);
		this.popup(_key, <Dialog
			title={argv.title||"Confirm Dialog"}
			className="c-confirm"
			hHeight={argv.hHeight||38}
			style={_style}
			enableClose={true}
			skin={_key}
			onClose={()=>{this.close(_key, argv);}}>
			<div>
				<div className="content">{argv.content}</div>
				<ButtonGroup items={[
					{ text: 'Confirm', float: 'right', onClick: function (){ this.close(_key, argv);argv.onConfirm && argv.onConfirm(); }.bind(this) },
					{ text: 'Cancel', float: 'right', status: 'danger', onClick: function (){ this.close(_key, argv); argv.onCancle && argv.onCancle(); }.bind(this) }
				]} />
			</div>
		</Dialog>);
	},
	dialog: function (argv, render) {
		var _key = 'dialog',
			_width = argv.width || 400,
			_style = argv.style || {},
			_view = argv.content || (render&&render());

		_style.width = _style.width || _width;
		_style.marginLeft = -(_width/2);
		_view = <Dialog
			{...argv}
			style={_style}
			enableClose={true}
			onClose={()=>{ argv.onClose&&argv.onClose(); this.close(_key, argv); }}>
			{_view}
		</Dialog>;
		this.popup(_key, _view);
	},
	render:function(){
		return (
			<div className="c-popup-manager" data-active={this.state.active} data-mask={this.state.mask}>
				<div className="popup-mask bg_blur" style={{ zIndex: this.state.maskZIndex }}></div>
				<div className="popup-view rt-dialog-container">{this.state.dialog}</div>
				<div className="popup-view rt-confirm-container">{this.state.confirm}</div>
				<div className="popup-view rt-message-container">{this.state.message}</div>
				<div className="popup-view rt-loading-container">{this.state.loading}</div>
			</div>
		);
	}
});