Fixes to left nav to use non deprecated methods, and properly display…

… active route on page load
mui · Dec 8, 2015 · 23eeac5 · 23eeac5
1 parent 8560c9d
commit 23eeac5
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 22 deletions.
diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
@@ -32,6 +32,7 @@ const Master = React.createClass({
   propTypes: {
     children: React.PropTypes.node,
     history: React.PropTypes.object,
+    location: React.PropTypes.object,
   },
 
   childContextTypes : {
@@ -113,14 +114,13 @@ const Master = React.createClass({
         href="https://github.com/callemall/material-ui"
         linkButton={true}/>
     );
-
     return (
       <AppCanvas>
         {githubButton}
         {this.state.renderTabs ? this._getTabs() : this._getAppBar()}
 
         {this.props.children}
-        <AppLeftNav ref="leftNav" history={this.props.history} />
+        <AppLeftNav ref="leftNav" history={this.props.history} location={this.props.location} />
         <FullWidthSection style={styles.footer}>
           <p style={this.prepareStyles(styles.p)}>
             Hand crafted with love by the engineers at

diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx
@@ -37,12 +37,13 @@ export default class Components extends React.Component {
     ];
 
     return (
-      <PageWithNav menuItems={menuItems}>{this.props.children}</PageWithNav>
+      <PageWithNav location={this.props.location} menuItems={menuItems}>{this.props.children}</PageWithNav>
     );
   }
 
 }
 
 Components.propTypes = {
   children: React.PropTypes.node,
+  location: React.PropTypes.object,
 };
diff --git a/docs/src/app/components/pages/customization.jsx b/docs/src/app/components/pages/customization.jsx
@@ -11,12 +11,13 @@ export default class Customization extends React.Component {
     ];
 
     return (
-      <PageWithNav menuItems={menuItems}>{this.props.children}</PageWithNav>
+      <PageWithNav location={this.props.location} menuItems={menuItems}>{this.props.children}</PageWithNav>
     );
   }
 
 }
 
 Customization.propTypes = {
   children: React.PropTypes.node,
+  location: React.PropTypes.object,
 };
diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
@@ -12,12 +12,13 @@ export default class GetStarted extends React.Component {
     ];
 
     return (
-      <PageWithNav menuItems={menuItems}>{this.props.children}</PageWithNav>
+      <PageWithNav location={this.props.location} menuItems={menuItems}>{this.props.children}</PageWithNav>
     );
   }
 
 }
 
 GetStarted.propTypes = {
   children: React.PropTypes.node,
+  location: React.PropTypes.object,
 };
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
@@ -19,9 +19,22 @@ let PageWithNav = React.createClass({
 
   propTypes: {
     children: React.PropTypes.node,
+    location: React.PropTypes.object,
     menuItems: React.PropTypes.array,
   },
 
+  componentWillMount() {
+    this.setState({
+      activeRoute: this.props.location.pathname,
+    });
+  },
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      activeRoute: nextProps.location.pathname,
+    });
+  },
+
   getStyles() {
     let subNavWidth = Spacing.desktopKeylineIncrement * 3 + 'px';
     let styles = {
@@ -75,34 +88,26 @@ let PageWithNav = React.createClass({
         </div>
         <Menu
           autoWidth={false}
-          onItemTouchTap={this._handleItemTouchTap}
+          onItemTouchTap={(e, child) => this.history.push(child.props.value)}
           openDirection="bottom-right"
           style={styles.secondaryNav}
-          valueLink={{
-            value: this.state.selectedIndex,
-            requestChange: this._handleUpdateSelectedIndex,
-          }}
+          value={this.state.activeRoute}
           width={styles.secondaryNav.width}
           zDepth={0}>
           {this.props.menuItems.map((item, index) => {
-            return (<MenuItem
-              key={index}
-              onTouchTap={() => { this.history.pushState(null, item.route); }}
-              primaryText={item.text}
-              value={item.route}
-            />);
+            return (
+              <MenuItem
+                key={index}
+                primaryText={item.text}
+                value={item.route}
+              />
+            );
           })}
         </Menu>
       </div>
     );
   },
 
-  _handleUpdateSelectedIndex(e, index) {
-    this.setState({
-      selectedIndex: index,
-    });
-  },
-
 });
 
 export default PageWithNav;