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

Zeanium UI Framework for React.js

require('./BottomPopupView.less');
var React = require('react');
var ReactDOM = require('react-dom');
var DOMUtil = window.DOMUtil;

module.exports = React.createClass({
	displayName:'BottomPopupView',
	getInitialState: function() {
		return {
			active: false
		};
	},
	componentDidMount: function (){
		var _dom = ReactDOM.findDOMNode(this),
			_popupDOM = ReactDOM.findDOMNode(this.refs.popup);

		this._popupWidth = this.props.popupWidth || _dom.getBoundingClientRect().width;
		_popupDOM.style.width = this._popupWidth + 'px';
		_popupDOM.style.position = this.props.popupPosition || 'absolute';
		this.__fixPosition();
	},
	__fixPosition: function (){
		var target = ReactDOM.findDOMNode(this),
			popup = ReactDOM.findDOMNode(this.refs.popup);
		var _t = DOMUtil.getPosition(target), _ml = null;
		if((_t.x + this._popupWidth) > document.body.scrollWidth){
			_ml = _t.width - this._popupWidth;
		}
		if(_ml < 0){
			popup.style.marginLeft = _ml + 'px';
		}
	},
	__onClick: function (event){
		Popup.setBottomView(this);
		this.setState({
			active: !this.state.active
		});
		this.props.onClick && this.props.onClick(!this.state.active, this);
		event.stopPropagation();
		event.preventDefault();
	},
	active: function (active){
		if(this.isMounted()){
			this.setState({
				active: active
			});
		}
	},
	__onPopClick: function (event){
		event.stopPropagation();
		event.preventDefault();
	},
	render:function(){
		return (
			<div className={"c-bottom-popup-view " + (this.props.status||'normal') + " " + (this.props.className||'') } data-active={this.state.active} style={this.props.style}>
				<div className="view" onClick={this.__onClick}>
					{this.props.render && this.props.render(this)}
				</div>
				<div ref="popup" className="popup" onClick={this.__onPopClick} style={this.props.popStyle} >{this.props.children}</div>
			</div>
		);
	}
});