[docs] Use stable context API (#13477)

* [docs] Use stable context API * let's merge * seb review
mui · Nov 1, 2018 · ac1e742 · ac1e742
1 parent f5b38db
commit ac1e742
Show file tree

Hide file tree

Showing 8 changed files with 331 additions and 260 deletions.
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -12,6 +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 PageContext from 'docs/src/modules/components/PageContext';
 
 const styles = theme => ({
   paper: {
@@ -92,28 +93,32 @@ function reduceChildRoutes({ props, activePage, items, page, depth }) {
 // So: <SwipeableDrawer disableBackdropTransition={false} />
 const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
 
-function AppDrawer(props, context) {
+function AppDrawer(props) {
   const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props;
 
   const drawer = (
-    <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>
-          ) : null}
+    <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>
+              ) : null}
+            </div>
+          </div>
+          <Divider />
+          {renderNavItems({ props, pages, activePage, depth: 0 })}
         </div>
-      </div>
-      <Divider />
-      {renderNavItems({ props, pages: context.pages, activePage: context.activePage, depth: 0 })}
-    </div>
+      )}
+    </PageContext.Consumer>
   );
 
   return (
@@ -161,9 +166,4 @@ AppDrawer.propTypes = {
   onOpen: PropTypes.func.isRequired,
 };
 
-AppDrawer.contextTypes = {
-  activePage: PropTypes.object.isRequired,
-  pages: PropTypes.array.isRequired,
-};
-
 export default withStyles(styles)(AppDrawer);
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -23,7 +23,7 @@ import Link from 'docs/src/modules/components/Link';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import AppSearch from 'docs/src/modules/components/AppSearch';
 import Notifications from 'docs/src/modules/components/Notifications';
-import { pageToTitle } from 'docs/src/modules/utils/helpers';
+import PageTitle from 'docs/src/modules/components/PageTitle';
 import actionTypes from 'docs/src/modules/redux/actionTypes';
 
 Router.onRouteChangeStart = () => {
@@ -109,101 +109,104 @@ class AppFrame extends React.Component {
   render() {
     const { children, classes, uiTheme } = this.props;
 
-    if (!this.context.activePage) {
-      throw new Error('Missing activePage.');
-    }
-
-    const title =
-      this.context.activePage.title !== false ? pageToTitle(this.context.activePage) : null;
-
-    let disablePermanent = false;
-    let navIconClassName = '';
-    let appBarClassName = classes.appBar;
-
-    if (title === null) {
-      // home route, don't shift app bar or dock drawer
-      disablePermanent = true;
-      appBarClassName += ` ${classes.appBarHome}`;
-    } else {
-      navIconClassName = classes.navIconHide;
-      appBarClassName += ` ${classes.appBarShift}`;
-    }
-
     return (
-      <div className={classes.root}>
-        <NProgressBar />
-        <CssBaseline />
-        <AppBar className={appBarClassName}>
-          <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="Open drawer"
-              onClick={this.handleDrawerOpen}
-              className={navIconClassName}
-            >
-              <MenuIcon />
-            </IconButton>
-            {title !== null && (
-              <Typography className={classes.title} variant="h6" color="inherit" noWrap>
-                {title}
-              </Typography>
-            )}
-            <div className={classes.grow} />
-            <AppSearch />
-            <Tooltip title="Edit docs colors" enterDelay={300}>
-              <IconButton
-                color="inherit"
-                aria-label="Edit docs colors"
-                component={Link}
-                href="/style/color/#color-tool"
-              >
-                <ColorsIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Toggle light/dark theme" enterDelay={300}>
-              <IconButton
-                color="inherit"
-                onClick={this.handleTogglePaletteType}
-                aria-label="Toggle light/dark theme"
-              >
-                {uiTheme.paletteType === 'light' ? <LightbulbOutlineIcon /> : <LightbulbFullIcon />}
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Toggle right-to-left/left-to-right" enterDelay={300}>
-              <IconButton
-                color="inherit"
-                onClick={this.handleToggleDirection}
-                aria-label="Toggle right-to-left/left-to-right"
-              >
-                {uiTheme.direction === 'rtl' ? (
-                  <FormatTextdirectionLToR />
-                ) : (
-                  <FormatTextdirectionRToL />
-                )}
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="GitHub repository" enterDelay={300}>
-              <IconButton
-                component="a"
-                color="inherit"
-                href="https://github.com/mui-org/material-ui"
-                aria-label="GitHub repository"
-              >
-                <GithubIcon />
-              </IconButton>
-            </Tooltip>
-          </Toolbar>
-        </AppBar>
-        <Notifications />
-        <AppDrawer
-          className={classes.drawer}
-          disablePermanent={disablePermanent}
-          onClose={this.handleDrawerClose}
-          onOpen={this.handleDrawerOpen}
-          mobileOpen={this.state.mobileOpen}
-        />
-        {children}
-      </div>
+      <PageTitle>
+        {title => {
+          let disablePermanent = false;
+          let navIconClassName = '';
+          let appBarClassName = classes.appBar;
+
+          if (title === null) {
+            // home route, don't shift app bar or dock drawer
+            disablePermanent = true;
+            appBarClassName += ` ${classes.appBarHome}`;
+          } else {
+            navIconClassName = classes.navIconHide;
+            appBarClassName += ` ${classes.appBarShift}`;
+          }
+
+          return (
+            <div className={classes.root}>
+              <NProgressBar />
+              <CssBaseline />
+              <AppBar className={appBarClassName}>
+                <Toolbar>
+                  <IconButton
+                    color="inherit"
+                    aria-label="Open drawer"
+                    onClick={this.handleDrawerOpen}
+                    className={navIconClassName}
+                  >
+                    <MenuIcon />
+                  </IconButton>
+                  {title !== null && (
+                    <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+                      {title}
+                    </Typography>
+                  )}
+                  <div className={classes.grow} />
+                  <AppSearch />
+                  <Tooltip title="Edit docs colors" enterDelay={300}>
+                    <IconButton
+                      color="inherit"
+                      aria-label="Edit docs colors"
+                      component={Link}
+                      href="/style/color/#color-tool"
+                    >
+                      <ColorsIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Toggle light/dark theme" enterDelay={300}>
+                    <IconButton
+                      color="inherit"
+                      onClick={this.handleTogglePaletteType}
+                      aria-label="Toggle light/dark theme"
+                    >
+                      {uiTheme.paletteType === 'light' ? (
+                        <LightbulbOutlineIcon />
+                      ) : (
+                        <LightbulbFullIcon />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Toggle right-to-left/left-to-right" enterDelay={300}>
+                    <IconButton
+                      color="inherit"
+                      onClick={this.handleToggleDirection}
+                      aria-label="Toggle right-to-left/left-to-right"
+                    >
+                      {uiTheme.direction === 'rtl' ? (
+                        <FormatTextdirectionLToR />
+                      ) : (
+                        <FormatTextdirectionRToL />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="GitHub repository" enterDelay={300}>
+                    <IconButton
+                      component="a"
+                      color="inherit"
+                      href="https://github.com/mui-org/material-ui"
+                      aria-label="GitHub repository"
+                    >
+                      <GithubIcon />
+                    </IconButton>
+                  </Tooltip>
+                </Toolbar>
+              </AppBar>
+              <Notifications />
+              <AppDrawer
+                className={classes.drawer}
+                disablePermanent={disablePermanent}
+                onClose={this.handleDrawerClose}
+                onOpen={this.handleDrawerOpen}
+                mobileOpen={this.state.mobileOpen}
+              />
+              {children}
+            </div>
+          );
+        }}
+      </PageTitle>
     );
   }
 }
@@ -215,12 +218,6 @@ AppFrame.propTypes = {
   uiTheme: PropTypes.object.isRequired,
 };
 
-AppFrame.contextTypes = {
-  activePage: PropTypes.shape({
-    pathname: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 export default compose(
   connect(state => ({
     uiTheme: state.theme,

diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import PageContext from 'docs/src/modules/components/PageContext';
+
+function EditPage(props) {
+  const { markdownLocation, sourceCodeRootUrl } = props;
+
+  return (
+    <PageContext.Consumer>
+      {({ userLanguage }) => {
+        if (userLanguage === 'zh') {
+          return (
+            <Button component="a" href="https://translate.material-ui.com/project/material-ui-docs">
+              {'将此页面翻译成中文'}
+            </Button>
+          );
+        }
+
+        return (
+          <Button component="a" href={`${sourceCodeRootUrl}${markdownLocation}`}>
+            {'Edit this page'}
+          </Button>
+        );
+      }}
+    </PageContext.Consumer>
+  );
+}
+
+EditPage.propTypes = {
+  markdownLocation: PropTypes.string.isRequired,
+  sourceCodeRootUrl: PropTypes.string.isRequired,
+};
+
+export default EditPage;