fixed search in page, navigation to example and scroll back to top on…

… second click. (#2112) * solved issue of not scrolling on anchor click of website * fixed bug of scroll to top on double click
Hacker0x01 · Apr 16, 2020 · 279f9ff · 279f9ff
1 parent 9d6590e
commit 279f9ff
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/docs-site/src/components/App/index.js b/docs-site/src/components/App/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ExampleComponents from "../Examples";
 import ribbon from "./ribbon.png";
 import logo from "./logo.png";
@@ -7,10 +7,24 @@ import DatePicker from "react-datepicker";
 const Example = () => {
   const [isOpen, setIsOpen] = useState(true);
   const [startDate, setStartDate] = useState(new Date());
+  const [isScrolled, setIsScrolled] = useState(true);
+
+  useEffect(() => {
+    document.addEventListener("scroll", handleScroll);
+  }, []);
+
+  const handleScroll = () => {
+    const Show = window.scrollY < 400;
+    if (Show) {
+      setIsScrolled(true);
+    } else {
+      setIsScrolled(false);
+    }
+  };
 
   return (
     <DatePicker
-      open={isOpen}
+      open={isOpen && isScrolled}
       selected={startDate}
       onChange={date => {
         setStartDate(date);
@@ -31,7 +45,6 @@ const Root = () => (
             Crafted by{" "}
             <img
               src={logo}
-              ungiu
               className="hero__image"
               alt="HackerOne"
               title="HackerOne"

diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
@@ -346,14 +346,29 @@ export default class exampleComponents extends React.Component {
     }
   ];
 
+  handleAnchorClick = (e, id) => {
+    e.preventDefault();
+    document
+      .getElementById(id)
+      .scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+
   render() {
     return (
       <>
         <h1>Examples</h1>
         <ul className="examples__navigation">
           {this.examples.map((example, index) => (
             <li className="examples__navigation-item" key={`link-${index}`}>
-              <a href={`#example-${slugify(example.title, { lower: true })}`}>
+              <a
+                href={`#example-${slugify(example.title, { lower: true })}`}
+                onClick={e =>
+                  this.handleAnchorClick(
+                    e,
+                    `example-${slugify(example.title, { lower: true })}`
+                  )
+                }
+              >
                 {example.title}
               </a>
             </li>