content: import React from 'react';
  
  import FocusLost from '../focus-lost';
  import TextField from '../text-field';
  import './index.css';
  
  class SelectField extends React.Component {
      constructor(props) {
          super(props);
          this.state = {open: false};
          this.hide = this.hide.bind(this);
          this.switch = this.switch.bind(this);
      }
      render() {
          return <div className="select-field">
              <FocusLost onFocusLost={this.hide}>
                  <div>
                      <TextField
                          hint={this.props.hint}
                          onClick={this.switch}
                          label={this.props.label}
                          readOnly={true}
                          value={this.props.items[this.props.value]} />
                      <div className="select-field-items" style={{display: this.state.open ? '' : 'none'}}>
                          {
                              Object.keys(this.props.items).map(value =>
                                  <div className="select-field-item" key={value} onClick={this.selectItem(value)}>
                                      {this.props.items[value]}
                                  </div>
                              )
                          }
                      </div>
                  </div>
              </FocusLost>
          </div>;
      }
      hide() {
          if (this.state.open) {
              this.setState({open: false});
          }
      }
      switch() {
          this.setState({open: !this.state.open});
      }
      selectItem(value) {
          return () => {
              this.props.onChange(value);
              this.setState({open: false});
          };
      }
  }
  
  SelectField.propTypes = {
      hint: React.PropTypes.string,
      items: React.PropTypes.object,
      label: React.PropTypes.string,
      onChange: React.PropTypes.func,
      value: React.PropTypes.string
  };
  
  export default SelectField;
  