Select.js

Select.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactSelect from 'react-select'

class Select extends Component {
	constructor(props) {
		super(props)
		this.state = {
			name: this.props.name,
			value: this.props.value,
			options: this.props.options,
			disabled: this.props.disabled,
			clearable: this.props.clearable,
			searchable: this.props.searchable,
      placeholder: this.props.placeholder,
			onChangeCallback: this.props.onChangeCallback,
		}

		this.handleChange = this.handleChange.bind(this)
	}

	handleChange(value) {
		this.setState({ value })
		this.state.onChangeCallback(value)
	}

	render() {
		return (
	    <ReactSelect
        simpleValue
				ref="selectField"
				autofocus={false}
				name={this.state.name}
        value={this.state.value}
        onChange={this.handleChange}
				options={this.state.options}
				disabled={this.state.disabled}
				clearable={this.state.clearable}
				searchable={this.state.searchable}
        placeholder={this.state.placeholder}
      />
		)
	}
}

Select.propTypes = {
	name: PropTypes.string,
	value: PropTypes.string,
	options: PropTypes.array,
	disabled: PropTypes.bool,
	clearable: PropTypes.bool,
	searchable: PropTypes.bool,
	placeholder: PropTypes.string,
  onChangeCallback: PropTypes.func,
}

Select.defaultProps = {
	name: null,
	value: null,
	options: [],
	disabled: false,
	clearable: false,
	searchable: false,
  placeholder: 'Choose an option',
	onChangeCallback: (value) => { return undefined }
}

export default Select