2019-10-08 12:47:11 +07:00
|
|
|
import React, { useState, useEffect, MouseEvent } from 'react';
|
2019-10-12 13:45:39 +07:00
|
|
|
|
|
|
|
import Button from '../../muiComponents/Button';
|
2019-10-08 12:47:11 +07:00
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2019-10-27 21:49:30 +07:00
|
|
|
const HeaderRight: React.FC<Props> = ({
|
|
|
|
withoutSearch = false,
|
|
|
|
username,
|
|
|
|
onToggleLogin,
|
|
|
|
onLogout,
|
|
|
|
onToggleMobileNav,
|
|
|
|
onOpenRegistryInfoDialog,
|
|
|
|
}) => {
|
2019-10-08 12:47:11 +07:00
|
|
|
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 (
|
2019-11-25 01:21:08 +07:00
|
|
|
<RightSide data-testid="header-right">
|
2019-10-27 21:49:30 +07:00
|
|
|
{!withoutSearch && (
|
|
|
|
<HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
|
|
|
|
)}
|
2019-10-08 12:47:11 +07:00
|
|
|
<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;
|