[Docs] Add fragment URL (#4069)

* Added scroll to hash functionality * Removing setTimeout()
elastic · Sep 23, 2020 · c94385e · c94385e
1 parent 413c1f0
commit c94385e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
+    "@types/react-router-dom": "^5.1.5",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^8.3.0",

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -96,20 +96,6 @@ export class GuidePageChrome extends Component {
     }, 250);
   };
 
-  onClickLink = id => {
-    // Scroll to element.
-    scrollToSelector(`#${id}`);
-
-    if (this._isMounted)
-      this.setState(
-        {
-          search: '',
-          isSideNavOpenOnMobile: false,
-        },
-        this.scrollNavSectionIntoView
-      );
-  };
-
   onClickRoute = () => {
     if (this._isMounted)
       this.setState(
@@ -119,12 +105,6 @@ export class GuidePageChrome extends Component {
         },
         this.scrollNavSectionIntoView
       );
-
-    // To delay scroll to top when switched to a new page
-    setTimeout(() => {
-      if (document.body) document.body.scrollTop = 0;
-      if (document.documentElement) document.documentElement.scrollTop = 0;
-    }, 0);
   };
 
   onButtonClick() {
@@ -229,8 +209,7 @@ export class GuidePageChrome extends Component {
       return {
         id: `subSection-${id}`,
         name,
-        href,
-        onClick: this.onClickLink.bind(this, id),
+        href: href.concat(`#${id}`),
       };
     });
   };

diff --git a/src-docs/src/components/scroll_to_hash.tsx b/src-docs/src/components/scroll_to_hash.tsx
@@ -0,0 +1,20 @@
+import { useEffect, FunctionComponent } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToHash: FunctionComponent = () => {
+  const location = useLocation();
+  useEffect(() => {
+    const element = document.getElementById(location.hash.replace('#', ''));
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      window.scrollTo({
+        behavior: 'auto',
+        top: 0,
+      });
+    }
+  }, [location]);
+  return null;
+};
+
+export default ScrollToHash;
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
@@ -20,6 +20,7 @@ import themeDark from './theme_dark.scss';
 import themeAmsterdamLight from './theme_amsterdam_light.scss';
 import themeAmsterdamDark from './theme_amsterdam_dark.scss';
 import { ThemeProvider } from './components/with_theme/theme_context';
+import ScrollToHash from './components/scroll_to_hash';
 
 registerTheme('light', [themeLight]);
 registerTheme('dark', [themeDark]);
@@ -50,6 +51,7 @@ ReactDOM.render(
   <Provider store={store}>
     <ThemeProvider>
       <Router history={history}>
+        <ScrollToHash />
         <Switch>
           {routes.map(
             ({ name, path, sections, isNew, component, from, to }, i) => {

diff --git a/yarn.lock b/yarn.lock
@@ -1418,6 +1418,11 @@
   resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.4.tgz#8c3496bd1b50cc04aeefd691140aa571d4dbfa34"
   integrity sha512-t2szdkwmg2JJyuCM20e8kR2X59WCE5Zkl4bzm1u1Oukjm79zpbiAv+QjnwLnuuV0WHEcX2NgUItu0pAMKuOPww==
 
+"@types/history@*":
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
+  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -1532,6 +1537,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
+  integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa"
+  integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-virtualized-auto-sizer@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"