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