{"size": 1306, "ext": "js", "max_stars_repo_path": "app/components/NavBarSearch.js", "max_stars_repo_name": "mapbox/osm-comments-frontend", "max_stars_repo_stars_event_min_datetime": "2016-01-07T09:33:47.000Z", "max_stars_repo_stars_event_max_datetime": "2017-03-10T16:16:13.000Z", "max_issues_repo_path": "app/components/NavBarSearch.js", "max_issues_repo_name": "mapbox/deprecated-osm-comments", "max_issues_repo_issues_event_min_datetime": "2016-01-07T09:30:03.000Z", "max_issues_repo_issues_event_max_datetime": "2017-10-12T06:37:31.000Z", "max_forks_repo_path": "app/components/NavBarSearch.js", "max_forks_repo_name": "mapbox/osm-comments-frontend", "max_forks_repo_forks_event_min_datetime": "2016-01-27T12:34:23.000Z", "max_forks_repo_forks_event_max_datetime": "2017-11-18T11:21:34.000Z"}
{"max_stars_count": 7, "max_issues_count": 32, "max_forks_count": 4, "avg_line_length": 38.4117647059, "max_line_length": 183, "alphanum_fraction": 0.5803981623}
import React from 'react';
import {History} from 'react-router';
import utils from '../utils';

var NavBarSearch = React.createClass({
    mixins: [History],
    getInitialState: function() {
        return {value: this.props.query['q'] || ''};
    },
    componentWillReceiveProps: function(newProps) {
        this.setState({ value: newProps.query['q'] || ''});
    },
    handleChange: function(event) {
        this.setState({value: event.target.value});
    },
    doneTyping: function(event) {
        if (event.charCode == 13 || event.constructor.name == "SyntheticFocusEvent") {
            var query = utils.getQueryString( Object.assign({}, this.props.query, {q: this.state.value}) );
            this.history.pushState(null, this.props.location + '?' + query);
        }
    },
    render: function() {
        return (
                <div className="pad0y pin-right searchInputContainer">
                    <fieldset className='with-icon'>
                        <span className='icon search'></span>
                        <input id='users' type='text' className='round' value={ this.state.value } onChange={this.handleChange} onKeyPress={this.doneTyping} onBlur={this.doneTyping}/>
                    </fieldset>
                </div>
        );
    }
});

export default NavBarSearch;