diff --git a/CHANGELOG.md b/CHANGELOG.md index a222b2b81..8c3f23028 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,6 +59,7 @@ - Switched CircleCI ImageMagick download to use http - Modified CI config to take advantage of partial dependency caching and exploit parallelism when resolving/updating dependencies - Migrate graph-related components (FocusBar, FocusTab, GraphDropdown, GraphFallback, Infobox, and Sidebar) from classes to functions +- Refactor GraphDropdown component from being a child of Graph to being a child of NavBar - Added `lint-staged` development dependency and fixed eslint issues - Updated CircleCI ImageMagick setup to avoid using AppImage executable and to cache download diff --git a/js/components/common/NavBar.js.jsx b/js/components/common/NavBar.js.jsx index e046c7976..0f707df21 100644 --- a/js/components/common/NavBar.js.jsx +++ b/js/components/common/NavBar.js.jsx @@ -2,12 +2,32 @@ import React from "react" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faDownload } from "@fortawesome/free-solid-svg-icons" import { Tooltip } from "react-tooltip" +import GraphDropdown from "../graph/GraphDropdown" /** * NavBar component. */ -export function NavBar({ selected_page, open_modal }) { +export function NavBar({ selected_page, open_modal, graphs = [], updateGraph }) { const isActive = page => (page === selected_page ? "selected-page" : undefined) + const [showGraphDropdown, setShowGraphDropdown] = React.useState(false) + const [dropdownTimeouts, setDropdownTimeouts] = React.useState([]) + + const clearDropdownTimeouts = () => { + dropdownTimeouts.forEach(timeout => clearTimeout(timeout)) + setDropdownTimeouts([]) + } + + const handleShowGraphDropdown = () => { + clearDropdownTimeouts() + setShowGraphDropdown(true) + } + + const handleHideGraphDropdown = () => { + const timeout = setTimeout(() => { + setShowGraphDropdown(false) + }, 500) + setDropdownTimeouts(dropdownTimeouts.concat(timeout)) + } return (