Update docs to use React 0.13 ES6 Classes and style

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

@@ -2,31 +2,33 @@ var React = require('react'),
  Router = require('react-router'),
  mui = require('mui'),
 
+ { MenuItem, LeftNav } = mui,
+
  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' }
+ { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
+ { type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
+ { type: MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
+ { type: MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
  ];
 
-var AppLeftNav = React.createClass({
-
- mixins: [Router.Navigation, Router.State],
+class AppLeftNav extends React.Component {
 
- getInitialState: function() {
- return {
- selectedIndex: null
- };
- },
+ constructor() {
+ super();
+ this.toggle = this.toggle.bind(this);
+ this._getSelectedIndex = this._getSelectedIndex.bind(this);
+ this._onLeftNavChange = this._onLeftNavChange.bind(this);
+ this._onHeaderClick = this._onHeaderClick.bind(this);
+ }
 
- render: function() {
+ render() {
  var header = <div className="logo" onClick={this._onHeaderClick}>material ui</div>;
 
  return (
- <mui.LeftNav 
+ <LeftNav 
  ref="leftNav"
  docked={false}
  isInitiallyOpen={false}
@@ -35,30 +37,36 @@ var AppLeftNav = React.createClass({
  selectedIndex={this._getSelectedIndex()}
  onChange={this._onLeftNavChange} />
  );
- },
+ }
 
- toggle: function() {
+ toggle() {
  this.refs.leftNav.toggle();
- },
+ }
 
- _getSelectedIndex: function() {
+ _getSelectedIndex() {
  var currentItem;
 
  for (var i = menuItems.length - 1; i >= 0; i--) {
  currentItem = menuItems[i];
- if (currentItem.route && this.isActive(currentItem.route)) return i;
- };
- },
+ if (currentItem.route && this.context.router.isActive(currentItem.route)) {
+ return i;
+ }
+ }
+ }
 
- _onLeftNavChange: function(e, key, payload) {
- this.transitionTo(payload.route);
- },
+ _onLeftNavChange(e, key, payload) {
+ this.context.router.transitionTo(payload.route);
+ }
 
- _onHeaderClick: function() {
- this.transitionTo('root');
+ _onHeaderClick() {
+ this.context.router.transitionTo('root');
  this.refs.leftNav.close();
  }
 
-});
+}
+
+AppLeftNav.contextTypes = {
+ router: React.PropTypes.func
+};
 
 module.exports = AppLeftNav;

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

@@ -1,24 +1,30 @@
 var React = require('react'),
  hljs = require('highlight.js');
 
-var CodeBlock = React.createClass({
+class CodeBlock extends React.Component {
 
- componentDidMount: function() {
- hljs.highlightBlock(this.getDOMNode());
- },
+ constructor() {
+ super();
+ this.componentDidMount = this.componentDidMount.bind(this);
+ this.componentDidUpdate = this.componentDidUpdate.bind(this);
+ }
+
+ componentDidMount() {
+ hljs.highlightBlock(React.findDOMNode(this));
+ }
 
- componentDidUpdate: function(prevProps, prevState) {
- hljs.highlightBlock(this.getDOMNode());
- },
+ componentDidUpdate(prevProps, prevState) {
+ hljs.highlightBlock(React.findDOMNode(this));
+ }
 
- render: function() {
+ render() {
  return (
  <pre className="code-block">
  <code>{this.props.children}</code>
  </pre>
  );
  }
 
-});
+}
 
 module.exports = CodeBlock;

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

@@ -1,14 +1,11 @@
 var React = require('react'),
  mui = require('mui'),
+ Paper = mui.Paper,
  CodeBlock = require('./code-block.jsx');
 
-var CodeExample = React.createClass({
+class CodeExample extends React.Component {
 
- propTypes: {
- code: React.PropTypes.string.isRequired
- },
-
- render: function() {
+ render() {
  return (
  <mui.Paper className="code-example">
  <div className="example-label">example</div>
@@ -20,6 +17,10 @@ var CodeExample = React.createClass({
  );
  }
 
-});
+}
+
+CodeExample.propTypes = {
+ code: React.PropTypes.string.isRequired
+};
 
-module.exports = CodeExample;
+module.exports = CodeExample;

docs/src/app/components/component-doc.jsx

@@ -61,4 +61,4 @@ var ComponentDoc = React.createClass({
 
 });
 
-module.exports = ComponentDoc;
+module.exports = ComponentDoc;

docs/src/app/components/component-info.jsx

@@ -1,13 +1,8 @@
 var React = require('react');
 
-var ComponentInfo = React.createClass({
+class ComponentInfo extends React.Component {
 
- propTypes: {
- name: React.PropTypes.string.isRequired,
- infoArray: React.PropTypes.array.isRequired
- },
-
- render: function() {
+ render() {
  var propElements = [],
  typesSpan;
 
@@ -38,6 +33,11 @@ var ComponentInfo = React.createClass({
  );
  }
 
-});
+}
+
+ComponentInfo.propTypes = {
+ name: React.PropTypes.string.isRequired,
+ infoArray: React.PropTypes.array.isRequired
+};
 
 module.exports = ComponentInfo;

docs/src/app/components/master.jsx

@@ -2,22 +2,23 @@ var React = require('react');
 var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
 var mui = require('mui');
-var AppBar = mui.AppBar;
-var AppCanvas = mui.AppCanvas;
-var Menu = mui.Menu;
-var IconButton = mui.IconButton;
 var AppLeftNav = require('./app-left-nav.jsx');
 
-var Master = React.createClass({
+var { AppBar, AppCanvas, Menu, IconButton } = mui;
 
- mixins: [Router.State],
+class Master extends React.Component {
 
- render: function() {
+ constructor() {
+ super();
+ this._onMenuIconButtonTouchTap = this._onMenuIconButtonTouchTap.bind(this);
+ }
+
+ render() {
+ var title =
+ this.context.router.isActive('get-started') ? 'Get Started' :
+ this.context.router.isActive('css-framework') ? 'Css Framework' :
+ this.context.router.isActive('components') ? 'Components' : '';
 
- var title = 
- this.isActive('get-started') ? 'Get Started' :
- this.isActive('css-framework') ? 'Css Framework' :
- this.isActive('components') ? 'Components' : '';
  var githubButton = (
  <IconButton
  className="github-icon-button"
@@ -43,20 +44,24 @@ var Master = React.createClass({
 
  <div className="footer full-width-section mui-dark-theme">
  <p>
- Hand crafted with love by the engineers at <a href="http://call-em-all.com">Call-Em-All</a> and our 
+ 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>
  {githubButton}
  </div>
 
  </AppCanvas>
  );
- },
+ }
 
- _onMenuIconButtonTouchTap: function() {
+ _onMenuIconButtonTouchTap() {
  this.refs.leftNav.toggle();
  }
-
-});
 
-module.exports = Master;
+}
+
+Master.contextTypes = {
+ router: React.PropTypes.func
+};
+
+module.exports = Master;

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

@@ -1,9 +1,9 @@
 var React = require('react');
 var PageWithNav = require('./page-with-nav.jsx');
 
-var Components = React.createClass({
+class Components extends React.Component {
 
- render: function() {
+ render() {
  var menuItems = [
  { route: 'buttons', text: 'Buttons'},
  { route: 'date-picker', text: 'Date Picker'},
@@ -27,6 +27,6 @@ var Components = React.createClass({
  );
  }
 
-});
+}
 
-module.exports = Components;
+module.exports = Components;

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

@@ -1,24 +1,21 @@
 var React = require('react');
 var mui = require('mui');
-var FlatButton = mui.FlatButton;
-var FloatingActionButton = mui.FloatingActionButton;
-var RaisedButton = mui.RaisedButton;
-var FontIcon = mui.FontIcon;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var ButtonPage = React.createClass({
+var {FlatButton, FloatingActionButton, RaisedButton, FontIcon} = mui;
 
+class ButtonPage extends React.Component {
 
  /** Styles */
- _buttonLabel: function() {
+ _buttonLabel() {
  return {
  padding: '0px 16px 0px 8px',
  }
- },
+ }
 
- render: function() {
+ render() {
 
- var code = 
+ var code =
  '//Flat Buttons\n' +
  '<FlatButton label="Default" />\n' +
  '<FlatButton label="Primary" primary={true} />\n' +
@@ -34,7 +31,7 @@ var ButtonPage = React.createClass({
  ' </FlatButton>\n' +
  '</div>\n' +
  '<FlatButton label="Disabled" disabled={true} />\n\n' +
- '//Raised Buttons\n' + 
+ '//Raised Buttons\n' +
  '<RaisedButton label="Default" />\n' +
  '<RaisedButton label="Primary" primary={true} />\n' +
  '<RaisedButton label="Secondary" secondary={true} />\n' +
@@ -144,8 +141,8 @@ var ButtonPage = React.createClass({
  {
  name: 'iconClassName',
  type: 'string',
- header: 'optional', 
- desc: 'The icon within the FloatingActionButton is a FontIcon component. This property ' + 
+ header: 'optional',
+ desc: 'The icon within the FloatingActionButton is a FontIcon component. This property ' +
  'is the classname of the icon to be displayed inside the button. An alternative ' +
  'to adding an iconClassName would be to manually insert a FontIcon component or ' +
  'custom SvgIcon component or as a child of FloatingActionButton.'
@@ -274,6 +271,6 @@ var ButtonPage = React.createClass({
  );
  }
 
-});
+}
 
-module.exports = ButtonPage;
+module.exports = ButtonPage;