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

Zeanium UI Framework for React.js

var React = require('react');
var Input = require('./Input');

module.exports = React.createClass({
	displayName: 'FormItem',
	getDefaultProps: function (){
		return {
			type: 'text',
			status: '',
			className: 'c-default'
		};
	},
	getInitialState: function(){
		return {
			hidden: this.props.hidden || false,
			status: '',
			tip: this.props.tip
		}
	},
	componentDidMount:function(){
		this.props.onFormItemDidMount && this.props.onFormItemDidMount(this);
	},
	componentDidUpdate: function (){
		this.props.onFormItemDidUpdate && this.props.onFormItemDidUpdate(this);
	},
	validate: function (){
		return this.refs.input.validate();
	},
	getValue: function () {
		return this.refs.input._value;
	},
	setValue: function (value) {
		this.refs.input.setValue(value);
	},
	tip: function (tip) {
		this.setState({ tip: tip });
	},
	hidden: function (hidden) {
		this.setState({
			hidden: hidden
		});
	},
	render:function(){
		var _hStyle = this.props.hStyle || {};
		_hStyle.width = this.props.hWidth;
		return (
			<div className={"rt-form-item type-" + this.props.type + " " + this.props.className + " " + this.state.status} data-hidden={this.state.hidden||false}>
				{
					this.props.title && <label className="fi-label" style={_hStyle}>{this.props.title}</label>
				}
				<Input ref="input" parent={this} {...this.props} width={this.props.bWidth} style={this.props.bStyle} />
				{
					this.state.tip && <label className="fi-tip">{this.state.tip}</label>
				}
			</div>
		);
	}
});