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

UI Core Components for web

"use strict";

import React from 'react';


class SelectBox extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			value : this.props.value,
			options :JSON.parse(this.props.options),
			items : [],
			selectedText : this.props.selectBoxText
		};
		
	}

	componentDidMount() {
		var items = [];
		for (var i in this.state.options) {
			items.push(<option value={i}>{this.state.options[i]}</option>);
		}
		this.setState({
			items : items
		})
	}

	handleChange(event) {
	    this.setState({
			value : event.target.value,
			selectedText : event.target.options[event.target.selectedIndex].text
		})
	    if(this.props.onChange) {
	      this.props.onChange(event);
	    }
	 }


	render() {
		return (
		  <div class="select-box jabong-dropdown" data-err-container=".swatch.size">
		  	<div class="custom-select-boxs">{this.props.selectBoxTitle}
		  		<span class="change-value">{this.state.selectedText}</span>
		  	</div>
		  	<select value={this.state.value} onChange={this.handleChange.bind(this)} class="form-control size-drop-down" id={this.props.id}>
		  		{this.state.items.map(item => {
		  			return item;
		  		})}
		  	</select>
		  </div>	
		)
	}
}

export default SelectBox;