mc-react-header 0.2.1 → 0.3.3

package/src/MaterialsCloudHeader/Navbar.js

@@ -1,131 +1,104 @@
-import "./Navbar.css";
-
-import Logo from "./assets/mcloud_logo.png";
-
-import "font-awesome/css/font-awesome.min.css";
-import React from "react";
-
-const mainSections = {
-  learn: { name: "LEARN", link: "https://www.materialscloud.org/learn" },
-  work: { name: "WORK", link: "https://www.materialscloud.org/work" },
-  discover: {
-    name: "DISCOVER",
-    link: "https://www.materialscloud.org/discover",
-  },
-  explore: { name: "EXPLORE", link: "https://www.materialscloud.org/explore" },
-  archive: { name: "ARCHIVE", link: "https://www.materialscloud.org/archive" },
-};
-
-const dropdownSections = {
-  policies: {
-    name: "Policies",
-    link: "https://www.materialscloud.org/policies",
-  },
-  dmp: {
-    name: "Data Management Plan",
-    link: "https://www.materialscloud.org/dmp",
-  },
-  terms: {
-    name: "Terms of Use",
-    link: "https://www.materialscloud.org/termssummary",
-  },
-  infrastructure: {
-    name: "Infrastructure",
-    link: "https://www.materialscloud.org/infrastructure",
-  },
-  team: { name: "Team & Contact", link: "https://www.materialscloud.org/team" },
-  partners: {
-    name: "Partners",
-    link: "https://www.materialscloud.org/home#partners",
-  },
-  restapi: {
-    name: "Connect your REST API",
-    link: "https://www.materialscloud.org/explore/connect",
-  },
-};
-
-class DropdownMenu extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { dropdownOpen: false };
-    this.toggleDropdown = this.toggleDropdown.bind(this);
-    this.setWrapperRef = this.setWrapperRef.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener("mousedown", this.handleClickOutside);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-
-  setWrapperRef(node) {
-    this.wrapperRef = node;
-  }
-
-  handleClickOutside(event) {
-    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-      if (this.state.dropdownOpen) {
-        this.setState({ dropdownOpen: false });
-      }
-    }
-  }
-
-  toggleDropdown() {
-    this.setState({ dropdownOpen: !this.state.dropdownOpen });
-  }
-  render() {
-    let dropdownContentClass = "dropdown-content";
-    if (this.state.dropdownOpen) {
-      dropdownContentClass += " dropdown-open";
-    }
-    return (
-      <div ref={this.setWrapperRef} className="more-dropdown">
-        <a className="more-btn" onClick={this.toggleDropdown}>
-          More <i className="fa fa-caret-down"></i>
-        </a>
-        <div className={dropdownContentClass}>
-          {Object.keys(dropdownSections).map((element, i) => {
-            let cname = "";
-            if (element == this.props.activeSection) cname = "active";
-            return (
-              <a
-                key={i}
-                className={cname}
-                href={dropdownSections[element].link}
-              >
-                {dropdownSections[element].name}
-              </a>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
-
-class Navbar extends React.Component {
-  render() {
-    return (
-      <div className="mc-navbar">
-        <a className="mc-navbrand" href="https://www.materialscloud.org/home">
-          <img src={Logo} height="50" alt="MC logo" />
-        </a>
-        {Object.keys(mainSections).map((key, i) => {
-          let cname = "mc-navlink";
-          if (key == this.props.activeSection) cname += " active";
-          return (
-            <a key={i} className={cname} href={mainSections[key].link}>
-              {mainSections[key].name}
-            </a>
-          );
-        })}
-        <DropdownMenu activeSection={this.props.activeSection} />
-      </div>
-    );
-  }
-}
-
-export default Navbar;
+import "./Navbar.css";
+
+import Logo from "./assets/mcloud_logo.png";
+
+import "font-awesome/css/font-awesome.min.css";
+import { useEffect, useRef, useState } from "react";
+
+const mainSections = {
+  learn: { name: "LEARN", link: "https://www.materialscloud.org/learn" },
+  work: { name: "WORK", link: "https://www.materialscloud.org/work" },
+  discover: {
+    name: "DISCOVER",
+    link: "https://www.materialscloud.org/discover",
+  },
+  explore: { name: "EXPLORE", link: "https://www.materialscloud.org/explore" },
+  archive: { name: "ARCHIVE", link: "https://www.materialscloud.org/archive" },
+};
+
+const dropdownSections = {
+  policies: {
+    name: "Policies",
+    link: "https://www.materialscloud.org/policies",
+  },
+  dmp: {
+    name: "Data Management Plan",
+    link: "https://www.materialscloud.org/dmp",
+  },
+  terms: {
+    name: "Terms of Use",
+    link: "https://www.materialscloud.org/termssummary",
+  },
+  infrastructure: {
+    name: "Infrastructure",
+    link: "https://www.materialscloud.org/infrastructure",
+  },
+  team: { name: "Team & Contact", link: "https://www.materialscloud.org/team" },
+  partners: {
+    name: "Partners",
+    link: "https://www.materialscloud.org/home#partners",
+  },
+  restapi: {
+    name: "Connect your REST API",
+    link: "https://www.materialscloud.org/explore/connect",
+  },
+};
+
+const DropdownMenu = ({ activeSection }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const toggleDropdown = () => setDropdownOpen((prev) => !prev);
+
+  const dropdownContentClass =
+    "dropdown-content" + (dropdownOpen ? " dropdown-open" : "");
+
+  return (
+    <div ref={wrapperRef} className="more-dropdown">
+      <span className="more-btn" onClick={toggleDropdown}>
+        More <i className="fa fa-caret-down" />
+      </span>
+      <div className={dropdownContentClass}>
+        {Object.keys(dropdownSections).map((element, i) => {
+          const { link, name } = dropdownSections[element];
+          const cname = element === activeSection ? "active" : "";
+          return (
+            <a key={i} className={cname} href={link}>
+              {name}
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const Navbar = ({ activeSection }) => (
+  <div className="mc-navbar">
+    <a className="mc-navbrand" href="https://www.materialscloud.org/home">
+      <img src={Logo} height="50" alt="MC logo" />
+    </a>
+    {Object.keys(mainSections).map((key, i) => {
+      let cname = "mc-navlink";
+      if (key === activeSection) cname += " active";
+      return (
+        <a key={i} className={cname} href={mainSections[key].link}>
+          {mainSections[key].name}
+        </a>
+      );
+    })}
+    <DropdownMenu activeSection={activeSection} />
+  </div>
+);
+
+export default Navbar;

package/src/MaterialsCloudHeader/index.css

@@ -1,15 +1,14 @@
-.main-container {
-  background-color: #f0f6f9;
-  height: 100%;
-  padding-bottom: 10px;
-}
-
-.content-container {
-  background-color: white;
-  margin: 5px;
-  margin-top: 30px;
-  margin-bottom: 10px;
-  padding: 2px;
-  padding-bottom: 20px;
-  border-radius: 2px;
-}
+.main-container {
+  background-color: #f0f6f9;
+  min-height: 100vh;
+}
+
+.content-container {
+  background-color: white;
+  margin: 5px;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  padding: 2px;
+  padding-bottom: 20px;
+  border-radius: 2px;
+}

package/src/MaterialsCloudHeader/index.js

@@ -1,25 +1,16 @@
-import React from "react";
-import "./index.css";
-
-import Navbar from "./Navbar";
-import Breadcrumbs from "./Breadcrumbs";
-
-class MaterialsCloudHeader extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div className="main-container">
-        <Navbar activeSection={this.props.activeSection} />
-        <div className="content-container">
-          <Breadcrumbs breadcrumbsPath={this.props.breadcrumbsPath} />
-          {this.props.children}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default MaterialsCloudHeader;
+import "./index.css";
+
+import Navbar from "./Navbar";
+import Breadcrumbs from "./Breadcrumbs";
+
+const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath, children }) => (
+  <div className="main-container">
+    <Navbar activeSection={activeSection} />
+    <div className="content-container">
+      <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
+      {children}
+    </div>
+  </div>
+);
+
+export default MaterialsCloudHeader;

package/src/index.css

@@ -1,13 +1,13 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/index.js

@@ -1,18 +1,18 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-document.body.style = "background: white;";
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+document.body.style = "background: white;";
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/src/reportWebVitals.js

@@ -1,13 +1,13 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.js

@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';