From 5423f5dcd7b17bdabcd25f11f39f2974a74e0d27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 25 Nov 2015 11:16:09 +0100 Subject: [PATCH 1/2] Bug fix for collapsing nav --- js/components/contract_notification.js | 36 -------------------------- js/components/header.js | 20 +++++++++++--- 2 files changed, 17 insertions(+), 39 deletions(-) delete mode 100644 js/components/contract_notification.js diff --git a/js/components/contract_notification.js b/js/components/contract_notification.js deleted file mode 100644 index cd6ceb53..00000000 --- a/js/components/contract_notification.js +++ /dev/null @@ -1,36 +0,0 @@ -'use strict'; - -import React from 'react'; - -import NotificationStore from '../stores/notification_store'; - -import { mergeOptions } from '../utils/general_utils'; - -let ContractNotification = React.createClass({ - getInitialState() { - return mergeOptions( - NotificationStore.getState() - ); - }, - - componentDidMount() { - NotificationStore.listen(this.onChange); - }, - - componentWillUnmount() { - NotificationStore.unlisten(this.onChange); - }, - - onChange(state) { - this.setState(state); - }, - - render() { - - return ( - null - ); - } -}); - -export default ContractNotification; \ No newline at end of file diff --git a/js/components/header.js b/js/components/header.js index 51f91318..7c2331f9 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -1,9 +1,10 @@ 'use strict'; import React from 'react'; - import { Link } from 'react-router'; +import history from '../history'; + import Nav from 'react-bootstrap/lib/Nav'; import Navbar from 'react-bootstrap/lib/Navbar'; import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav'; @@ -58,11 +59,17 @@ let Header = React.createClass({ UserStore.listen(this.onChange); WhitelabelActions.fetchWhitelabel(); WhitelabelStore.listen(this.onChange); + + // react-bootstrap 0.25.1 has a bug in which it doesn't + // close the mobile expanded navigation after a click by itself. + // To get rid of this, we set the state of the component ourselves. + history.listen(this.onRouteChange); }, componentWillUnmount() { UserStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange); + history.unlisten(this.onRouteChange); }, getLogo() { @@ -135,6 +142,11 @@ let Header = React.createClass({ this.refs.dropdownbutton.setDropdownState(false); }, + // On route change, close expanded navbar again + onRouteChange() { + this.refs.navbar.state.navExpanded = false; + }, + render() { let account; let signup; @@ -201,8 +213,10 @@ let Header = React.createClass({ - + fixedTop={true} + ref="navbar"> + From 5137fa01a9ce9927e6f9d5986ad280a3feafcad0 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Fri, 27 Nov 2015 14:13:30 +0100 Subject: [PATCH 2/2] Add note for navBar state hack --- js/components/header.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/header.js b/js/components/header.js index 7c2331f9..3e2d244d 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -142,7 +142,9 @@ let Header = React.createClass({ this.refs.dropdownbutton.setDropdownState(false); }, - // On route change, close expanded navbar again + // On route change, close expanded navbar again since react-bootstrap doesn't close + // the collapsibleNav by itself on click. setState() isn't available on a ref so + // doing this explicitly is the only way for now. onRouteChange() { this.refs.navbar.state.navExpanded = false; },