taskcafe/web/src/shared/components/TopNavbar/index.tsx

124 lines
3.6 KiB
TypeScript
Raw Normal View History

2020-04-10 04:40:22 +02:00
import React, { useRef } from 'react';
2020-05-27 02:53:31 +02:00
import { Star, Bell, Cog, AngleDown } from 'shared/icons';
2020-04-10 04:40:22 +02:00
import {
NotificationContainer,
2020-05-27 23:18:50 +02:00
InviteButton,
2020-04-10 04:40:22 +02:00
GlobalActions,
ProjectActions,
2020-05-27 02:53:31 +02:00
ProjectSwitcher,
Separator,
2020-04-21 01:04:27 +02:00
ProjectMeta,
ProjectName,
ProjectTabs,
ProjectTab,
2020-04-10 04:40:22 +02:00
NavbarWrapper,
NavbarHeader,
Breadcrumbs,
BreadcrumpSeparator,
2020-05-27 02:53:31 +02:00
ProjectSettingsButton,
2020-04-10 04:40:22 +02:00
ProfileIcon,
ProfileContainer,
ProfileNameWrapper,
ProfileNamePrimary,
ProfileNameSecondary,
2020-05-27 23:18:50 +02:00
ProjectMembers,
2020-04-10 04:40:22 +02:00
} from './Styles';
2020-05-27 23:18:50 +02:00
import TaskAssignee from 'shared/components/TaskAssignee';
import { usePopup, Popup } from 'shared/components/PopupMenu';
import MiniProfile from 'shared/components/MiniProfile';
2020-04-10 04:40:22 +02:00
type NavBarProps = {
2020-05-27 02:53:31 +02:00
projectName: string;
2020-04-10 04:40:22 +02:00
onProfileClick: (bottom: number, right: number) => void;
onNotificationClick: () => void;
2020-04-21 01:04:27 +02:00
bgColor: string;
2020-04-20 05:02:55 +02:00
firstName: string;
lastName: string;
initials: string;
2020-05-27 23:18:50 +02:00
projectMembers?: Array<TaskUser> | null;
2020-04-10 04:40:22 +02:00
};
2020-04-21 01:04:27 +02:00
const NavBar: React.FC<NavBarProps> = ({
2020-05-27 02:53:31 +02:00
projectName,
2020-04-21 01:04:27 +02:00
onProfileClick,
onNotificationClick,
firstName,
lastName,
initials,
bgColor,
2020-05-27 23:18:50 +02:00
projectMembers,
2020-04-21 01:04:27 +02:00
}) => {
2020-04-10 04:40:22 +02:00
const $profileRef: any = useRef(null);
const handleProfileClick = () => {
console.log('click');
const boundingRect = $profileRef.current.getBoundingClientRect();
onProfileClick(boundingRect.bottom, boundingRect.right);
};
2020-05-27 23:18:50 +02:00
const { showPopup } = usePopup();
const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
showPopup(
$targetRef,
<Popup title={null} onClose={() => {}} tab={0}>
<MiniProfile
profileIcon={projectMembers ? projectMembers[0].profileIcon : { url: null, initials: 'JK', bgColor: '#000' }}
displayName="Jordan Knott"
username="@jordanthedev"
bio="None"
onRemoveFromTask={() => {}}
/>
</Popup>,
);
};
2020-04-10 04:40:22 +02:00
return (
<NavbarWrapper>
<NavbarHeader>
<ProjectActions>
2020-04-21 01:04:27 +02:00
<ProjectMeta>
2020-05-27 02:53:31 +02:00
<ProjectSwitcher>Projects</ProjectSwitcher>
<Separator>»</Separator>
<ProjectName>{projectName}</ProjectName>
<ProjectSettingsButton>
<AngleDown color="#c2c6dc" />
</ProjectSettingsButton>
2020-05-27 23:18:50 +02:00
<ProjectSettingsButton>
<Star width={16} height={16} color="#c2c6dc" />
</ProjectSettingsButton>
2020-04-21 01:04:27 +02:00
</ProjectMeta>
<ProjectTabs>
2020-05-27 02:53:31 +02:00
<ProjectTab active>Board</ProjectTab>
<ProjectTab>Calender</ProjectTab>
<ProjectTab>Timeline</ProjectTab>
<ProjectTab>Wiki</ProjectTab>
2020-04-21 01:04:27 +02:00
</ProjectTabs>
2020-04-10 04:40:22 +02:00
</ProjectActions>
<GlobalActions>
2020-05-27 23:18:50 +02:00
{projectMembers && (
<ProjectMembers>
{projectMembers.map(member => (
<TaskAssignee size={28} member={member} onMemberProfile={onMemberProfile} />
))}
<InviteButton>Invite</InviteButton>
</ProjectMembers>
)}
2020-04-10 04:40:22 +02:00
<NotificationContainer onClick={onNotificationClick}>
<Bell color="#c2c6dc" size={20} />
</NotificationContainer>
<ProfileContainer>
<ProfileNameWrapper>
2020-04-20 05:02:55 +02:00
<ProfileNamePrimary>
{firstName} {lastName}
</ProfileNamePrimary>
2020-04-10 04:40:22 +02:00
<ProfileNameSecondary>Manager</ProfileNameSecondary>
</ProfileNameWrapper>
2020-04-21 01:04:27 +02:00
<ProfileIcon ref={$profileRef} onClick={handleProfileClick} bgColor={bgColor}>
2020-04-20 05:02:55 +02:00
{initials}
2020-04-10 04:40:22 +02:00
</ProfileIcon>
</ProfileContainer>
</GlobalActions>
</NavbarHeader>
</NavbarWrapper>
);
};
export default NavBar;