scinote-web/app/javascript/packs/shared/navigation/components/SearchDropdown.jsx

58 lines
1.4 KiB
React
Raw Normal View History

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;