From 3297d01e78f871fd87980252fdae1aa68716ff7c Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Tue, 8 Sep 2020 11:30:34 +0200
Subject: [PATCH] Revert "CodeViewer with referenced height of parent div"

This reverts commit dddd9432db920b78b6b8567303d5facc8f2c8ae6.
---
 src/components/CodeViewer.js | 28 +++++++++-------------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index ac540f5..8477cc0 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -32,10 +32,10 @@ const AccordionSummary = withStyles((theme) => ({
   root: {
     backgroundColor: theme.palette.secondary.main,
     borderBottom: `1px solid white`,
-    marginBottom: '-1px',
-    minHeight: '50px',
+    marginBottom: -1,
+    minHeight: 50,
     '&$expanded': {
-      minHeight: '50px',
+      minHeight: 50,
     },
   },
   content: {
@@ -55,24 +55,15 @@ const AccordionDetails = withStyles((theme) => ({
 
 class CodeViewer extends Component {
 
-  constructor(props){
-    super(props);
-    this.state = {
-      expanded: true,
-      componentHeight: null
-    };
-    this.myDiv = React.createRef();
+  state = {
+    expanded: true
   }
 
   componentDidMount() {
     Prism.highlightAll();
-    this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
   }
 
-  componentDidUpdate(props, state) {
-    if(this.myDiv.current && this.myDiv.current.offsetHeight+'px' !== this.state.componentHeight){
-      this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
-    }
+  componentDidUpdate() {
     Prism.highlightAll();
   }
 
@@ -83,9 +74,8 @@ class CodeViewer extends Component {
   render() {
     var curlyBrackets = '{ }';
     var unequal = '<>';
-    console.log('render', this.myDiv);
     return (
-      <Card style={{height: '100%', maxHeight: '500px'}} ref={this.myDiv}>
+      <Card style={{height: '100%', maxHeight: '500px'}}>
         <Accordion
           square={true}
           style={{margin: 0}}
@@ -96,7 +86,7 @@ class CodeViewer extends Component {
             <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{curlyBrackets}</b>
             <div style={{margin: 'auto 5px 2px 0px'}}>Arduino Quellcode</div>
           </AccordionSummary>
-          <AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
+          <AccordionDetails style={{padding: 0, height: 'calc(500px - 50px - 50px)', backgroundColor: 'white'}}>
             <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
               <code className="language-clike">
                 {this.props.arduino}
@@ -114,7 +104,7 @@ class CodeViewer extends Component {
             <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{unequal}</b>
             <div style={{margin: 'auto 5px 2px 0px'}}>XML Blöcke</div>
           </AccordionSummary>
-          <AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
+          <AccordionDetails style={{padding: 0, height: 'calc(500px - 50px - 50px)', backgroundColor: 'white'}}>
             <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
               <code className="language-xml">
                 {`${this.props.xml}`}