examples(material-ui): change the wrapping strategy (#2648)

By creating an intermediary component (with the HOC)
we save some React rendering logic.
That's also addressing an issue with JssProvider (react-jss)
that generate a new index at each render.

examples/with-material-ui-next/components/App.js

@@ -1,53 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { JssProvider } from 'react-jss'
-import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
-import { getContext } from '../styles/context'
-
-// Apply some reset
-const styleSheet = createStyleSheet('App', theme => ({
-  '@global': {
-    html: {
-      background: theme.palette.background.default,
-      WebkitFontSmoothing: 'antialiased', // Antialiasing.
-      MozOsxFontSmoothing: 'grayscale' // Antialiasing.
-    },
-    body: {
-      margin: 0
-    }
-  }
-}))
-
-let AppWrapper = props => props.children
-
-AppWrapper = withStyles(styleSheet)(AppWrapper)
-
-class App extends Component {
-  componentDidMount () {
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector('#jss-server-side')
-    if (jssStyles && jssStyles.parentNode) {
-      jssStyles.parentNode.removeChild(jssStyles)
-    }
-  }
-
-  render () {
-    const context = getContext()
-
-    return (
-      <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
-        <MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
-          <AppWrapper>
-            {this.props.children}
-          </AppWrapper>
-        </MuiThemeProvider>
-      </JssProvider>
-    )
-  }
-}
-
-App.propTypes = {
-  children: PropTypes.node.isRequired
-}
-
-export default App

examples/with-material-ui-next/components/withRoot.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import { JssProvider } from 'react-jss'
+import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'
+import { getContext } from '../styles/context'
+
+// Apply some reset
+const styleSheet = createStyleSheet(theme => ({
+  '@global': {
+    html: {
+      background: theme.palette.background.default,
+      WebkitFontSmoothing: 'antialiased', // Antialiasing.
+      MozOsxFontSmoothing: 'grayscale' // Antialiasing.
+    },
+    body: {
+      margin: 0
+    }
+  }
+}))
+
+let AppWrapper = props => props.children
+
+AppWrapper = withStyles(styleSheet)(AppWrapper)
+
+function withRoot (BaseComponent) {
+  class WithRoot extends Component {
+    static getInitialProps (ctx) {
+      if (BaseComponent.getInitialProps) {
+        return BaseComponent.getInitialProps(ctx)
+      }
+
+      return {}
+    }
+
+    componentDidMount () {
+      // Remove the server-side injected CSS.
+      const jssStyles = document.querySelector('#jss-server-side')
+      if (jssStyles && jssStyles.parentNode) {
+        jssStyles.parentNode.removeChild(jssStyles)
+      }
+    }
+
+    render () {
+      const context = getContext()
+
+      return (
+        <JssProvider registry={context.sheetsRegistry} jss={context.jss}>
+          <MuiThemeProvider theme={context.theme} sheetsManager={context.sheetsManager}>
+            <AppWrapper>
+              <BaseComponent />
+            </AppWrapper>
+          </MuiThemeProvider>
+        </JssProvider>
+      )
+    }
+  }
+
+  WithRoot.displayName = `withRoot(${BaseComponent.displayName})`
+
+  return WithRoot
+}
+
+export default withRoot

examples/with-material-ui-next/pages/index.js

@@ -7,7 +7,7 @@ import Dialog, {
   DialogActions
 } from 'material-ui/Dialog'
 import Typography from 'material-ui/Typography'
-import App from '../components/App'
+import withRoot from '../components/withRoot'
 
 const styles = {
   container: {
@@ -35,26 +35,24 @@ class Index extends Component {
 
   render () {
     return (
-      <App>
-        <div style={styles.container}>
-          <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
-            <DialogTitle>Super Secret Password</DialogTitle>
-            <DialogContent>
-              <DialogContentText>1-2-3-4-5</DialogContentText>
-            </DialogContent>
-            <DialogActions>
-              <Button color='primary' onClick={this.handleRequestClose}>OK</Button>
-            </DialogActions>
-          </Dialog>
-          <Typography type='display1' gutterBottom>Material-UI</Typography>
-          <Typography type='subheading' gutterBottom>example project</Typography>
-          <Button raised color='accent' onClick={this.handleClick}>
-            Super Secret Password
-          </Button>
-        </div>
-      </App>
+      <div style={styles.container}>
+        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose}>
+          <DialogTitle>Super Secret Password</DialogTitle>
+          <DialogContent>
+            <DialogContentText>1-2-3-4-5</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button color='primary' onClick={this.handleRequestClose}>OK</Button>
+          </DialogActions>
+        </Dialog>
+        <Typography type='display1' gutterBottom>Material-UI</Typography>
+        <Typography type='subheading' gutterBottom>example project</Typography>
+        <Button raised color='accent' onClick={this.handleClick}>
+          Super Secret Password
+        </Button>
+      </div>
     )
   }
 }
 
-export default Index
+export default withRoot(Index)