import React, { useRef, useState, useEffect } from 'react'; import { Star, Ellipsis, Bell, Cog, AngleDown } from 'shared/icons'; import { NotificationContainer, ProjectNameTextarea, InviteButton, GlobalActions, ProjectActions, ProjectSwitcher, Separator, ProjectMeta, ProjectName, ProjectTabs, ProjectTab, NavbarWrapper, NavbarHeader, Breadcrumbs, BreadcrumpSeparator, ProjectSettingsButton, ProfileIcon, ProfileContainer, ProfileNameWrapper, ProfileNamePrimary, ProfileNameSecondary, ProjectMembers, } from './Styles'; import TaskAssignee from 'shared/components/TaskAssignee'; import { usePopup, Popup } from 'shared/components/PopupMenu'; import MiniProfile from 'shared/components/MiniProfile'; type ProjectHeadingProps = { projectName: string; onSaveProjectName?: (projectName: string) => void; onOpenSettings: ($target: React.RefObject) => void; }; const ProjectHeading: React.FC = ({ projectName: initialProjectName, onSaveProjectName, onOpenSettings, }) => { const [isEditProjectName, setEditProjectName] = useState(false); const [projectName, setProjectName] = useState(initialProjectName); const $projectName = useRef(null); useEffect(() => { if (isEditProjectName && $projectName && $projectName.current) { $projectName.current.focus(); $projectName.current.select(); } }, [isEditProjectName]); useEffect(() => { setProjectName(initialProjectName); }, [initialProjectName]); const onProjectNameChange = (event: React.FormEvent): void => { setProjectName(event.currentTarget.value); }; const onProjectNameBlur = () => { if (onSaveProjectName) { onSaveProjectName(projectName); } setEditProjectName(false); }; const onProjectNameKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); if ($projectName && $projectName.current) { $projectName.current.blur(); } } }; const $settings = useRef(null); return ( <> ยป {isEditProjectName ? ( ) : ( { setEditProjectName(true); }} > {projectName} )} { onOpenSettings($settings); }} ref={$settings} > ); }; type NavBarProps = { projectName: string | null; onProfileClick: (bottom: number, right: number) => void; onSaveProjectName?: (projectName: string) => void; onNotificationClick: () => void; bgColor: string; onOpenSettings: ($target: React.RefObject) => void; firstName: string; lastName: string; initials: string; projectMembers?: Array | null; }; const NavBar: React.FC = ({ projectName, onSaveProjectName, onProfileClick, onNotificationClick, firstName, lastName, initials, bgColor, projectMembers, onOpenSettings, }) => { const $profileRef: any = useRef(null); const handleProfileClick = () => { const boundingRect = $profileRef.current.getBoundingClientRect(); onProfileClick(boundingRect.bottom, boundingRect.right); }; const { showPopup } = usePopup(); const onMemberProfile = ($targetRef: React.RefObject, memberID: string) => { showPopup( $targetRef, {}} tab={0}> {}} /> , ); }; return ( Projects {projectName && ( )} {projectName && ( Board Calender Timeline Wiki )} {projectMembers && ( {projectMembers.map(member => ( ))} Invite )} {`${firstName} ${lastName}`} Manager {initials} ); }; export default NavBar;