Merge pull request #464 from BobertForever/css-in-js

Merge from master and React 0.13/ES6 changes
mui · Mar 28, 2015 · 24db37b · 24db37b
2 parents 37cfb38 + 32c32b9
commit 24db37b
Show file tree

Hide file tree

Showing 27 changed files with 438 additions and 336 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,37 @@
+## 0.7.2
+###### _Mar. 25, 2015_
+
+##### General
+- Updated react-draggable2 dependency (#391)
+- Updated react and peer dependecies to React v0.13 (#452)
+
+##### Components
+- Date Picker 
+  - Added `onShow` and `onDismiss` props (#399)
+- Dialog 
+  - Fixed scrolling issue when opened immediately (#406)
+  - `onShow` is now called when opened immediately (#453)
+- Flat Button
+  - Disabled primary buttons use disabled styling over primary (#432) 
+- Floating Action Button
+  - Fixed zdepth to update when `disabled` prop changes (#390)
+  - Disabled secondary buttons use disabled styling over secondary (#432) 
+- Left Nav
+  - Scrolling is prevented when displayed (#406) 
+- Menu
+  - Menu and menu-related components have been moved into `js/menu/*` (#402)
+  - Added LinkMenuItem component (#402)
+- Menu Item
+  - Added `disable` prop (#402)
+- Overlay
+  - Now control scroll un/locking. (#406)
+- Paper 
+  - Added `innerStyle` prop (#418)
+- Raised Button
+  - Disabled primary buttons use disabled styling over primary (#432) 
+- Tabs
+  - Added `initialSelectedIndex` prop (#389)
+
 ## 0.7.1
 ###### _Mar. 4, 2015_
 

diff --git a/docs/src/app/components/app-left-nav.jsx b/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;
diff --git a/docs/src/app/components/code-example/code-block.jsx b/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;
diff --git a/docs/src/app/components/code-example/code-example.jsx b/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;
diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx
@@ -61,4 +61,4 @@ var ComponentDoc = React.createClass({
 
 });
 
-module.exports = ComponentDoc;
+module.exports = ComponentDoc;
diff --git a/docs/src/app/components/component-info.jsx b/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;
diff --git a/docs/src/app/components/master.jsx b/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;
diff --git a/docs/src/app/components/pages/components.jsx b/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;
diff --git a/docs/src/app/components/pages/components/buttons.jsx b/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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,4 +61,4 @@ var ComponentDoc = React.createClass({

		});

		module.exports = ComponentDoc;
		module.exports = ComponentDoc;