{"size": 1426, "ext": "js", "max_stars_repo_path": "resources/assets/js/components/GoogleMap/StandaloneSearchBox.js", "max_stars_repo_name": "phanhoang370/reactjs-ref", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "resources/assets/js/components/GoogleMap/StandaloneSearchBox.js", "max_issues_repo_name": "phanhoang370/reactjs-ref", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "resources/assets/js/components/GoogleMap/StandaloneSearchBox.js", "max_forks_repo_name": "phanhoang370/reactjs-ref", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.9705882353, "max_line_length": 97, "alphanum_fraction": 0.6178120617}
/* eslint-disable no-undef */
import React from "react"
import { withScriptjs } from "react-google-maps"
import { StandaloneSearchBox } from 'react-google-maps/lib/components/places/StandaloneSearchBox'

const refs = {}

class GoogleMapStandaloneSearchBox extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      address: ''
    }
  }

  onSearchBoxMounted = ref => {
    refs.searchBox = ref;
  }

  onPlacesChanged = () => {
    const places = refs.searchBox.getPlaces();
    this.props.onPlacesChanged(places);
  }

  onChange = e => {
    this.setState({
      address: e.target.value
    })
  }

  componentWillMount() {
    this.setState({
      address: this.props.value
    })
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps && nextProps.value) {
      this.setState({
        address: nextProps.value
      })
    }
  }

  render() {
    const { placeholder, disabled } = this.props;
    const { address } = this.state
    
    return (
      <StandaloneSearchBox
        ref={this.onSearchBoxMounted}
        onPlacesChanged={this.onPlacesChanged}
      >
        <input
          type="text"
          placeholder={placeholder}
          className="form-control"
          value={address}
          disabled={disabled}
          onChange={this.onChange}
        />
      </StandaloneSearchBox>
    )
  }
}

export default withScriptjs(GoogleMapStandaloneSearchBox)
