@upendradevsingh/webcore/docs/src/components/FormField/TextInput/TextInput.js

UI Core Components for web

/**

**/
"use strict";

import React from 'react';

class TextInput extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			value : this.props.defaultValue,
			className : "form-group " + this.props.type + "-input",
		};
	}

	handleChange(event) {
	    this.setState({
			value : event.target.value
		})
	    if(this.props.onChange) {
	      this.props.onChange(event);
	    }
	 }

	handleFocus(event) {
	 	this.setState({
	 		className: this.state.className + " focused"
	 	})
	}

	handleBlur(event) {
		if (event.target.value == "") {
			this.setState({
				className : this.state.className.replace("focused", "")
			})
		}
	}


	render() {
		return (
		  <div className={this.state.className}>
		  <label for={this.props.id}>{this.props.label}</label>
		  <input type={this.props.type} id={this.props.id} onFocus={this.handleFocus.bind(this)} value={this.state.value} onChange={this.handleChange.bind(this)} onBlur={this.handleBlur.bind(this)} className="form-control"  />
		  </div>	
		)
	}
}

export default TextInput;