PR Changes

src/components/MarkdownPage/MarkdownPage.js

@@ -26,6 +26,7 @@ const MarkdownPage = ({
   authors,
   createLink,
 	date,
+	enableScrollSync,
   ogDescription,
   location,
   markdownRemark,
@@ -98,6 +99,7 @@ const MarkdownPage = ({
 
             <div css={sharedStyles.articleLayout.sidebar}>
               <StickyResponsiveSidebar
+								enableScrollSync={enableScrollSync}
                 createLink={createLink}
                 defaultActiveSection={findSectionForPath(
                   location.pathname,
@@ -132,6 +134,7 @@ MarkdownPage.propTypes = {
   authors: PropTypes.array.isRequired,
   createLink: PropTypes.func.isRequired,
 	date: PropTypes.string,
+	enableScrollSync: PropTypes.bool,
   location: PropTypes.object.isRequired,
   markdownRemark: PropTypes.object.isRequired,
   sectionList: PropTypes.array.isRequired,

src/templates/components/Sidebar/ScrollSyncSection.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the CC-BY-4.0 license found
+ * in the LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import React, {Component} from 'react';
+import Section from './Section';
+
+class ScrollSyncSection extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      activeItemId: '',
+      itemTopOffsets: [],
+    };
+
+		this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
+		this.handleResize = this.handleResize.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    this.calculateItemTopOffsets();
+
+		window.addEventListener('resize', this.handleResize);
+		window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+		window.removeEventListener('resize', this.handleResize);
+		window.removeEventListener('scroll', this.handleScroll);
+	}
+
+	calculateItemTopOffsets() {
+		const {section} = this.props;
+
+		const itemIds = _getItemIds(section.items);
+		this.setState({
+			itemTopOffsets: _getElementTopOffsetsById(itemIds),
+		});
+	}
+
+	handleResize() {
+		this.calculateItemTopOffsets();
+		this.handleScroll();
+	}
+
+  handleScroll() {
+    const {itemTopOffsets} = this.state;
+    const item = itemTopOffsets.find((itemTopOffset, i) => {
+      const nextItemTopOffset = itemTopOffsets[i + 1];
+      if (nextItemTopOffset) {
+        return (
+          window.scrollY >= itemTopOffset.offsetTop &&
+          window.scrollY < nextItemTopOffset.offsetTop
+        );
+      }
+      return window.scrollY >= itemTopOffset.offsetTop;
+		});
+    this.setState({
+      activeItemId: item ? item.id : '',
+    });
+  }
+
+  render() {
+    const {activeItemId} = this.state;
+    return (
+      <Section
+				isScrollSync
+				activeItemId={activeItemId} {...this.props}
+			/>
+    );
+  }
+}
+
+const _getItemIds = items =>
+  items
+    .map(item => {
+      let subItemIds = [];
+      if (item.subitems) {
+        subItemIds = item.subitems.map(subitem => subitem.id);
+      }
+      return [item.id, ...subItemIds];
+    })
+    .reduce((prev, current) => prev.concat(current));
+
+const _getElementTopOffsetsById = ids =>
+  ids
+    .map(id => {
+      const element = document.getElementById(id);
+      if (!element) {
+        return null;
+      }
+      return {
+        id,
+        offsetTop: element.offsetTop,
+      };
+    })
+		.filter(item => item);
+
+export default ScrollSyncSection;

src/templates/components/Sidebar/Section.js

@@ -9,66 +9,21 @@
 
 'use strict';
 
-import React, {Component} from 'react';
 import {colors, media} from 'theme';
+import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-class Section extends Component {
+const Section = ({
-  constructor(props, context) {
+	activeItemId,
-    super(props, context);
-
-    this.state = {
-      activeItemId: null,
-      itemTopOffsets: [],
-    };
-
-    this.handleScroll = this.handleScroll.bind(this);
-  }
-
-  componentDidMount() {
-    const {section} = this.props;
-
-    const itemIds = _getItemIds(section.items);
-    this.setState({
-      itemTopOffsets: _getElementTopOffsetsById(itemIds),
-    });
-
-    window.addEventListener('scroll', this.handleScroll);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('scroll', this.handleScroll);
-  }
-
-  handleScroll() {
-    const {itemTopOffsets} = this.state;
-    const item = itemTopOffsets.find((itemTopOffset, i) => {
-      const nextItemTopOffset = itemTopOffsets[i + 1];
-      if (nextItemTopOffset) {
-        return (
-          window.scrollY >= itemTopOffset.offsetTop &&
-          window.scrollY < nextItemTopOffset.offsetTop
-        );
-      }
-      return window.scrollY >= itemTopOffset.offsetTop;
-    });
-    this.setState({
-      activeItemId: item ? item.id : null,
-    });
-  }
-
-  render() {
-    const {
   createLink,
 	isActive,
+	isScrollSync,
   location,
   onLinkClick,
   onSectionTitleClick,
   section,
-    } = this.props;
+}) => (
-    const {activeItemId} = this.state;
-    return (
   <div>
     <MetaTitle
       onClick={onSectionTitleClick}
@@ -111,11 +66,11 @@ class Section extends Component {
             marginTop: 5,
           }}>
           {createLink({
+						isActive: isScrollSync ? activeItemId === item.id : isItemActive(location, item),
             item,
             location,
             onLinkClick,
             section,
-                isActive: activeItemId === item.id,
           })}
 
           {item.subitems && (
@@ -123,11 +78,11 @@ class Section extends Component {
               {item.subitems.map(subitem => (
                 <li key={subitem.id}>
                   {createLink({
+										isActive: isScrollSync ? activeItemId === subitem.id : isItemActive(location, subitem),
                     item: subitem,
                     location,
                     onLinkClick,
                     section,
-                        isActive: activeItemId === subitem.id,
                   })}
                 </li>
               ))}
@@ -137,33 +92,6 @@ class Section extends Component {
       ))}
     </ul>
   </div>
-    );
+);
-  }
-}
-
-const _getItemIds = items =>
-  items
-    .map(item => {
-      let subItemIds = [];
-      if (item.subitems) {
-        subItemIds = item.subitems.map(subitem => subitem.id);
-      }
-      return [item.id, ...subItemIds];
-    })
-    .reduce((prev, current) => prev.concat(current));
-
-const _getElementTopOffsetsById = ids =>
-  ids
-    .map(id => {
-      const element = document.getElementById(id);
-      if (!element) {
-        return null;
-      }
-      return {
-        id,
-        offsetTop: element.offsetTop,
-      };
-    })
-    .filter(item => item);
 
 export default Section;

src/templates/components/Sidebar/Sidebar.js

@@ -12,6 +12,7 @@
 import React, {Component} from 'react';
 import Flex from 'components/Flex';
 import Section from './Section';
+import ScrollSyncSection from './ScrollSyncSection';
 import {media} from 'theme';
 
 class Sidebar extends Component {
@@ -24,9 +25,11 @@ class Sidebar extends Component {
   }
 
   render() {
-    const {closeParentMenu, createLink, location, sectionList} = this.props;
+    const {closeParentMenu, createLink, enableScrollSync, location, sectionList} = this.props;
 		const {activeSection} = this.state;
 
+		const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
+
     return (
       <Flex
         type="nav"
@@ -46,7 +49,7 @@ class Sidebar extends Component {
           },
         }}>
         {sectionList.map((section, index) => (
-          <Section
+          <SectionComponent
             createLink={createLink}
             isActive={activeSection === section || sectionList.length === 1}
             key={index}

src/templates/tutorial.js

@@ -27,6 +27,7 @@ const Tutorial = ({data, location}) => {
 
   return (
     <MarkdownPage
+			enableScrollSync
       createLink={createLinkTutorial}
       location={location}
       markdownRemark={data.markdownRemark}

src/utils/createLink.js

@@ -18,19 +18,16 @@ import isItemActive from 'utils/isItemActive';
 import slugify from 'utils/slugify';
 import {colors, media} from 'theme';
 
-const createLinkBlog = ({item, location, section, isActive}) => {
+const createLinkBlog = ({isActive, item, section}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
   return (
-    <Link css={[linkCss, active && activeLinkCss]} to={item.id}>
+    <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
-      {active && <span css={activeLinkBefore} />}
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
 };
 
-const createLinkCommunity = ({item, location, section}) => {
+const createLinkCommunity = ({isActive, item, section}) => {
   if (item.href) {
     return (
       <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
@@ -47,42 +44,30 @@ const createLinkCommunity = ({item, location, section}) => {
     );
   }
   return createLinkDocs({
+		isActive,
     item,
-    location,
     section,
   });
 };
 
-const createLinkDocs = ({item, location, section, isActive}) => {
+const createLinkDocs = ({isActive, item, section}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
   return (
     <Link
-      css={[linkCss, active && activeLinkCss]}
+      css={[linkCss, isActive && activeLinkCss]}
       to={slugify(item.id, section.directory)}>
-      {active && <span css={activeLinkBefore} />}
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );
 };
 
-const createLinkTutorial = ({
+const createLinkTutorial = ({isActive, item, onLinkClick, section}) => {
-  item,
-  location,
-  onLinkClick,
-  section,
-  isActive,
-}) => {
-  const active =
-    typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
-
   return (
     <Link
-      css={[linkCss, active && activeLinkCss]}
+      css={[linkCss, isActive && activeLinkCss]}
       onClick={onLinkClick}
       to={item.href}>
-      {active && <span css={activeLinkBefore} />}
+      {isActive && <span css={activeLinkBefore} />}
       {item.title}
     </Link>
   );