React 0.14 support

docs/package.json

@@ -13,10 +13,19 @@
     "prd": "webpack-dev-server --config webpack-production.config.js --progress --colors --profile"
   },
   "dependencies": {
-    "codemirror": "^5.5.0"
+    "codemirror": "^5.5.0",
+    "history": "^1.11.1",
+    "react-addons-create-fragment": "^0.14.0",
+    "react-addons-pure-render-mixin": "^0.14.0",
+    "react-addons-transition-group": "^0.14.0",
+    "react-addons-update": "^0.14.0",
+    "react-dom": "^0.14.0",
+    "react-tap-event-plugin": "^0.2.0"
   },
   "devDependencies": {
     "raw-loader": "^0.5.1",
+    "react": "^0.14.0",
+    "react-addons-linked-state-mixin": "^0.14.0",
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   }

docs/src/app/app-routes.jsx

@@ -1,107 +1,106 @@
-let React = require('react');
-let Router = require('react-router');
-let Route = Router.Route;
-let Redirect = Router.Redirect;
-let DefaultRoute = Router.DefaultRoute;
+const React = require('react');
+const {
+  Route,
+  Redirect,
+  IndexRoute,
+} = require('react-router');
 
 // Here we define all our material-ui ReactComponents.
-let Master = require('./components/master');
-let Home = require('./components/pages/home');
+const Master = require('./components/master');
+const Home = require('./components/pages/home');
 
-let GetStarted = require('./components/pages/get-started');
-let Prerequisites = require('./components/pages/get-started/prerequisites');
-let Installation = require('./components/pages/get-started/installation');
-let Examples = require('./components/pages/get-started/examples');
+const GetStarted = require('./components/pages/get-started');
+const Prerequisites = require('./components/pages/get-started/prerequisites');
+const Installation = require('./components/pages/get-started/installation');
+const Examples = require('./components/pages/get-started/examples');
 
-let Customization = require('./components/pages/customization');
-let Colors = require('./components/pages/customization/colors');
-let Themes = require('./components/pages/customization/themes');
-let InlineStyles = require('./components/pages/customization/inline-styles');
+const Customization = require('./components/pages/customization');
+const Colors = require('./components/pages/customization/colors');
+const Themes = require('./components/pages/customization/themes');
+const InlineStyles = require('./components/pages/customization/inline-styles');
 
-let Components = require('./components/pages/components');
-let AppBar = require('./components/pages/components/app-bar');
-let Avatars = require('./components/pages/components/avatars');
-let Buttons = require('./components/pages/components/buttons');
-let Cards = require('./components/pages/components/cards');
-let DatePicker = require('./components/pages/components/date-picker');
-let Dialog = require('./components/pages/components/dialog');
-let DropDownMenu = require('./components/pages/components/drop-down-menu');
-let GridList = require('./components/pages/components/grid-list');
-let Icons = require('./components/pages/components/icons');
-let IconButtons = require('./components/pages/components/icon-buttons');
-let IconMenus = require('./components/pages/components/icon-menus');
-let LeftNav = require('./components/pages/components/left-nav');
-let Lists = require('./components/pages/components/lists');
-let Menus = require('./components/pages/components/menus');
-let Paper = require('./components/pages/components/paper');
-let Progress = require('./components/pages/components/progress');
-let RefreshIndicator = require('./components/pages/components/refresh-indicator');
-let Sliders = require('./components/pages/components/sliders');
-let Snackbar = require('./components/pages/components/snackbar');
-let Switches = require('./components/pages/components/switches');
-let Table = require('./components/pages/components/table');
-let Tabs = require('./components/pages/components/tabs');
-let TextFields = require('./components/pages/components/text-fields');
-let TimePicker = require('./components/pages/components/time-picker');
-let Toolbars = require('./components/pages/components/toolbars');
+const Components = require('./components/pages/components');
+const AppBar = require('./components/pages/components/app-bar');
+const Avatars = require('./components/pages/components/avatars');
+const Buttons = require('./components/pages/components/buttons');
+const Cards = require('./components/pages/components/cards');
+const DatePicker = require('./components/pages/components/date-picker');
+const Dialog = require('./components/pages/components/dialog');
+const DropDownMenu = require('./components/pages/components/drop-down-menu');
+const Icons = require('./components/pages/components/icons');
+const IconButtons = require('./components/pages/components/icon-buttons');
+const IconMenus = require('./components/pages/components/icon-menus');
+const LeftNav = require('./components/pages/components/left-nav');
+const Lists = require('./components/pages/components/lists');
+const Menus = require('./components/pages/components/menus');
+const Paper = require('./components/pages/components/paper');
+const Progress = require('./components/pages/components/progress');
+const RefreshIndicator = require('./components/pages/components/refresh-indicator');
+const Sliders = require('./components/pages/components/sliders');
+const Snackbar = require('./components/pages/components/snackbar');
+const Switches = require('./components/pages/components/switches');
+const Table = require('./components/pages/components/table');
+const Tabs = require('./components/pages/components/tabs');
+const TextFields = require('./components/pages/components/text-fields');
+const TimePicker = require('./components/pages/components/time-picker');
+const Toolbars = require('./components/pages/components/toolbars');
 
 
-/** Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
-  *
-  * Routes are used to declare your view hierarchy.
-  *
-  * Say you go to http://material-ui.com/#/components/paper
-  * The react router will search for a route named 'paper' and will recursively render its
-  * handler and its parent handler like so: Paper > Components > Master
-  */
-
-let AppRoutes = (
-  <Route name="root" path="/" handler={Master}>
-    <Route name="home" handler={Home} />
-    <Route name="get-started" handler={GetStarted}>
-      <Route name="prerequisites" handler={Prerequisites} />
-      <Route name="installation" handler={Installation} />
-      <Route name="examples" handler={Examples} />
-      <Redirect from="/get-started" to="prerequisites" />
+/**
+ * Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md
+ *
+ * Routes are used to declare your view hierarchy.
+ *
+ * Say you go to http://material-ui.com/#/components/paper
+ * The react router will search for a route named 'paper' and will recursively render its
+ * handler and its parent handler like so: Paper > Components > Master
+ */
+const AppRoutes = (
+  <Route path="/" component={Master}>
+    <Route path="home" component={Home} />
+    <Redirect from="get-started" to="/get-started/prerequisites" />
+    <Route path="get-started" component={GetStarted}>
+      <Route path="prerequisites" component={Prerequisites} />
+      <Route path="installation" component={Installation} />
+      <Route path="examples" component={Examples} />
     </Route>
 
-    <Route name="customization" handler={Customization}>
-      <Route name="colors" handler={Colors} />
-      <Route name="themes" handler={Themes} />
-      <Route name="inline-styles" handler={InlineStyles} />
-      <Redirect from="/customization" to="themes" />
+    <Redirect from="customization" to="/customization/themes" />
+    <Route path="customization" component={Customization}>
+      <Route path="colors" component={Colors} />
+      <Route path="themes" component={Themes} />
+      <Route path="inline-styles" component={InlineStyles} />
     </Route>
 
-    <Route name="components" handler={Components}>
-      <Route name="appbar" handler={AppBar} />
-      <Route name="avatars" handler={Avatars} />
-      <Route name="buttons" handler={Buttons} />
-      <Route name="cards" handler={Cards} />
-      <Route name="date-picker" handler={DatePicker} />
-      <Route name="dialog" handler={Dialog} />
-      <Route name="dropdown-menu" handler={DropDownMenu} />
-      <Route name="grid-list" handler={GridList} />
-      <Route name="icons" handler={Icons} />
-      <Route name="icon-buttons" handler={IconButtons} />
-      <Route name="icon-menus" handler={IconMenus} />
-      <Route name="left-nav" handler={LeftNav} />
-      <Route name="lists" handler={Lists} />
-      <Route name="menus" handler={Menus} />
-      <Route name="paper" handler={Paper} />
-      <Route name="progress" handler={Progress} />
-      <Route name="refresh-indicator" handler={RefreshIndicator} />
-      <Route name="sliders" handler={Sliders} />
-      <Route name="switches" handler={Switches} />
-      <Route name="snackbar" handler={Snackbar} />
-      <Route name="table" handler={Table} />
-      <Route name="tabs" handler={Tabs} />
-      <Route name="text-fields" handler={TextFields} />
-      <Route name="time-picker" handler={TimePicker} />
-      <Route name="toolbars" handler={Toolbars} />
-      <Redirect from="/components" to="appbar" />
+    <Redirect from="components" to="/components/appbar" />
+    <Route path="components" component={Components}>
+      <Route path="appbar" component={AppBar} />
+      <Route path="avatars" component={Avatars} />
+      <Route path="buttons" component={Buttons} />
+      <Route path="cards" component={Cards} />
+      <Route path="date-picker" component={DatePicker} />
+      <Route path="dialog" component={Dialog} />
+      <Route path="dropdown-menu" component={DropDownMenu} />
+      <Route path="icons" component={Icons} />
+      <Route path="icon-buttons" component={IconButtons} />
+      <Route path="icon-menus" component={IconMenus} />
+      <Route path="left-nav" component={LeftNav} />
+      <Route path="lists" component={Lists} />
+      <Route path="menus" component={Menus} />
+      <Route path="paper" component={Paper} />
+      <Route path="progress" component={Progress} />
+      <Route path="refresh-indicator" component={RefreshIndicator} />
+      <Route path="sliders" component={Sliders} />
+      <Route path="switches" component={Switches} />
+      <Route path="snackbar" component={Snackbar} />
+      <Route path="table" component={Table} />
+      <Route path="tabs" component={Tabs} />
+      <Route path="text-fields" component={TextFields} />
+      <Route path="time-picker" component={TimePicker} />
+      <Route path="toolbars" component={Toolbars} />
     </Route>
 
-    <DefaultRoute handler={Home}/>
+    <IndexRoute component={Home}/>
   </Route>
 );
 

docs/src/app/app.jsx

@@ -1,33 +1,23 @@
-(function () {
+const React = require('react');
+const ReactDOM = require('react-dom');
+const {Router} = require('react-router');
+const AppRoutes = require('./app-routes.jsx');
+const injectTapEventPlugin = require('react-tap-event-plugin');
+const createHistory = require('history/lib/createHashHistory');
 
-  let React = require('react'),
-    Router = require('react-router'),
-    AppRoutes = require('./app-routes.jsx'),
-    injectTapEventPlugin = require("react-tap-event-plugin");
+//Needed for React Developer Tools
+window.React = React;
 
-  //Needed for React Developer Tools
-  window.React = React;
+//Needed for onTouchTap
+//Can go away when react 1.0 release
+//Check this repo:
+//https://github.com/zilverline/react-tap-event-plugin
+injectTapEventPlugin();
 
-  //Needed for onTouchTap
-  //Can go away when react 1.0 release
-  //Check this repo:
-  //https://github.com/zilverline/react-tap-event-plugin
-  injectTapEventPlugin();
-
-  /** Render the main app component. You can read more about the react-router here:
-    *  https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
-    */
-  Router
-    // Runs the router, similiar to the Router.run method. You can think of it as an
-    // initializer/constructor method.
-    .create({
-      routes: AppRoutes,
-      scrollBehavior: Router.ScrollToTopBehavior
-    })
-    // This is our callback function, whenever the url changes it will be called again.
-    // Handler: The ReactComponent class that will be rendered
-    .run(function (Handler) {
-      React.render(<Handler/>, document.getElementById('app'));
-    });
-
-})();
+/**
+ * Render the main app component. You can read more about the react-router here:
+ * https://github.com/rackt/react-router/blob/master/docs/guides/overview.md
+ */
+ReactDOM.render(<Router history={createHistory({queryKey: false})}>
+  {AppRoutes}
+</Router>, document.getElementById('app'));

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

@@ -66,18 +66,19 @@ let AppLeftNav = React.createClass({
 
     for (let i = menuItems.length - 1; i >= 0; i--) {
       currentItem = menuItems[i];
-      if (currentItem.route && this.context.router.isActive(currentItem.route)) return i;
+      if (currentItem.route && this.props.history.isActive(currentItem.route)) return i;
     }
   },
 
   _onLeftNavChange(e, key, payload) {
-    this.context.router.transitionTo(payload.route);
+    this.props.history.pushState(null, payload.route);
   },
 
   _onHeaderClick() {
-    this.context.router.transitionTo('root');
+    this.props.history.pushState(null, '/');
     this.refs.leftNav.close();
   },
+
 });
 
 module.exports = AppLeftNav;

docs/src/app/components/code-example/code-block.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const ReactDOM = require('react-dom');
 const { Styles } = require('material-ui');
 const { Spacing } = Styles;
 
@@ -32,7 +33,7 @@ const CodeBlock = React.createClass({
   },
 
   componentDidMount() {
-    var code = React.findDOMNode(this.refs.code);
+    var code = ReactDOM.findDOMNode(this.refs.code);
     require([
       "codemirror/lib/codemirror.js",
       "codemirror/mode/htmlmixed/htmlmixed.js",