From 1ab385947c594596f26838fcdc9324b4fa388f06 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 1 Nov 2018 00:55:41 +0100
Subject: [PATCH] let's merge

---
 docs/src/modules/components/AppDrawer.js      |  42 ++++----
 docs/src/modules/components/EditPage.js       |   6 +-
 docs/src/modules/components/MarkdownDocs.js   | 100 ++++++++----------
 .../components/MarkdownDocsContents.js        |   8 +-
 docs/src/modules/components/PageContext.js    |   5 +
 docs/src/modules/components/PageTitle.js      |   6 +-
 docs/src/modules/components/context.js        |   7 --
 docs/src/modules/components/withRoot.js       |   6 +-
 8 files changed, 85 insertions(+), 95 deletions(-)
 create mode 100644 docs/src/modules/components/PageContext.js
 delete mode 100644 docs/src/modules/components/context.js

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index fddf28f8e325aa..f01bc0635e8c03 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -12,7 +12,7 @@ import Hidden from '@material-ui/core/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitle } from 'docs/src/modules/utils/helpers';
-import Context from './context';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 const styles = theme => ({
   paper: {
@@ -97,30 +97,28 @@ function AppDrawer(props) {
   const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props;
 
   const drawer = (
-    <Context.Consumer>
-      {({ activePage, pages }) => {
-        return (
-          <div className={classes.nav}>
-            <div className={classes.toolbarIe11}>
-              <div className={classes.toolbar}>
-                <Link className={classes.title} href="/" onClick={onClose}>
-                  <Typography variant="h6" color="inherit">
-                    Material-UI
-                  </Typography>
+    <PageContext.Consumer>
+      {({ activePage, pages }) => (
+        <div className={classes.nav}>
+          <div className={classes.toolbarIe11}>
+            <div className={classes.toolbar}>
+              <Link className={classes.title} href="/" onClick={onClose}>
+                <Typography variant="h6" color="inherit">
+                  Material-UI
+                </Typography>
+              </Link>
+              {process.env.LIB_VERSION ? (
+                <Link className={classes.anchor} href={_rewriteUrlForNextExport('/versions')}>
+                  <Typography variant="caption">{`v${process.env.LIB_VERSION}`}</Typography>
                 </Link>
-                {process.env.LIB_VERSION ? (
-                  <Link className={classes.anchor} href={_rewriteUrlForNextExport('/versions')}>
-                    <Typography variant="caption">{`v${process.env.LIB_VERSION}`}</Typography>
-                  </Link>
-                ) : null}
-              </div>
+              ) : null}
             </div>
-            <Divider />
-            {renderNavItems({ props, pages, activePage, depth: 0 })}
           </div>
-        );
-      }}
-    </Context.Consumer>
+          <Divider />
+          {renderNavItems({ props, pages, activePage, depth: 0 })}
+        </div>
+      )}
+    </PageContext.Consumer>
   );
 
   return (
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index 2b03273c7a259e..00deab868bab80 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
-import Context from './context';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 function EditPage(props) {
   const { markdownLocation, sourceCodeRootUrl } = props;
 
   return (
-    <Context.Consumer>
+    <PageContext.Consumer>
       {({ userLanguage }) => {
         if (userLanguage === 'zh') {
           return (
@@ -23,7 +23,7 @@ function EditPage(props) {
           </Button>
         );
       }}
-    </Context.Consumer>
+    </PageContext.Consumer>
   );
 }
 
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 1a40af27e6de14..89e0af6b1fb9af 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -34,69 +34,63 @@ const demoRegexp = /^"demo": "(.*)"/;
 const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/blob/master';
 
 function MarkdownDocs(props) {
-  const { classes, demos, disableAd, markdown, markdownLocation } = props;
+  const { classes, demos, disableAd, markdown, markdownLocation: markdownLocationProp } = props;
   const headers = getHeaders(markdown);
 
   return (
-    <MarkdownDocsContents markdown={markdown} markdownLocation={markdownLocation}>
-      {contents => {
-        return (
-          <AppFrame>
-            <Head
-              title={`${headers.title || getTitle(markdown)} - Material-UI`}
-              description={headers.description || getDescription(markdown)}
-            />
-            {disableAd ? null : (
-              <Portal container={() => document.querySelector('.description')}>
-                <Ad />
-              </Portal>
-            )}
-            <AppTableOfContents contents={contents} />
-            <AppContent className={classes.root}>
-              <div className={classes.header}>
-                <EditPage
-                  markdownLocation={markdownLocation}
-                  sourceCodeRootUrl={SOURCE_CODE_ROOT_URL}
-                />
-              </div>
-              {contents.map((content, index) => {
-                const match = content.match(demoRegexp);
+    <MarkdownDocsContents markdown={markdown} markdownLocation={markdownLocationProp}>
+      {({ contents, markdownLocation }) => (
+        <AppFrame>
+          <Head
+            title={`${headers.title || getTitle(markdown)} - Material-UI`}
+            description={headers.description || getDescription(markdown)}
+          />
+          <AppTableOfContents contents={contents} />
+          {disableAd ? null : (
+            <Portal container={() => document.querySelector('.description')}>
+              <Ad />
+            </Portal>
+          )}
+          <AppContent className={classes.root}>
+            <div className={classes.header}>
+              <EditPage
+                markdownLocation={markdownLocation}
+                sourceCodeRootUrl={SOURCE_CODE_ROOT_URL}
+              />
+            </div>
+            {contents.map((content, index) => {
+              const match = content.match(demoRegexp);
 
-                if (match && demos) {
-                  let demoOptions;
-                  try {
-                    demoOptions = JSON.parse(`{${content}}`);
-                  } catch (err) {
-                    console.error(err); // eslint-disable-line no-console
-                    return null;
-                  }
-
-                  const name = demoOptions.demo;
-                  warning(demos && demos[name], `Missing demo: ${name}.`);
-                  return (
-                    <Demo
-                      key={content}
-                      js={demos[name].js}
-                      raw={demos[name].raw}
-                      index={index}
-                      demoOptions={demoOptions}
-                      githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
-                    />
-                  );
+              if (match && demos) {
+                let demoOptions;
+                try {
+                  demoOptions = JSON.parse(`{${content}}`);
+                } catch (err) {
+                  console.error(err); // eslint-disable-line no-console
+                  return null;
                 }
 
+                const name = demoOptions.demo;
+                warning(demos && demos[name], `Missing demo: ${name}.`);
                 return (
-                  <MarkdownElement
-                    className={classes.markdownElement}
+                  <Demo
                     key={content}
-                    text={content}
+                    js={demos[name].js}
+                    raw={demos[name].raw}
+                    index={index}
+                    demoOptions={demoOptions}
+                    githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}
                   />
                 );
-              })}
-            </AppContent>
-          </AppFrame>
-        );
-      }}
+              }
+
+              return (
+                <MarkdownElement className={classes.markdownElement} key={content} text={content} />
+              );
+            })}
+          </AppContent>
+        </AppFrame>
+      )}
     </MarkdownDocsContents>
   );
 }
diff --git a/docs/src/modules/components/MarkdownDocsContents.js b/docs/src/modules/components/MarkdownDocsContents.js
index 9aed7c1bf6e26c..2d7992dc05270c 100644
--- a/docs/src/modules/components/MarkdownDocsContents.js
+++ b/docs/src/modules/components/MarkdownDocsContents.js
@@ -3,7 +3,7 @@ import kebabCase from 'lodash/kebabCase';
 import { _rewriteUrlForNextExport } from 'next/router';
 import PropTypes from 'prop-types';
 import { getHeaders, getContents } from 'docs/src/modules/utils/parseMarkdown';
-import Context from './context';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 function MarkdownDocsContents(props) {
   const { children, markdownLocation: markdownLocationProp, markdown } = props;
@@ -11,7 +11,7 @@ function MarkdownDocsContents(props) {
   const headers = getHeaders(markdown);
 
   return (
-    <Context.Consumer>
+    <PageContext.Consumer>
       {({ activePage }) => {
         let markdownLocation = markdownLocationProp || activePage.pathname;
 
@@ -43,9 +43,9 @@ ${headers.components
         `);
         }
 
-        return children(contents);
+        return children({ contents, markdownLocation });
       }}
-    </Context.Consumer>
+    </PageContext.Consumer>
   );
 }
 
diff --git a/docs/src/modules/components/PageContext.js b/docs/src/modules/components/PageContext.js
new file mode 100644
index 00000000000000..eadc85826e40ae
--- /dev/null
+++ b/docs/src/modules/components/PageContext.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const PageContext = React.createContext();
+
+export default PageContext;
diff --git a/docs/src/modules/components/PageTitle.js b/docs/src/modules/components/PageTitle.js
index 869e8bf7bdb370..2cfa75043359cd 100644
--- a/docs/src/modules/components/PageTitle.js
+++ b/docs/src/modules/components/PageTitle.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { pageToTitle } from 'docs/src/modules/utils/helpers';
-import Context from './context';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 // TODO: it really wants to be named useTitle but we're not quite there yet.
 function PageTitle(props) {
   return (
-    <Context.Consumer>
+    <PageContext.Consumer>
       {({ activePage }) => {
         if (!activePage) {
           throw new Error('Missing activePage.');
@@ -15,7 +15,7 @@ function PageTitle(props) {
         const title = activePage.title !== false ? pageToTitle(activePage) : null;
         return props.children(title);
       }}
-    </Context.Consumer>
+    </PageContext.Consumer>
   );
 }
 
diff --git a/docs/src/modules/components/context.js b/docs/src/modules/components/context.js
deleted file mode 100644
index 8ee9015f82f940..00000000000000
--- a/docs/src/modules/components/context.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default React.createContext({
-  activePage: { pathname: '' },
-  pages: [],
-  userLanguage: 'en',
-});
diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
index 6473f75519279a..9e57801e48f171 100644
--- a/docs/src/modules/components/withRoot.js
+++ b/docs/src/modules/components/withRoot.js
@@ -13,7 +13,7 @@ import url from 'url';
 import findPages from /* preval */ 'docs/src/modules/utils/findPages';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import acceptLanguage from 'accept-language';
-import Context from './context';
+import PageContext from 'docs/src/modules/components/PageContext';
 
 acceptLanguage.languages(['en', 'zh']);
 
@@ -319,7 +319,7 @@ function withRoot(Component) {
 
       return (
         <React.StrictMode>
-          <Context.Provider value={{ activePage, pages, userLanguage }}>
+          <PageContext.Provider value={{ activePage, pages, userLanguage }}>
             <Provider store={this.redux}>
               <AppWrapper pageContext={pageContext}>
                 <Component
@@ -328,7 +328,7 @@ function withRoot(Component) {
                 />
               </AppWrapper>
             </Provider>
-          </Context.Provider>
+          </PageContext.Provider>
         </React.StrictMode>
       );
     }