forked from sombochea/verdaccio-ui
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
|
import React, { useState, useEffect, MouseEvent } from 'react';
|
||
|
import Button from '@material-ui/core/Button';
|
||
|
|
||
|
import { RightSide } from './styles';
|
||
|
import HeaderToolTip from './HeaderToolTip';
|
||
|
import HeaderMenu from './HeaderMenu';
|
||
|
|
||
|
interface Props {
|
||
|
withoutSearch?: boolean;
|
||
|
username?: string;
|
||
|
onToggleLogin: () => void;
|
||
|
onOpenRegistryInfoDialog: () => void;
|
||
|
onToggleMobileNav: () => void;
|
||
|
onLogout: () => void;
|
||
|
}
|
||
|
|
||
|
const HeaderRight: React.FC<Props> = ({ withoutSearch = false, username, onToggleLogin, onLogout, onToggleMobileNav, onOpenRegistryInfoDialog }) => {
|
||
|
const [anchorEl, setAnchorEl] = useState();
|
||
|
const [isMenuOpen, setIsMenuOpen] = useState();
|
||
|
|
||
|
useEffect(() => {
|
||
|
setIsMenuOpen(Boolean(anchorEl));
|
||
|
}, [anchorEl]);
|
||
|
|
||
|
/**
|
||
|
* opens popover menu for logged in user.
|
||
|
*/
|
||
|
const handleLoggedInMenu = (event: MouseEvent<HTMLButtonElement>) => {
|
||
|
setAnchorEl(event.currentTarget);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* closes popover menu for logged in user
|
||
|
*/
|
||
|
const handleLoggedInMenuClose = () => {
|
||
|
setAnchorEl(null);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* close/open popover menu for logged in users.
|
||
|
*/
|
||
|
const handleToggleLogin = () => {
|
||
|
setAnchorEl(null);
|
||
|
onToggleLogin();
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<RightSide>
|
||
|
{!withoutSearch && <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />}
|
||
|
<HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
|
||
|
<HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
|
||
|
{username ? (
|
||
|
<HeaderMenu
|
||
|
anchorEl={anchorEl}
|
||
|
isMenuOpen={isMenuOpen}
|
||
|
onLoggedInMenu={handleLoggedInMenu}
|
||
|
onLoggedInMenuClose={handleLoggedInMenuClose}
|
||
|
onLogout={onLogout}
|
||
|
username={username}
|
||
|
/>
|
||
|
) : (
|
||
|
<Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
|
||
|
{'Login'}
|
||
|
</Button>
|
||
|
)}
|
||
|
</RightSide>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default HeaderRight;
|