import React, { useRef, useState, useEffect } from 'react'; import { Star, Ellipsis, Bell, Cog, AngleDown } from 'shared/icons'; import ProfileIcon from 'shared/components/ProfileIcon'; import { NotificationContainer, ProjectNameTextarea, InviteButton, GlobalActions, ProjectActions, ProjectSwitcher, Separator, ProjectMeta, ProjectName, ProjectTabs, ProjectTab, NavbarWrapper, NavbarHeader, Breadcrumbs, BreadcrumpSeparator, ProjectSettingsButton, 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: ($target: React.RefObject) => void; onSaveProjectName?: (projectName: string) => void; onNotificationClick: () => void; user: TaskUser | null; onOpenSettings: ($target: React.RefObject) => void; projectMembers?: Array | null; }; const NavBar: React.FC = ({ projectName, onSaveProjectName, onProfileClick, onNotificationClick, user, projectMembers, onOpenSettings, }) => { const handleProfileClick = ($target: React.RefObject) => { if ($target && $target.current) { onProfileClick($target); } }; 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 )} {user && ( {user.fullName} Manager } )} ); }; export default NavBar;