import * as React from 'react';
import { Form } from '../../components/Form';
import { submitSearch } from '../helpers';
import { QueryInput } from './QueryInput';
import { SearchButton } from './SearchButton';
/**
 * The search item in the navbar
 */
export class SearchNavbarItem extends React.Component {
    constructor() {
        super(...arguments);
        this.onSubmit = (event) => {
            event.preventDefault();
            submitSearch(this.props.history, {
                query: this.props.navbarSearchQuery,
            }, 'nav');
        };
    }
    render() {
        // Only autofocus the query input on search result pages (otherwise we
        // capture down-arrow keypresses that the user probably intends to scroll down
        // in the page).
        const autoFocus = this.props.location.pathname === '/search';
        return (React.createElement(Form, { className: "search search--navbar-item d-flex", onSubmit: this.onSubmit },
            React.createElement(QueryInput, Object.assign({}, this.props, { value: this.props.navbarSearchQuery, onChange: this.props.onChange, autoFocus: autoFocus ? 'cursor-at-end' : undefined, hasGlobalQueryBehavior: true })),
            React.createElement(SearchButton, null)));
    }
}
//# sourceMappingURL=SearchNavbarItem.js.map