Merge pull request #1751 from oliviertassinari/react-v0.14

React v0.14

docs/package.json

@@ -16,6 +16,8 @@
  },
  "devDependencies": {
  "raw-loader": "^0.5.1",
+ "react": "^0.14.0-rc1",
+ "react-addons-linked-state-mixin": "^0.14.0-rc1",
  "webpack": "^1.11.0",
  "webpack-dev-server": "^1.10.1"
  }

docs/src/app/app-routes.jsx

@@ -1,48 +1,49 @@
-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 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
@@ -54,52 +55,52 @@ let Toolbars = require('./components/pages/components/toolbars');
  * 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" />
+const AppRoutes = (
+ <Route path="/" component={Master}>
+ <Route path="home" component={Home} />
+ <Route path="get-started" component={GetStarted}>
+ <Route path="prerequisites" component={Prerequisites} />
+ <Route path="installation" component={Installation} />
+ <Route path="examples" component={Examples} />
+ <Redirect from="/get-started" to="/prerequisites" />
  </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" />
+ <Route path="customization" component={Customization}>
+ <Route path="colors" component={Colors} />
+ <Route path="themes" component={Themes} />
+ <Route path="inline-styles" component={InlineStyles} />
+ <Redirect from="/customization" to="/themes" />
  </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="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" />
+ <Route name="components" component={Components}>
+ <Route name="appbar" component={AppBar} />
+ <Route name="avatars" component={Avatars} />
+ <Route name="buttons" component={Buttons} />
+ <Route name="cards" component={Cards} />
+ <Route name="date-picker" component={DatePicker} />
+ <Route name="dialog" component={Dialog} />
+ <Route name="dropdown-menu" component={DropDownMenu} />
+ <Route name="icons" component={Icons} />
+ <Route name="icon-buttons" component={IconButtons} />
+ <Route name="icon-menus" component={IconMenus} />
+ <Route name="left-nav" component={LeftNav} />
+ <Route name="lists" component={Lists} />
+ <Route name="menus" component={Menus} />
+ <Route name="paper" component={Paper} />
+ <Route name="progress" component={Progress} />
+ <Route name="refresh-indicator" component={RefreshIndicator} />
+ <Route name="sliders" component={Sliders} />
+ <Route name="switches" component={Switches} />
+ <Route name="snackbar" component={Snackbar} />
+ <Route name="table" component={Table} />
+ <Route name="tabs" component={Tabs} />
+ <Route name="text-fields" component={TextFields} />
+ <Route name="time-picker" component={TimePicker} />
+ <Route name="toolbars" component={Toolbars} />
+ <Redirect from="/components" to="/appbar" />
  </Route>
 
- <DefaultRoute handler={Home}/>
+ <IndexRoute component={Home}/>
  </Route>
 );
 

docs/src/app/app.jsx

@@ -1,33 +1,22 @@
-(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");
 
- 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>
+ {AppRoutes}
+</Router>, document.getElementById('app'));

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

@@ -67,7 +67,7 @@ class AppLeftNav extends React.Component {
 
  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;
  }
  }
 

docs/src/app/components/master.jsx

@@ -15,7 +15,6 @@ const { AppBar,
  Tabs,
  Paper} = require('material-ui');
 
-const RouteHandler = Router.RouteHandler;
 const { Colors, Spacing, Typography } = Styles;
 const ThemeManager = Styles.ThemeManager;
 const DefaultRawTheme = Styles.LightRawTheme;
@@ -94,9 +93,9 @@ const Master = React.createClass({
  render() {
  let styles = this.getStyles();
  let title =
- this.context.router.isActive('get-started') ? 'Get Started' :
- this.context.router.isActive('customization') ? 'Customization' :
- this.context.router.isActive('components') ? 'Components' : '';
+ this.props.history.isActive('get-started') ? 'Get Started' :
+ this.props.history.isActive('customization') ? 'Customization' :
+ this.props.history.isActive('components') ? 'Components' : '';
 
  let githubButton = (
  <IconButton
@@ -120,8 +119,8 @@ const Master = React.createClass({
  {githubButton}
  {this.state.renderTabs ? this._getTabs(): this._getAppBar()}
 
- <RouteHandler />
- <AppLeftNav ref="leftNav" />
+ {this.props.children}
+ <AppLeftNav ref="leftNav" history={this.props.history} />
  <FullWidthSection style={styles.footer}>
  <p style={styles.p}>
  Hand crafted with love by the engineers at <a style={styles.a} href="http://call-em-all.com">Call-Em-All</a> and our
@@ -222,21 +221,21 @@ const Master = React.createClass({
  },
 
  _getSelectedIndex() {
- return this.context.router.isActive('get-started') ? '1' :
- this.context.router.isActive('customization') ? '2' :
- this.context.router.isActive('components') ? '3' : '0';
+ return this.props.history.isActive('get-started') ? '1' :
+ this.props.history.isActive('customization') ? '2' :
+ this.props.history.isActive('components') ? '3' : '0';
  },
 
  _handleTabChange(value, e, tab) {
- this.context.router.transitionTo(tab.props.route);
+ this.props.history.transitionTo(tab.props.route);
  this.setState({tabIndex: this._getSelectedIndex()});
  },
 
  _getAppBar() {
  let title =
- this.context.router.isActive('get-started') ? 'Get Started' :
- this.context.router.isActive('customization') ? 'Customization' :
- this.context.router.isActive('components') ? 'Components' : '';
+ this.props.history.isActive('get-started') ? 'Get Started' :
+ this.props.history.isActive('customization') ? 'Customization' :
+ this.props.history.isActive('components') ? 'Components' : '';
 
  let githubButton = (
  <IconButton

docs/src/app/components/pages/components/menus.jsx

@@ -1,5 +1,5 @@
-let React = require('react/addons');
-let ReactTransitionGroup = React.addons.TransitionGroup;
+let React = require('react');
+const ReactTransitionGroup = require('react-addons-transition-group');
 let Menu = require('menus/menu');
 let MenuItem = require('menus/menu-item');
 let MenuDivider = require('menus/menu-divider');

docs/src/app/components/pages/components/text-fields.jsx

@@ -1,14 +1,15 @@
-let React = require('react/addons');
+let React = require('react');
 let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
 let { Colors } = Styles;
 let { StyleResizable } = Mixins;
 let Code = require('text-fields-code');
 let CodeExample = require('../../code-example/code-example');
+const LinkedStateMixin = require('react-addons-linked-state-mixin');
 
 let TextFieldsPage = React.createClass({
 
- mixins: [StyleResizable, React.addons.LinkedStateMixin],
+ mixins: [StyleResizable, LinkedStateMixin],
 
  getInitialState() {
  return {

examples/browserify-gulp-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
- let React = require('react/addons');
+ let React = require('react');
  let injectTapEventPlugin = require('react-tap-event-plugin');
  let Main = require('./components/main.jsx'); // Our custom react component
 

examples/webpack-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
- let React = require('react/addons');
+ let React = require('react');
  let injectTapEventPlugin = require('react-tap-event-plugin');
  let Main = require('./components/main.jsx'); // Our custom react component
 

package.json

@@ -33,8 +33,13 @@
  "react-draggable2": "^0.5.1"
  },
  "peerDependencies": {
- "react": ">=0.13",
- "react-tap-event-plugin": "^0.1.3"
+ "react": ">=0.14.0-rc1",
+ "react-dom": ">=0.14.0-rc1",
+ "react-tap-event-plugin": "^0.2.0",
+ "react-addons-transition-group": "^0.14.0-rc1",
+ "react-addons-update": "^0.14.0-rc1",
+ "react-addons-create-fragment": "^0.14.0-rc1",
+ "react-addons-pure-render-mixin": "^0.14.0-rc1"
  },
  "devDependencies": {
  "babel": "^5.4.3",
@@ -61,9 +66,7 @@
  "mocha": "^2.2.5",
  "phantomjs": "^1.9.17",
  "react-hot-loader": "^1.2.8",
- "react-router": "^0.13.3",
- "react-stub-context": "^0.3.0",
- "react-tap-event-plugin": "^0.1.6",
+ "react-router": "^1.0.0-rc1",
  "sinon": "^1.15.4",
  "sinon-chai": "^2.8.0",
  "transfer-webpack-plugin": "^0.1.4",

src/avatar.jsx

@@ -1,4 +1,4 @@
-const React = require('react/addons');
+const React = require('react');
 const StylePropable = require('./mixins/style-propable');
 const Colors = require('./styles/colors');
 const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme');

src/buttons/flat-button-label.jsx

@@ -1,4 +1,4 @@
-const React = require('react/addons');
+const React = require('react');
 const ContextPure = require('../mixins/context-pure');
 const Styles = require('../utils/styles');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');