React router

docs/package.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "backbone": "^1.1.2",
-    "flux": "^2.0.1",
     "jquery": "^2.1.1",
     "react": "^0.12",
     "react-router": "^0.10.2"

docs/src/app/app-routes.jsx

@@ -0,0 +1,71 @@
+/**
+ * @jsx React.DOM
+ */
+
+var React = require('react'), 
+  Router = require('react-router'),
+  Route = Router.Route,
+  Routes = Router.Routes,
+  Redirect = Router.Redirect,
+  DefaultRoute = Router.DefaultRoute,
+
+  Master = require('./components/master.jsx'),
+	Home = require('./components/pages/home.jsx'),
+	GetStarted = require('./components/pages/get-started.jsx'),
+  PageWithNav = require('./components/pages/page-with-nav.jsx'),
+
+  Colors = require('./components/pages/css-framework/colors.jsx'),
+  Typography = require('./components/pages/css-framework/typography.jsx'),
+
+  Buttons = require('./components/pages/components/buttons.jsx'),
+  Dialog = require('./components/pages/components/dialog.jsx'),
+  Icons = require('./components/pages/components/icons.jsx'),
+  Inputs = require('./components/pages/components/inputs.jsx'),
+  Menus = require('./components/pages/components/menus.jsx'),
+  Switches = require('./components/pages/components/switches.jsx'),
+  Toolbars = require('./components/pages/components/toolbars.jsx'),
+
+  cssFrameworkMenuItems = [
+    { route: 'colors', text: 'Colors'},
+    { route: 'typography', text: 'Typography'}
+  ],
+
+  componentsMenuItems = [
+    { route: 'buttons', text: 'Buttons'},
+    { route: 'dialog', text: 'Dialog'},
+    { route: 'icons', text: 'Icons'},
+    { route: 'inputs', text: 'Inputs'},
+    { route: 'menus', text: 'Menus'},
+    { route: 'switches', text: 'Switches'},
+    //{ route: 'toasts', text: 'Toasts'},
+    { route: 'toolbars', text: 'Toolbars'},
+  ];
+
+var AppRoutes = (
+  <Routes scrollBehavior="scrollToTop">
+    <Route name="root" path="/" handler={Master}>
+    	<Route name="home" handler={Home} />
+    	<Route name="get-started" handler={GetStarted} pageTitle="Get Started" />
+      <Route name="css-framework" handler={PageWithNav} menuItems={cssFrameworkMenuItems} pageTitle="Css Framework">
+        <Route name="colors" handler={Colors} />
+        <Route name="typography" handler={Typography} />
+        <Redirect from="/css-framework" to="colors" />
+      </Route>
+
+      <Route name="components" handler={PageWithNav} menuItems={componentsMenuItems} pageTitle="Components">
+        <Route name="buttons" handler={Buttons} />
+        <Route name="dialog" handler={Dialog} />
+        <Route name="icons" handler={Icons} />
+        <Route name="inputs" handler={Inputs} />
+        <Route name="menus" handler={Menus} />
+        <Route name="switches" handler={Switches} />
+        <Route name="toolbars" handler={Toolbars} />
+        <Redirect from="/components" to="buttons" />
+      </Route>
+
+      <DefaultRoute handler={Home}/>
+    </Route>
+  </Routes>
+);
+
+module.exports = AppRoutes;

docs/src/app/app.jsx

@@ -7,19 +7,14 @@
 	var $ = require('jquery'),
 	  Backbone = require('backbone'),
 	  React = require('react'),
-	  AppRouter = require('./app-router.js'),
-	  MasterComponent = require('./components/master.jsx');
+	  AppRoutes = require('./app-routes.jsx');
 
 	Backbone.$ = $;
 
 	//Needed for React Developer Tools
 	window.React = React;
 
 	//Render the main app component
-	React.render(<MasterComponent />, document.body);
-
-	Backbone.history.start();
+	React.render(AppRoutes, document.body);
 
 })();
-
-

docs/src/app/components/app-left-nav.jsx

@@ -3,38 +3,27 @@
  */
 
 var React = require('react'),
+  Router = require('react-router'),
   mui = require('mui'),
-  Dispatcher = require('../app-dispatcher.js'),
-  Pages = require('./pages.jsx');
+
+  menuItems = [
+    { route: 'get-started', text: 'Get Started' },
+    { route: 'css-framework', text: 'CSS Framework' },
+    { route: 'components', text: 'Components' },
+    { type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
+    { type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
+    { type: mui.MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
+    { type: mui.MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
+  ];
 
 var AppLeftNav = React.createClass({
 
-  propTypes: {
-    url: React.PropTypes.string,
-    toggle: React.PropTypes.func
-  },
+  mixins: [Router.Navigation, Router.ActiveState],
 
   getInitialState: function() {
     return {
-      menuItems: [
-
-        { payload: Pages.getStarted, text: Pages.getStarted.title },
-        { payload: Pages.cssFramework, text: Pages.cssFramework.title },
-        { payload: Pages.components, text: Pages.components.title },
-        { type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
-        { type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
-        { type: mui.MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
-        { type: mui.MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
-      ]
-    }
-  },
-
-  componentWillMount: function() {
-    this._setSelectedIndex(this.props.url);
-  },
-
-  componentWillReceiveProps: function(newProps) {
-    this._setSelectedIndex(newProps.url);
+      selectedIndex: null
+    };
   },
 
   render: function() {
@@ -45,8 +34,8 @@ var AppLeftNav = React.createClass({
         ref="leftNav"
         isInitiallyOpen={false}
         header={header}
-        menuItems={this.state.menuItems}
-        selectedIndex={this.state.selectedIndex}
+        menuItems={menuItems}
+        selectedIndex={this._getSelectedIndex()}
         onChange={this._onLeftNavChange} />
     );
   },
@@ -55,31 +44,22 @@ var AppLeftNav = React.createClass({
     this.refs.leftNav.toggle();
   },
 
-  _setSelectedIndex: function(url) {
-    var item;
-
-    for (var i = 0; i < this.state.menuItems.length; i++) {
-      item = this.state.menuItems[i];
+  _getSelectedIndex: function() {
+    var currentItem;
 
-      //only match the root part of the url
-      if (url && item.payload && item.payload.url.split('/')[0] === url.split('/')[0]) {
-        if (i !== this.state.selectedIndex) this.setState({ selectedIndex: i});
-        return;
-      }
+    for (var i = menuItems.length - 1; i >= 0; i--) {
+      currentItem = menuItems[i];
+      if (currentItem.route && this.isActive(currentItem.route)) return i;
     };
-
-    this.setState({ selectedIndex: null});
   },
 
-  _onHeaderClick: function() {
-    if (this.props.url !== Pages.home.url) {
-      this.refs.leftNav.close();
-      Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: Pages.home.url } ); 
-    }
+  _onLeftNavChange: function(e, key, payload) {
+    this.transitionTo(payload.route);
   },
 
-  _onLeftNavChange: function(e, key, item) {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: item.payload.url } ); 
+  _onHeaderClick: function() {
+    this.transitionTo('root');
+    this.refs.leftNav.close();
   }
 
 });

docs/src/app/components/master.jsx

@@ -2,78 +2,28 @@
  * @jsx React.DOM
  */
 
-var Backbone = require('backbone'),
-  React = require('react'),
-  Dispatcher = require('../app-dispatcher.js'),
+var React = require('react'),
   mui = require('mui'),
   Menu = mui.Menu,
   Icon = mui.Icon,
-  AppStateStore = require('../stores/app-state-store.js'),
-  Pages = require('./pages.jsx'),
-	AppLeftNav = require('./app-left-nav.jsx');
+  AppLeftNav = require('./app-left-nav.jsx');
 
 var Master = React.createClass({
 
-  mixins: [Backbone.Events],
-
-  getInitialState: function() {
-    return {
-      currentUrl: AppStateStore.get('currentUrl')
-    }
-  },
-
-  componentDidMount: function() {
-    this.listenTo(AppStateStore, 'change:currentUrl', this._onStoreChange);
-  },
-
-  componentWillUnMount: function() {
-    this.stopListening();
-  },
-
   render: function() {
-    var page = Pages.getPage(this.state.currentUrl),
-      title = page.title,
-      currentMainComponent = page.mainContentComponent,
-      contentCanvasClass = page.subPages ? 'mui-app-content-canvas with-nav' : 'mui-app-content-canvas',
-      subNav;
-
-    if (page.subPages) {
-      var menuItems = [],
-        i = 0,
-        selectedIndex,
-        currentSubPage;
-
-      for (prop in page.subPages) {
-        currentSubPage = page.subPages[prop];
-
-        if (this.state.currentUrl === currentSubPage.url) {
-          selectedIndex = i;
-          currentMainComponent = currentSubPage.mainContentComponent;
-        }
-        menuItems.push({ payload: currentSubPage.url, text: currentSubPage.title });
-        i++;
-      }
-
-      subNav = (
-        <div className="subNav">
-          <Menu ref="menuItems" zDepth={0} menuItems={menuItems} selectedIndex={selectedIndex} onItemClick={this._onMenuItemClick} />
-        </div>
-      );
-    }
-
     return (
       <mui.AppCanvas predefinedLayout={1}>
-        <mui.AppBar onMenuIconClick={this._onMenuIconClick} title={title} zDepth={0}><Icon icon="github" onClick={this._onGithubClick} /></mui.AppBar>
-    		<AppLeftNav ref="leftNav" url={this.state.currentUrl} />
-    		<div className={contentCanvasClass}>
-          {subNav}
-          <div className="subContent">
-            {currentMainComponent}
-          </div>
-        </div>
+        <mui.AppBar onMenuIconClick={this._onMenuIconClick} title={this.props.activeRouteHandler().props.pageTitle} zDepth={0}>
+          <Icon icon="github" onClick={this._onGithubClick} />
+        </mui.AppBar>
+        <AppLeftNav ref="leftNav" />
+        <this.props.activeRouteHandler />
         <div className="footer">
             <Icon icon="github" onClick={this._onGithubClick} />
-            <p>Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our awesome <a href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.</p>
+            <p>
+              Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our 
+              awesome <a href="https://github.com/callemall/material-ui/graphs/contributors">contributors</a>.
+            </p>
         </div>
       </mui.AppCanvas>
     );
@@ -83,18 +33,8 @@ var Master = React.createClass({
     document.location.href='https://github.com/callemall/material-ui';
   },
 
-  _onMenuItemClick: function(e, key, item) {
-    Dispatcher.dispatchAction(Dispatcher.ActionTypes.NAV_USER_CLICK, { url: item.payload } ); 
-  },
-
   _onMenuIconClick: function() {
     this.refs.leftNav.toggle();
-  },
-
-  _onStoreChange: function() {
-    this.setState({
-      currentUrl: AppStateStore.get('currentUrl')
-    });
   }
 
 });