react-zeanium-ui-ui/src/widget/Button.js

Zeanium UI Framework for React.js

var React = require('react');

module.exports = React.createClass({
	displayName:'Button',
	getDefaultProps: function (){
		return {
			status: 'default',
			float: 'none',
			className: 'c-default'
		}
	},
	getInitialState:function(){
		return {
			status: this.props.status,
			loading: false
		}
	},
	componentDidMount:function(){
		this.props.onDidMount && this.props.onDidMount(this);
	},
	__onClick: function (event){
		if(this.props.status=='disabled'||this.state.loading){
			return;
		}
		event.stopPropagation();
		event.preventDefault();
		this.props.onClick && this.props.onClick(this.props, event, this);
	},
	loading: function (loading){
		this.setState({ loading: loading });
	},
	render:function(){
		var _style = this.props.style||{};
		_style.width = this.props.width;
		return (
			<div className={"rt-button " + this.props.className + " float-" + this.props.float + ' ' + this.state.status + ' ' + (this.state.loading?'loading':'')} onClick={(event)=>this.__onClick(event)} style={_style}>
				{
					this.props.icon && <i className={"btn-icon fa " + this.props.icon}></i>
				}
				{
					this.props.text && <span className="btn-text">{this.props.text}</span>
				}
			</div>
		);
	}
});