web2.0-frontend/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx

import * as React from "react";
import "./NavbarDropdownLink.scss";
import DropDownBox from "../DropDownBox/DropDownBox";
import Anchor from "../Anchor";

export interface NavbarDropdownLinkProps {
  to: string;
  text: string;
  exploded?: boolean; // if exploded, show items directly underneath without a dropdown menu
}
export interface NavbarDropdownLinkState {
  mouseOverLink: boolean;
  mouseOverBox: boolean;
}

class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, NavbarDropdownLinkState> {
  constructor(props) {
    super(props);
    this.state = {
      mouseOverLink: false,
      mouseOverBox: false,
    };
  }

  handleMouseEnterLink = () => {
    this.setState({
      mouseOverLink: true,
    });
  }

  handleMouseLeaveLink = () => {
    this.setState({
      mouseOverLink: false,
    });
  }

  handleMouseEnterBox = () => {
    this.setState({
      mouseOverBox: true,
    });
  }

  handleMouseLeaveBox = () => {
    this.setState({
      mouseOverBox: false,
    });
  }

  render() {
    const { children, exploded, text, to } = this.props;
    const { mouseOverLink, mouseOverBox } = this.state;
    const open = mouseOverLink || mouseOverBox;

    if (exploded) {
      return (
        <React.Fragment>
          <Anchor className="navbar-dropdown-link"
            to={this.props.to}
          >{text}</Anchor>
          {children}
        </React.Fragment>
      );
    }

    return (
      <div className="navbar-dropdown-container">
        <Anchor className="navbar-dropdown-link"
          to={to}
          onMouseEnter={this.handleMouseEnterLink}
          onMouseLeave={this.handleMouseLeaveLink}
        >{text}</Anchor>
        <DropDownBox
          onMouseEnter={this.handleMouseEnterBox}
          onMouseLeave={this.handleMouseLeaveBox}
          visible={open && !!children}
        >
          {children}
        </DropDownBox>
      </div>
    );
  }
}

export default NavbarDropdownLink;