[docs] Fix i18n page transition (#13947)

* fix: node maybe null * add a warning, we will solve that latter on
mui · Dec 20, 2018 · 41c2703 · 41c2703
1 parent 72f7253
commit 41c2703
Showing 1 changed file with 24 additions and 16 deletions.
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -11,30 +11,38 @@ import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { textToHash } from '@material-ui/docs/MarkdownElement/MarkdownElement';
 
+let itemsCollector;
 const renderer = new marked.Renderer();
-
-let itemsServer = null;
 renderer.heading = (text, level) => {
   if (level === 2) {
-    itemsServer.push({
+    itemsCollector.push({
       text,
       level,
       hash: textToHash(text),
       children: [],
     });
   } else if (level === 3) {
-    if (!itemsServer[itemsServer.length - 1]) {
+    if (!itemsCollector[itemsCollector.length - 1]) {
       throw new Error(`Missing parent level for: ${text}`);
     }
 
-    itemsServer[itemsServer.length - 1].children.push({
+    itemsCollector[itemsCollector.length - 1].children.push({
       text,
       level,
       hash: textToHash(text),
     });
   }
 };
 
+function getItems(contents) {
+  itemsCollector = [];
+  marked(contents.join(''), {
+    renderer,
+  });
+
+  return itemsCollector;
+}
+
 const styles = theme => ({
   root: {
     top: 70,
@@ -82,11 +90,8 @@ class AppTableOfContents extends React.Component {
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
   constructor(props) {
-    super(props);
-    itemsServer = [];
-    marked(props.contents.join(''), {
-      renderer,
-    });
+    super();
+    this.itemsServer = getItems(props.contents);
   }
 
   state = {
@@ -97,7 +102,7 @@ class AppTableOfContents extends React.Component {
     this.itemsClient = [];
     const uniq = {};
 
-    itemsServer.forEach(item2 => {
+    this.itemsServer.forEach(item2 => {
       checkDuplication(uniq, item2);
       this.itemsClient.push({
         ...item2,
@@ -114,7 +119,6 @@ class AppTableOfContents extends React.Component {
         });
       }
     });
-
     this.findActiveIndex();
   }
 
@@ -127,9 +131,13 @@ class AppTableOfContents extends React.Component {
 
     for (let i = 0; i < this.itemsClient.length; i += 1) {
       const item = this.itemsClient[i];
+
+      warning(item.node, `Missing node on the item ${JSON.stringify(item, null, 2)}`);
+
       if (
-        document.documentElement.scrollTop < item.node.offsetTop + 100 ||
-        i === this.itemsClient.length - 1
+        item.node &&
+        (document.documentElement.scrollTop < item.node.offsetTop + 100 ||
+          i === this.itemsClient.length - 1)
       ) {
         active = item;
         break;
@@ -149,14 +157,14 @@ class AppTableOfContents extends React.Component {
 
     return (
       <nav className={classes.root}>
-        {itemsServer.length > 0 ? (
+        {this.itemsServer.length > 0 ? (
           <React.Fragment>
             <Typography gutterBottom className={classes.contents}>
               Contents
             </Typography>
             <EventListener target="window" onScroll={this.handleScroll} />
             <ul className={classes.ul}>
-              {itemsServer.map(item2 => (
+              {this.itemsServer.map(item2 => (
                 <li key={item2.text}>
                   <Typography
                     color={active === item2.hash ? 'textPrimary' : 'textSecondary'}