verdaccio-ui/src/components/Header/Header.tsx
Priscila Oliveira b56e43846b fix: rest MUI components - Introduced ForwardRef (#224)
* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors
2019-10-31 08:12:18 +01:00

63 lines
1.8 KiB
TypeScript

import React, { useState } from 'react';
import Search from '../Search';
import { getRegistryURL } from '../../utils/url';
import Button from '../../muiComponents/Button';
import { NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar } from './styles';
import HeaderLeft from './HeaderLeft';
import HeaderRight from './HeaderRight';
import HeaderInfoDialog from './HeaderInfoDialog';
interface Props {
logo?: string;
username?: string;
onLogout: () => void;
onToggleLoginModal: () => void;
scope: string;
withoutSearch?: boolean;
}
/* eslint-disable react/jsx-max-depth */
/* eslint-disable react/jsx-no-bind*/
const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onToggleLoginModal, scope }) => {
const [isInfoDialogOpen, setOpenInfoDialog] = useState();
const [showMobileNavBar, setShowMobileNavBar] = useState();
return (
<>
<NavBar position="static">
<InnerNavBar>
<HeaderLeft logo={logo} />
<HeaderRight
onLogout={onLogout}
onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
onToggleLogin={onToggleLoginModal}
onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
username={username}
withoutSearch={withoutSearch}
/>
</InnerNavBar>
<HeaderInfoDialog
isOpen={isInfoDialogOpen}
onCloseDialog={() => setOpenInfoDialog(false)}
registryUrl={getRegistryURL()}
scope={scope}
/>
</NavBar>
{showMobileNavBar && !withoutSearch && (
<MobileNavBar>
<InnerMobileNavBar>
<Search />
</InnerMobileNavBar>
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
{'Cancel'}
</Button>
</MobileNavBar>
)}
</>
);
};
export default Header;