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;
|