verdaccio-ui/src/components/Header/HeaderMenu.tsx
Priscila Oliveira 42d3bb8508 feat: login Dialog Component - Replaced class by func. comp + added react-hook-form (#341)
* refactor: convert class to func

* refactor: changed login form logic

* refactor: conver to testing-library tests

* refactor: moved dependency

* refactor: replaced uglifyjs-webpack-plugin by terser-webpack-plugin

* fix: fixed e2e errors

* fix: fixed e2e test

* Delete settings.json

* fix: vscode settings rollback

* refactor: rollback webpack config

* refactor: updated eslint rule

* fix: removed --fix

* refactor: incresed the bundle size
2019-12-06 18:09:01 +01:00

58 lines
1.5 KiB
TypeScript

import React, { MouseEvent } from 'react';
import AccountCircle from '@material-ui/icons/AccountCircle';
import IconButton from '../../muiComponents/IconButton';
import MenuItem from '../../muiComponents/MenuItem';
import Menu from '../../muiComponents/Menu';
import HeaderGreetings from './HeaderGreetings';
interface Props {
username: string;
isMenuOpen: boolean;
anchorEl?: Element | ((element: Element) => Element) | null | undefined;
onLogout: () => void;
onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;
onLoggedInMenuClose: () => void;
}
const HeaderMenu: React.FC<Props> = ({
onLogout,
username,
isMenuOpen = false,
anchorEl,
onLoggedInMenu,
onLoggedInMenuClose,
}) => (
<>
<IconButton
color="inherit"
data-testid="header--menu-accountcircle"
id="header--button-account"
onClick={onLoggedInMenu}>
<AccountCircle />
</IconButton>
<Menu
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
onClose={onLoggedInMenuClose}
open={isMenuOpen}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}>
<MenuItem disabled={true}>
<HeaderGreetings username={username} />
</MenuItem>
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
{'Logout'}
</MenuItem>
</Menu>
</>
);
export default HeaderMenu;