schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "CodeViewer with referenced height of parent div"

Browse Source 
This reverts commit dddd9432db920b78b6b8567303d5facc8f2c8ae6.
This commit is contained in:
Delucse 2020-09-08 11:30:34 +02:00
parent 6a94ce618c
commit 3297d01e78
1 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/CodeViewer.js
View File

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