{this.props.children}
@@ -19,6 +25,6 @@ var CodeBlock = React.createClass({
);
}
-});
+}
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
index 337f733f54c6ab..205332fe402cef 100644
--- 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 (
example
@@ -20,6 +17,10 @@ var CodeExample = React.createClass({
);
}
-});
+}
+
+CodeExample.propTypes = {
+ code: React.PropTypes.string.isRequired
+};
-module.exports = CodeExample;
\ No newline at end of file
+module.exports = CodeExample;
diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx
index 3049278a697d83..70c07c93c97b8f 100644
--- 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;
\ No newline at end of file
+module.exports = ComponentDoc;
diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx
index a730a0740038e0..a534bad2f3c655 100644
--- 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
index e4f6631b2c3097..15a96901ed5a88 100644
--- 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 = (
- Hand crafted with love by the engineers at Call-Em-All and our + Hand crafted with love by the engineers at Call-Em-All and our awesome contributors.
{githubButton} @@ -51,12 +52,16 @@ var Master = React.createClass({ ); - }, + } - _onMenuIconButtonTouchTap: function() { + _onMenuIconButtonTouchTap() { this.refs.leftNav.toggle(); } - -}); -module.exports = Master; \ No newline at end of file +} + +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 index 311af3b6030f88..e2573bdd7a9d0a 100644 --- 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; \ No newline at end of file +module.exports = Components; diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index e956eb20b265c8..bf280e6d549e19 100644 --- 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' + '
- This component generates a button element and all props.
- Also, focus styles will happen on tab but not on click.
- There are three ways to add an icon:
-
-
-
-
- - For stylesheets: Set the prop "iconClassName" to the - classname for you icon. - -
- - For svg icons: Insert the svg component as a child of icon - buttons. This is the method we are using. - View our source to see how ActionGrade was created - using mui.SvgIcon. - -
- - Alternative: You can also insert a - FontIcon component as a child of IconButton. This is - similiar to how the iconClassName prop from method 1 is - handled. - -
+ This component generates a button element and all props.
+ Also, focus styles will happen on tab but not on click.
+ There are three ways to add an icon:
+
+
-
+
- + For stylesheets: Set the prop "iconClassName" to the + classname for you icon. + +
- + For svg icons: Insert the svg component as a child of icon + buttons. This is the method we are using. + View our source to see how ActionGrade was created + using mui.SvgIcon. + +
- + Alternative: You can also insert a + FontIcon component as a child of IconButton. This is + similiar to how the iconClassName prop from method 1 is + handled. + +
- This component will render any icon defined in any style sheets included in your - project. We are using Google's Material Design - Icons for our documentation site along with some custom icons. You can use - sites like IcoMoon for - generating custom font files. To use FontIcons, add your stylesheet to your project - and reference the icon's className in the "className" prop. -
; + var fontIconDesc = ( ++ This component will render any icon defined in any style sheets included in your + project. We are using Google's Material Design + Icons for our documentation site along with some custom icons. You can use + sites like IcoMoon for + generating custom font files. To use FontIcons, add your stylesheet to your project + and reference the icon's className in the "className" prop. +
+ ); - var svgIconDesc = -- Alternatively, it is possible to include svg icons using mui.SvgIcon to - create a custom svg component. Here we are creating the ActionHome - SvgIcon for this docs site, and using it in some seperate component. - Custom SvgIcon components can be included as children for other Material - UI components that use icons such as IconButtons. -
; + var svgIconDesc = ( ++ Alternatively, it is possible to include svg icons using mui.SvgIcon to + create a custom svg component. Here we are creating the ActionHome + SvgIcon for this docs site, and using it in some seperate component. + Custom SvgIcon components can be included as children for other Material + UI components that use icons such as IconButtons. +
+ ); var componentInfo = []; @@ -74,6 +76,6 @@ var FontIconPage = React.createClass({ ); } -}); +} -module.exports = FontIconPage; \ No newline at end of file +module.exports = FontIconPage; diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx index 50318c4d5f38a5..04ec7d13bcac51 100644 --- a/docs/src/app/components/pages/components/left-nav.jsx +++ b/docs/src/app/components/pages/components/left-nav.jsx @@ -5,15 +5,19 @@ var LeftNav = mui.LeftNav; var RaisedButton = mui.RaisedButton; var ComponentDoc = require('../../component-doc.jsx'); -var LeftNavPage = React.createClass({ +class LeftNavPage extends React.Component { - getInitialState: function() { - return { + constructor() { + super(); + this._showLeftNavClick = this._showLeftNavClick.bind(this); + this._toggleDockedLeftNavClick = this._toggleDockedLeftNavClick.bind(this); + + this.state = { isDocked: false }; - }, + } - render: function() { + render() { var menuItems = [ { route: 'get-started', text: 'Get Started' }, @@ -25,7 +29,7 @@ var LeftNavPage = React.createClass({ { type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true } ]; - var code = + var code = 'menuItems = [\n' + ' { route: \'get-started\', text: \'Get Started\' },\n' + ' { route: \'css-framework\', text: \'CSS Framework\' },\n' + @@ -128,20 +132,20 @@ var LeftNavPage = React.createClass({ ); - - }, - _showLeftNavClick: function() { + } + + _showLeftNavClick() { this.refs.leftNav.toggle(); - }, + } - _toggleDockedLeftNavClick: function() { + _toggleDockedLeftNavClick() { this.refs.dockedLeftNav.toggle(); this.setState({ isDocked: !this.state.isDocked }); } -}); +} -module.exports = LeftNavPage; \ No newline at end of file +module.exports = LeftNavPage; diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index f4f9149ba73c98..f92907f8c66251 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -3,9 +3,9 @@ var mui = require('mui'); var Paper = mui.Paper; var ComponentDoc = require('../../component-doc.jsx'); -var PaperPage = React.createClass({ +class PaperPage extends React.Component { - render: function() { + render() { var code = [ '//Rounded Corners', @@ -81,7 +81,7 @@ var PaperPage = React.createClass({ type: 'string', header: 'optional', desc: 'Similiar to innerClassName. Overrides the inline-style of ' + - 'the inner div.' + 'the inner div.' }, { name: 'rounded', @@ -183,6 +183,6 @@ var PaperPage = React.createClass({ ); } -}); +} module.exports = PaperPage; diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index 499c0ee09325a8..c0c26ca590f7e6 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -3,13 +3,13 @@ var mui = require('mui'); var Slider = mui.Slider; var ComponentDoc = require('../../component-doc.jsx'); -var SlidersPage = React.createClass({ +class SlidersPage extends React.Component { - handleMouseDown: function(e){ + handleMouseDown(e){ console.log('hmd', e); - }, + } - render: function() { + render() { var code = '// Default\n' + @@ -32,16 +32,16 @@ var SlidersPage = React.createClass({ componentInfo={componentInfo}>
@@ -328,14 +325,14 @@ var SwitchesPage = React.createClass({
@@ -343,16 +340,16 @@ var SwitchesPage = React.createClass({
);
- },
+ }
- _getToggleExample: function() {
+ _getToggleExample() {
return (
);
- },
+ }
- _getRadioButtonExample: function() {
+ _getRadioButtonExample() {
return (
@@ -373,22 +370,22 @@ var SwitchesPage = React.createClass({
id="toggleId2"
name="toggleName2"
value="toggleValue2"
- label="auto-pilot"
+ label="auto-pilot"
defaultToggled={true}/>
-
@@ -397,7 +394,7 @@ var SwitchesPage = React.createClass({
- Radio Buttons
\n' +
@@ -152,11 +155,15 @@ var TabsPage = React.createClass({
);
- },
+ }
- _onActive: function(tab){
- this.transitionTo(tab.props.route);
+ _onActive(tab){
+ this.context.router.transitionTo(tab.props.route);
}
-});
+}
+
+TabsPage.contextTypes = {
+ router: React.PropTypes.func
+};
module.exports = TabsPage;
diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/toolbars.jsx
index 6cd37f0861fd8d..634dacb938cd3f 100644
--- a/docs/src/app/components/pages/components/toolbars.jsx
+++ b/docs/src/app/components/pages/components/toolbars.jsx
@@ -1,20 +1,14 @@
var React = require('react');
var mui = require('mui');
-var DropDownIcon = mui.DropDownIcon;
-var DropDownMenu = mui.DropDownMenu;
-var FontIcon = mui.FontIcon;
-var RaisedButton = mui.RaisedButton;
-var Toolbar = mui.Toolbar;
-var ToolbarGroup = mui.ToolbarGroup;
-var ToolbarSeparator = mui.ToolbarSeparator;
-var ToolbarTitle = mui.ToolbarTitle;
var ComponentDoc = require('../../component-doc.jsx');
-var ToolbarPage = React.createClass({
+var {DropDownIcon, DropDownMenu, FontIcon, RaisedButton, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} = mui;
- render: function() {
+class ToolbarPage extends React.Component {
- var code =
+ render() {
+
+ var code =
'var filterOptions = [\n' +
' { payload: \'1\', text: \'All Broadcasts\' },\n' +
' { payload: \'2\', text: \'All Voice\' },\n' +
@@ -28,7 +22,7 @@ var ToolbarPage = React.createClass({
' { payload: \'1\', text: \'Download\' },\n' +
' { payload: \'2\', text: \'More Info\' }\n' +
'];\n\n' +
- '\n' +
+ '\n' +
' \n' +
' \n' +
@@ -63,7 +57,7 @@ var ToolbarPage = React.createClass({
desc: 'The text to be displayed for the element.'
}
]
- },
+ },
];
var filterOptions = [
@@ -103,6 +97,6 @@ var ToolbarPage = React.createClass({
);
}
-});
+}
module.exports = ToolbarPage;
diff --git a/docs/src/app/components/pages/css-framework.jsx b/docs/src/app/components/pages/css-framework.jsx
index 0c66114b5aae76..5fa6a3093d1be7 100644
--- a/docs/src/app/components/pages/css-framework.jsx
+++ b/docs/src/app/components/pages/css-framework.jsx
@@ -1,9 +1,9 @@
var React = require('react'),
PageWithNav = require('./page-with-nav.jsx');
-var CssFramework = React.createClass({
+class CssFramework extends React.Component {
- render: function() {
+ render() {
var menuItems = [
{ route: 'colors', text: 'Colors'},
{ route: 'typography', text: 'Typography'}
@@ -14,6 +14,6 @@ var CssFramework = React.createClass({
);
}
-});
+}
module.exports = CssFramework;
diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
index 402c22898cb117..5b422d77aa914a 100644
--- a/docs/src/app/components/pages/get-started.jsx
+++ b/docs/src/app/components/pages/get-started.jsx
@@ -2,9 +2,9 @@ var React = require('react'),
mui = require('mui'),
CodeBlock = require('../code-example/code-block.jsx');
-var GetStarted = React.createClass({
+class GetStarted extends React.Component {
- render: function() {
+ render() {
var usageCode =
'/** MyAwesomeReactComponent.jsx */\n\n' +
'var React = require(\'react\'),\n' +
@@ -19,7 +19,7 @@ var GetStarted = React.createClass({
'});\n\n' +
'module.exports = MyAwesomeReactComponent;\n\n\n',
- customizationCode =
+ customizationCode =
'@import "node_modules/material-ui/src/less/scaffolding.less";\n\n' +
'//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
'@import "my-custom-overrides.less";\n\n' +
@@ -39,15 +39,15 @@ var GetStarted = React.createClass({
);
- },
+ }
- _getSelectedIndex: function() {
- var menuItems = this.props.menuItems,
- currentItem;
+ _getSelectedIndex() {
+ var menuItems = this.props.menuItems;
+ 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;
+ }
+ }
+ }
- _onMenuItemClick: function(e, index, item) {
- this.transitionTo(item.route);
+ _onMenuItemClick(e, index, item) {
+ this.context.router.transitionTo(item.route);
}
-});
+}
+
+PageWithNav.propTypes = {
+ menuItems: React.PropTypes.array
+};
+
+PageWithNav.contextTypes = {
+ router: React.PropTypes.func
+};
-module.exports = PageWithNav;
\ No newline at end of file
+module.exports = PageWithNav;
diff --git a/package.json b/package.json
index 0baf9549bde128..7ae1f7b8b470e0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "material-ui",
"author": "Call-em-all Engineering Team",
- "version": "0.7.1",
+ "version": "0.7.2",
"description": "Material Design UI components built with React",
"main": "./lib",
"scripts": {
@@ -33,13 +33,13 @@
"react-draggable2": "^0.5.1"
},
"peerDependencies": {
- "react": "0.12.x",
- "react-tap-event-plugin": "^0.1.3"
+ "react": ">=0.12",
+ "react-tap-event-plugin": ">=0.1.3"
},
"devDependencies": {
- "react-tools": "^0.12.2",
+ "react-tools": "^0.13",
"browserify": "^7.0.3",
"reactify": "^0.17.1",
- "react-router": "^0.11.6"
+ "react-router": "^0.13"
}
}
diff --git a/src/js/dialog-window.jsx b/src/js/dialog-window.jsx
index fb3fa5a5f6e458..f055ac225bf246 100644
--- a/src/js/dialog-window.jsx
+++ b/src/js/dialog-window.jsx
@@ -43,7 +43,10 @@ var DialogWindow = React.createClass({
componentDidMount: function() {
this._positionDialog();
- if (this.props.openImmediately) this.refs.dialogOverlay.preventScrolling();
+ if (this.props.openImmediately) {
+ this.refs.dialogOverlay.preventScrolling();
+ this._onShow();
+ }
},
componentDidUpdate: function(prevProps, prevState) {
@@ -123,13 +126,13 @@ var DialogWindow = React.createClass({
}.bind(this));
this.setState({ open: false });
- if (this.props.onDismiss) this.props.onDismiss();
+ this._onDismiss();
},
show: function() {
this.refs.dialogOverlay.preventScrolling();
this.setState({ open: true });
- if (this.props.onShow) this.props.onShow();
+ this._onShow();
},
_getAction: function(actionJSON, key) {
@@ -197,6 +200,14 @@ var DialogWindow = React.createClass({
}
},
+
+ _onShow: function() {
+ if (this.props.onShow) this.props.onShow();
+ },
+
+ _onDismiss: function() {
+ if (this.props.onDismiss) this.props.onDismiss();
+ },
_handleOverlayTouchTap: function() {
this.dismiss();
Prerequisites
- We recommend that you get started with the React Library before diving into - material-ui for a better understanding. Should you choose to skip this, don't worry, we'll explain relevant React concepts as + We recommend that you get started with the React Library before diving into + material-ui for a better understanding. Should you choose to skip this, don't worry, we'll explain relevant React concepts as they come along.
Installation
- Material-UI is available as an npm package.
+ Material-UI is available as an npm package.
Use browserify and reactify for
dependency management and JSX transformation. The CSS framework is written in Less,
so you'll need to compile that as well. For Sass users, material-ui-sass contains
@@ -107,6 +107,6 @@ var GetStarted = React.createClass({
);
}
-});
+}
module.exports = GetStarted;
diff --git a/docs/src/app/components/pages/home-feature.jsx b/docs/src/app/components/pages/home-feature.jsx
index 42823165ce9afc..9e2289e3afc881 100644
--- a/docs/src/app/components/pages/home-feature.jsx
+++ b/docs/src/app/components/pages/home-feature.jsx
@@ -4,21 +4,19 @@ var React = require('react'),
mui = require('mui'),
Paper = mui.Paper;
-var HomeFeature = React.createClass({
+class HomeFeature extends React.Component {
- propTypes: {
- heading: React.PropTypes.string,
- route: React.PropTypes.string,
- img: React.PropTypes.string
- },
-
- getInitialState: function() {
- return {
- zDepth: 0
+ constructor(props) {
+ super(props);
+ this.state = {
+ zDepth: 0
};
- },
- render: function() {
+ this._onMouseOver = this._onMouseOver.bind(this);
+ this._onMouseOut = this._onMouseOut.bind(this);
+ }
+
+ render() {
return (
@@ -78,12 +81,16 @@ var HomePage = React.createClass({
);
- },
+ }
- _onDemoClick: function() {
- this.transitionTo('components');
+ _onDemoClick() {
+ this.context.router.transitionTo('components');
}
-});
+}
+
+HomePage.contextTypes = {
+ router: React.PropTypes.func
+};
-module.exports = HomePage;
\ No newline at end of file
+module.exports = HomePage;
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
index 72af80db073bfd..31859ba61bf274 100644
--- a/docs/src/app/components/pages/page-with-nav.jsx
+++ b/docs/src/app/components/pages/page-with-nav.jsx
@@ -4,15 +4,15 @@ var React = require('react'),
mui = require('mui'),
Menu = mui.Menu;
-var PageWithNav = React.createClass({
+class PageWithNav extends React.Component {
- mixins: [Router.Navigation, Router.State],
-
- propTypes: {
- menuItems: React.PropTypes.array
- },
+ constructor() {
+ super();
+ this._getSelectedIndex = this._getSelectedIndex.bind(this);
+ this._onMenuItemClick = this._onMenuItemClick.bind(this);
+ }
- render: function() {
+ render() {
return (
@@ -28,22 +28,32 @@ var PageWithNav = React.createClass({