2017-08-07 15:31:24 +08:00
|
|
|
import React, { Component } from "react";
|
2017-08-08 21:44:28 +08:00
|
|
|
import { NavDropdown, MenuItem } from "react-bootstrap";
|
|
|
|
|
|
|
|
import { SEARCH_PATH } from "../../../app/routes";
|
2017-08-07 15:31:24 +08:00
|
|
|
|
|
|
|
class SearchDropdown extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = { searchTerm: "" };
|
|
|
|
this.handleSearchTermChange = this.handleSearchTermChange.bind(this);
|
2017-08-08 21:44:28 +08:00
|
|
|
this.handleKeyPress = this.handleKeyPress.bind(this);
|
|
|
|
this.setFocusToInput = this.setFocusToInput.bind(this);
|
2017-08-07 15:31:24 +08:00
|
|
|
}
|
|
|
|
|
2017-08-08 21:44:28 +08:00
|
|
|
setFocusToInput(ev) {
|
|
|
|
this.navSearchInput.focus();
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.nativeEvent.stopImmediatePropagation();
|
2017-08-07 15:31:24 +08:00
|
|
|
}
|
|
|
|
|
2017-08-08 21:44:28 +08:00
|
|
|
handleKeyPress(ev) {
|
|
|
|
if (ev.charCode === 13) {
|
|
|
|
window.location = `${SEARCH_PATH}?q=${this.state.searchTerm}`;
|
|
|
|
this.setState({ searchTerm: "" });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSearchTermChange(ev) {
|
|
|
|
this.setState({ searchTerm: ev.target.value });
|
2017-08-07 15:31:24 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2017-08-07 17:13:09 +08:00
|
|
|
<NavDropdown
|
|
|
|
noCaret
|
|
|
|
title={<span className="glyphicon glyphicon-search" />}
|
2017-08-08 21:44:28 +08:00
|
|
|
onClick={this.setFocusToInput}
|
2017-08-07 19:51:22 +08:00
|
|
|
id="search-dropdown"
|
2017-08-07 15:31:24 +08:00
|
|
|
>
|
2017-08-08 21:44:28 +08:00
|
|
|
<MenuItem>
|
|
|
|
<input
|
|
|
|
onChange={this.handleSearchTermChange}
|
|
|
|
onClick={this.setFocusToInput}
|
|
|
|
onKeyPress={this.handleKeyPress}
|
|
|
|
ref={el => {
|
|
|
|
this.navSearchInput = el;
|
|
|
|
}}
|
|
|
|
type="text"
|
|
|
|
placeholder="Search"
|
|
|
|
/>
|
|
|
|
</MenuItem>
|
2017-08-07 17:13:09 +08:00
|
|
|
</NavDropdown>
|
2017-08-07 15:31:24 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SearchDropdown;
|