orcs-design-system/es/components/Header/UserMenu.js

TeamForm's Design System, aka: ORCS

import React, { useState, useRef, useEffect } from "react";
import PropTypes from "prop-types";
import Avatar from "../Avatar";
import Icon from "../Icon";
import Divider from "../Divider";
import { Small } from "../Typography";
import { UserMenuToggle, AvatarBorder, UserMenuContainer, UserMenuContent, IconContainer } from "./Header.styles";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UserMenu = _ref => {
  let {
    avatarSource,
    avatarAlt,
    avatarInitials,
    userName,
    userMenuContent
  } = _ref;
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef(null);
  useEffect(() => {
    const handleClickOutside = event => {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };
  return /*#__PURE__*/_jsxs(UserMenuContainer, {
    ref: menuRef,
    children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
      onClick: toggleMenu,
      children: [/*#__PURE__*/_jsx(AvatarBorder, {
        borderRadius: "50%",
        p: "2px",
        children: /*#__PURE__*/_jsx(Avatar, {
          customSize: "navBarAvatarSize",
          image: avatarSource,
          imageAlt: avatarAlt,
          initials: avatarInitials
        })
      }), /*#__PURE__*/_jsx(IconContainer, {
        alignItems: "center",
        justifyContent: "center",
        borderRadius: "50%",
        p: "2px",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "chevron-down"],
          rotation: isOpen ? 180 : 0,
          color: "white",
          size: "xs",
          mt: isOpen ? "0" : "1px"
        })
      })]
    }), /*#__PURE__*/_jsxs(UserMenuContent, {
      p: "s",
      bg: "white",
      width: "fit-content",
      maxWidth: "260px",
      minWidth: "200px",
      maxHeight: "430px",
      border: "solid 1px",
      borderRadius: "2",
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
      justifyContent: "flex-start",
      borderColor: "greyLight",
      shadow: "default",
      isOpen: isOpen,
      children: [/*#__PURE__*/_jsx(Small, {
        color: "greyDarker",
        fontSize: "0",
        children: userName
      }), /*#__PURE__*/_jsx(Divider, {
        light: true
      }), userMenuContent]
    })]
  });
};
UserMenu.propTypes = {
  /** Text for logged in user name and email. */
  userName: PropTypes.node,
  /** Source path for avatar image. */
  avatarSource: PropTypes.node,
  /** Alt text for avatar image. */
  avatarAlt: PropTypes.string,
  /** Initials for avatar as fallback if there is no image */
  avatarInitials: PropTypes.string,
  /** Allows you to pass in child components to user dropdown menu */
  userMenuContent: PropTypes.node
};
UserMenu.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "UserMenu",
  "props": {
    "userName": {
      "description": "Text for logged in user name and email.",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "avatarSource": {
      "description": "Source path for avatar image.",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "avatarAlt": {
      "description": "Alt text for avatar image.",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "avatarInitials": {
      "description": "Initials for avatar as fallback if there is no image",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "userMenuContent": {
      "description": "Allows you to pass in child components to user dropdown menu",
      "type": {
        "name": "node"
      },
      "required": false
    }
  }
};
export default UserMenu;