import React from 'react';
import PropTypes from 'prop-types';
import IframeResizer from 'iframe-resizer-react';
import DevDocLinks from './DevDocLinks';

class ComponentPreview extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      componentName,
      hasReact,
      hasAngular,
      hasHTML,
      componentType,
      minHeight,
      maxHeight,
      maxWidth,
      allowScrolling,
    } = this.props;
    const iframeURL = `https://html.sparkdesignsystem.com/iframe.html?id=${componentType}-${componentName}`;

    return (
      <div className="sprk-u-mbm sprk-u-ptl">
        <div className="sprk-u-mbl">
          <IframeResizer
            style={{
              minHeight,
              maxHeight,
              maxWidth,
            }}
            scrolling={allowScrolling}
            title="Component Preview"
            className="docs-c-ComponentPreview sprk-o-Box"
            src={iframeURL}
            loading="lazy"
          />
        </div>

        {(hasHTML || hasAngular || hasReact) && (
          <DevDocLinks
            hasAngular={hasAngular}
            hasHTML={hasHTML}
            hasReact={hasReact}
            componentType={componentType}
            componentName={componentName}
          />
        )}
      </div>
    );
  }
}

ComponentPreview.propTypes = {
  componentName: PropTypes.string,
  componentType: PropTypes.string,
  hasAngular: PropTypes.bool,
  hasReact: PropTypes.bool,
  hasHTML: PropTypes.bool,
  maxHeight: PropTypes.string,
  maxWidth: PropTypes.string,
  minHeight: PropTypes.string,
  allowScrolling: PropTypes.bool,
};

ComponentPreview.defaultProps = {
  componentType: 'components',
  allowScrolling: false,
};

export default ComponentPreview;

@@ -148,21 +148,24 @@
 inks';%0A%0A
-class
+function
  Compone
@@ -177,96 +177,18 @@
 view
- extends React.Component %7B%0A  constructor(props) %7B%0A    super(props);%0A  %7D%0A%0A  render() %7B%0A  
+(props) %7B%0A
   co
@@ -193,18 +193,16 @@
 const %7B%0A
-  
     comp
@@ -212,18 +212,16 @@
 ntName,%0A
-  
     hasR
@@ -226,26 +226,24 @@
 sReact,%0A    
-  
 hasAngular,%0A
@@ -242,26 +242,24 @@
 ngular,%0A    
-  
 hasHTML,%0A   
@@ -255,26 +255,24 @@
 asHTML,%0A    
- 
- 
 componentTyp
@@ -274,18 +274,16 @@
 ntType,%0A
-  
     minH
@@ -289,26 +289,24 @@
 Height,%0A    
-  
 maxHeight,%0A 
@@ -304,26 +304,24 @@
 Height,%0A    
- 
- 
 maxWidth,%0A  
@@ -314,26 +314,24 @@
   maxWidth,%0A
-  
     allowScr
@@ -342,30 +342,21 @@
 ng,%0A
-  
   %7D = 
-this.
 props;%0A
-  
   co
@@ -459,18 +459,16 @@
 ame%7D%60;%0A%0A
-  
   return
@@ -470,18 +470,16 @@
 eturn (%0A
-  
     %3Cdiv
@@ -520,18 +520,16 @@
 %3E%0A      
-  
 %3Cdiv cla
@@ -557,18 +557,16 @@
         
-  
 %3CIframeR
@@ -572,18 +572,16 @@
 Resizer%0A
-  
         
@@ -603,18 +603,16 @@
         
-  
 minHeigh
@@ -606,34 +606,32 @@
      minHeight,%0A
-  
             maxH
@@ -649,18 +649,16 @@
         
- 
- 
 maxWidth
@@ -673,15 +673,11 @@
     
-  
 %7D%7D%0A
-  
     
@@ -719,18 +719,16 @@
         
- 
- 
 title=%22C
@@ -745,18 +745,16 @@
 review%22%0A
-  
         
@@ -802,18 +802,16 @@
 -o-Box%22%0A
-  
         
@@ -838,18 +838,16 @@
         
-  
 loading=
@@ -857,31 +857,27 @@
 zy%22%0A        
-  
 /%3E%0A
-  
       %3C/div%3E
@@ -884,18 +884,16 @@
 %0A%0A      
-  
 %7B(hasHTM
@@ -934,18 +934,16 @@
         
-  
 %3CDevDocL
@@ -957,18 +957,16 @@
         
- 
- 
 hasAngul
@@ -981,18 +981,16 @@
 ngular%7D%0A
-  
         
@@ -1019,18 +1019,16 @@
         
-  
 hasReact
@@ -1041,34 +1041,32 @@
 eact%7D%0A          
- 
- 
 componentType=%7Bc
@@ -1079,18 +1079,16 @@
 ntType%7D%0A
-  
         
@@ -1119,18 +1119,16 @@
 ntName%7D%0A
-  
         
@@ -1140,15 +1140,11 @@
     
-  
 )%7D%0A
-  
     
@@ -1156,17 +1156,11 @@
 %3E%0A  
- 
- 
 );%0A
-  %7D%0A
 %7D%0A%0AC

Convert ComponentPreview.js into a functional component