import React from 'react';
import PropTypes from 'prop-types';
import { create } from 'jss';
import { withStyles, createGenerateClassName, jssPreset } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/styles';
import rtl from 'jss-rtl';
import Frame from 'react-frame-component';

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.background.default,
    flexGrow: 1,
    height: 400,
    border: 'none',
    boxShadow: theme.shadows[1],
  },
});

const generateClassName = createGenerateClassName();

class DemoFrame extends React.Component {
  state = {
    ready: false,
  };

  handleRef = ref => {
    this.contentDocument = ref ? ref.node.contentDocument : null;
  };

  onContentDidMount = () => {
    this.setState({
      ready: true,
      jss: create({
        plugins: [...jssPreset().plugins, rtl()],
        insertionPoint: this.contentDocument.querySelector('#demo-frame-jss'),
      }),
      sheetsManager: new Map(),
      container: this.contentDocument.body,
    });
  };

  onContentDidUpdate = () => {
    this.contentDocument.body.dir = this.props.theme.direction;
  };

  render() {
    const { children, classes } = this.props;

    const inIframe = this.state.ready ? (
      <StylesProvider
        jss={this.state.jss}
        generateClassName={generateClassName}
        sheetsManager={this.state.sheetsManager}
      >
        {React.cloneElement(children, {
          container: this.state.container,
        })}
      </StylesProvider>
    ) : null;

    return (
      <Frame
        ref={this.handleRef}
        className={classes.root}
        contentDidMount={this.onContentDidMount}
        contentDidUpdate={this.onContentDidUpdate}
      >
        <div id="demo-frame-jss" />
        {inIframe}
      </Frame>
    );
  }
}

DemoFrame.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(DemoFrame);

@@ -110,33 +110,8 @@
 les,
- createGenerateClassName,
  jss
@@ -202,24 +202,69 @@
 ui/styles';%0A
+import NoSsr from '@material-ui/core/NoSsr';%0A
 import rtl f
@@ -515,62 +515,8 @@
 );%0A%0A
-const generateClassName = createGenerateClassName();%0A%0A
 clas
@@ -1171,347 +1171,122 @@
     
-const inIframe = this.state.ready ? (%0A      %3CStylesProvider%0A        jss=%7Bthis.state.jss%7D%0A        generateClassName=%7BgenerateClassName%7D%0A        sheetsManager=%7Bthis.state.sheetsManager%7D%0A      %3E%0A        %7BReact.cloneElement(children, %7B%0A          container: this.state.container,%0A        %7D)%7D%0A      %3C/StylesProvider%3E%0A    ) : null;%0A%0A    return (%0A
+// NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount%0A    return (%0A      %3CNoSsr%3E%0A  
     
@@ -1302,16 +1302,18 @@
         
+  
 ref=%7Bthi
@@ -1325,16 +1325,18 @@
 dleRef%7D%0A
+  
         
@@ -1360,32 +1360,34 @@
 s.root%7D%0A        
+ 
+ 
 contentDidMount=
@@ -1411,16 +1411,18 @@
 dMount%7D%0A
+  
         
@@ -1464,16 +1464,18 @@
 Update%7D%0A
+  
       %3E%0A
@@ -1482,16 +1482,18 @@
         
+  
 %3Cdiv id=
@@ -1524,32 +1524,316 @@
     
-%7BinIframe%7D%0A      %3C/Frame
+  %7Bthis.state.ready ? (%0A            %3CStylesProvider jss=%7Bthis.state.jss%7D sheetsManager=%7Bthis.state.sheetsManager%7D%3E%0A              %7BReact.cloneElement(children, %7B%0A                container: this.state.container,%0A              %7D)%7D%0A            %3C/StylesProvider%3E%0A          ) : null%7D%0A        %3C/Frame%3E%0A      %3C/NoSsr
 %3E%0A  

Fix concurrency with Frame demos (#13747)