ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Close the navbar after a search on a mobile device

Browse Source
This commit is contained in:
Grégoire Delattre 2017-06-05 13:31:37 +02:00
parent afbed96243
commit 265eeb1ec3
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/public/js/components/navbar.js
View File

@ -2,14 +2,16 @@ import React from "react"
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
import { LinkContainer } from "react-router-bootstrap"
export default class NavBar extends React.PureComponent {
export default class AppNavBar extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
userLoggedIn: (props.username !== ""),
displayMoviesSearch: this.shouldDisplayMoviesSearch(props.router),
displayShowsSearch: this.shouldDisplayShowsSearch(props.router),
expanded: false,
};
this.setExpanded = this.setExpanded.bind(this);
}
componentWillReceiveProps(nextProps) {
// Update the state based on the next props
@ -34,10 +36,14 @@ export default class NavBar extends React.PureComponent {
const location = router.getCurrentLocation().pathname;
return (location.indexOf(keyword) !== -1)
}
setExpanded(value) {
if (this.state.expanded === value) { return }
this.setState({ expanded: value });
}
render() {
return (
<div>
<Navbar fluid fixedTop collapseOnSelect>
<Navbar fluid fixedTop collapseOnSelect expanded={this.state.expanded} onToggle={this.setExpanded}>
<Navbar.Header>
<LinkContainer to="/">
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
@ -63,6 +69,7 @@ export default class NavBar extends React.PureComponent {
placeholder="Search movies"
router={this.props.router}
path='/movies/search'
setExpanded={this.setExpanded}
/>
}
{(this.state.displayShowsSearch && this.state.userLoggedIn) &&
@ -70,6 +77,7 @@ export default class NavBar extends React.PureComponent {
placeholder="Search shows"
router={this.props.router}
path='/shows/search'
setExpanded={this.setExpanded}
/>
}
</Navbar.Collapse>
@ -86,6 +94,7 @@ class Search extends React.Component {
}
handleSearch(ev) {
ev.preventDefault();
this.props.setExpanded(false);
this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
}
render() {