f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-28 17:52:38 +00:00
Code Wiki Activity

Add "BrewPage" component which updates only when needed

Browse Source
This commit is contained in:
Trevor Buckner
2023-11-24 01:35:06 -05:00
parent cda98e02e0
commit ede731e3a5
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -19,6 +19,21 @@ const Themes = require('themes/themes.json');
const PAGE_HEIGHT = 1056;
const PPR_THRESHOLD = 50;
const BrewPage = createClass({
displayName : `BrewPage`,
getDefaultProps : function() {
return {
contents : '',
index : 0
}
},
render : function() {
return <div className='page' id={`p${this.props.index + 1}`} >
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: this.props.contents }} />
</div>
}
});
const BrewRenderer = createClass({
displayName : 'BrewRenderer',
getDefaultProps : function() {
@@ -57,6 +72,7 @@ const BrewRenderer = createClass({
},
height : 0,
lastRender : <div></div>,
renderedPages : [],
componentWillUnmount : function() {
window.removeEventListener('resize', this.updateSize);
@@ -152,23 +168,21 @@ const BrewRenderer = createClass({
return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
else {
cleanPageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
const html = Markdown.render(cleanPageText);
return (
<div className='page' id={`p${index + 1}`} key={index} >
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
</div>
<BrewPage index={index} key={index} contents={html} />
);
}
},
renderPages : function(){
if(this.state.usePPR){
return _.map(this.state.pages, (page, index)=>{
if(this.shouldRender(page, index) && typeof window !== 'undefined'){
return this.renderPage(page, index);
} else {
return this.renderDummyPage(index);
_.forEach(this.state.pages, (page, index)=>{
if((this.shouldRender(page, index) || !this.renderedPages[index]) && typeof window !== 'undefined'){
this.renderedPages[index] = this.renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
}
});
return this.renderedPages;
}
if(this.props.errors && this.props.errors.length) return this.lastRender;
this.lastRender = _.map(this.state.pages, (page, index)=>{