Merge pull request #2345 from oliviertassinari/example-fix-api

[Example] Use the lastest API
mui · Dec 2, 2015 · 311a571 · 311a571
2 parents 1200b3f + 33c644c
commit 311a571
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 94 deletions.
diff --git a/examples/browserify-gulp-example/gulp/config.js b/examples/browserify-gulp-example/gulp/config.js
@@ -26,6 +26,7 @@ module.exports = {
       entries: src + '/app/app.jsx',
       dest: dest,
       outputName: 'app.js'
-    }]
+    }],
+    extensions: ['.jsx'],
   }
 };
diff --git a/examples/browserify-gulp-example/src/app/app.jsx b/examples/browserify-gulp-example/src/app/app.jsx
@@ -1,20 +1,14 @@
-(function () {
-  let React = require('react');
-  let ReactDOM = require('react-dom');
-  let injectTapEventPlugin = require('react-tap-event-plugin');
-  let Main = require('./components/main.jsx'); // Our custom react component
-
-  //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();
-
-  // Render the main app react component into the app div.
-  // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
-  ReactDOM.render(<Main />, document.getElementById('app'));
-
-})();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import Main from './components/main'; // Our custom react component
+
+//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 react component into the app div.
+// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
+ReactDOM.render(<Main />, document.getElementById('app'));
diff --git a/examples/browserify-gulp-example/src/app/components/main.jsx b/examples/browserify-gulp-example/src/app/components/main.jsx
@@ -1,19 +1,30 @@
 /** In this file, we create a React component which incorporates components provided by material-ui */
 
-const React = require('react');
-const RaisedButton = require('material-ui/lib/raised-button');
-const Dialog = require('material-ui/lib/dialog');
-const ThemeManager = require('material-ui/lib/styles/theme-manager');
-const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
-const Colors = require('material-ui/lib/styles/colors');
+import React from 'react';
+import RaisedButton from 'material-ui/lib/raised-button';
+import Dialog from 'material-ui/lib/dialog';
+import ThemeManager from 'material-ui/lib/styles/theme-manager';
+import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
+import Colors from 'material-ui/lib/styles/colors';
+
+const containerStyle = {
+  textAlign: 'center',
+  paddingTop: 200,
+};
+
+const standardActions = [
+  {
+    text: 'Okay',
+  },
+];
 
 const Main = React.createClass({
 
   childContextTypes: {
-    muiTheme: React.PropTypes.object
+    muiTheme: React.PropTypes.object,
   },
 
-  getInitialState () {
+  getInitialState() {
     return {
       muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
     };
@@ -27,45 +38,41 @@ const Main = React.createClass({
 
   componentWillMount() {
     let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
-      accent1Color: Colors.deepOrange500
+      accent1Color: Colors.deepOrange500,
     });
 
     this.setState({muiTheme: newMuiTheme});
   },
 
-  render() {
-
-    let containerStyle = {
-      textAlign: 'center',
-      paddingTop: '200px'
-    };
+  _handleRequestClose() {
+    this.setState({
+      open: false,
+    });
+  },
 
-    let standardActions = [
-      { text: 'Okay' }
-    ];
+  _handleTouchTap() {
+    this.setState({
+      open: true,
+    });
+  },
 
+  render() {
     return (
       <div style={containerStyle}>
         <Dialog
+          open={this.state.open}
           title="Super Secret Password"
           actions={standardActions}
-          ref="superSecretPasswordDialog">
+          onRequestClose={this._handleRequestClose}
+        >
           1-2-3-4-5
         </Dialog>
-
         <h1>material-ui</h1>
         <h2>example project</h2>
-
         <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />
-
       </div>
     );
   },
-
-  _handleTouchTap() {
-    this.refs.superSecretPasswordDialog.show();
-  }
-
 });
 
-module.exports = Main;
+export default Main;
diff --git a/examples/webpack-example/src/app/app.jsx b/examples/webpack-example/src/app/app.jsx
@@ -1,20 +1,14 @@
-(function() {
-  let React = require('react');
-  let ReactDOM = require('react-dom');
-  let injectTapEventPlugin = require('react-tap-event-plugin');
-  let Main = require('./components/main'); // Our custom react component
-
-  //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();
-
-  // Render the main app react component into the app div.
-  // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
-  ReactDOM.render(<Main />, document.getElementById('app'));
-
-})();
+import React from 'react';
+import ReactDOM from 'react-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import Main from './components/main'; // Our custom react component
+
+//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 react component into the app div.
+// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
+ReactDOM.render(<Main />, document.getElementById('app'));
diff --git a/examples/webpack-example/src/app/components/main.jsx b/examples/webpack-example/src/app/components/main.jsx
@@ -1,11 +1,22 @@
 /** In this file, we create a React component which incorporates components provided by material-ui */
 
-const React = require('react');
-const RaisedButton = require('material-ui/lib/raised-button');
-const Dialog = require('material-ui/lib/dialog');
-const ThemeManager = require('material-ui/lib/styles/theme-manager');
-const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
-const Colors = require('material-ui/lib/styles/colors');
+import React from 'react';
+import RaisedButton from 'material-ui/lib/raised-button';
+import Dialog from 'material-ui/lib/dialog';
+import ThemeManager from 'material-ui/lib/styles/theme-manager';
+import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
+import Colors from 'material-ui/lib/styles/colors';
+
+const containerStyle = {
+  textAlign: 'center',
+  paddingTop: 200,
+};
+
+const standardActions = [
+  {
+    text: 'Okay',
+  },
+];
 
 const Main = React.createClass({
 
@@ -33,39 +44,35 @@ const Main = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
-  render() {
-
-    let containerStyle = {
-      textAlign: 'center',
-      paddingTop: '200px',
-    };
+  _handleRequestClose() {
+    this.setState({
+      open: false,
+    });
+  },
 
-    let standardActions = [
-      {text: 'Okay'},
-    ];
+  _handleTouchTap() {
+    this.setState({
+      open: true,
+    });
+  },
 
+  render() {
     return (
       <div style={containerStyle}>
         <Dialog
+          open={this.state.open}
           title="Super Secret Password"
           actions={standardActions}
-          ref="superSecretPasswordDialog">
+          onRequestClose={this._handleRequestClose}
+        >
           1-2-3-4-5
         </Dialog>
-
         <h1>material-ui</h1>
         <h2>example project</h2>
-
         <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />
-
       </div>
     );
   },
-
-  _handleTouchTap() {
-    this.refs.superSecretPasswordDialog.show();
-  },
-
 });
 
-module.exports = Main;
+export default Main;