mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
01439641ca
React IDE page: working editor GitOrigin-RevId: 3ba8cb787a6f7f8435686d8962adb7444d09acb5
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import React, { useCallback } from 'react'
|
|
import ChatToggleButton from '@/features/editor-navigation-toolbar/components/chat-toggle-button'
|
|
import HistoryToggleButton from '@/features/editor-navigation-toolbar/components/history-toggle-button'
|
|
import LayoutDropdownButton from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
|
|
import MenuButton from '@/features/editor-navigation-toolbar/components/menu-button'
|
|
import { useLayoutContext } from '@/shared/context/layout-context'
|
|
import { sendMB } from '@/infrastructure/event-tracking'
|
|
import OnlineUsersWidget from '@/features/editor-navigation-toolbar/components/online-users-widget'
|
|
import { useOnlineUsersContext } from '@/features/ide-react/context/online-users-context'
|
|
|
|
type HeaderProps = {
|
|
chatIsOpen: boolean
|
|
setChatIsOpen: (chatIsOpen: boolean) => void
|
|
historyIsOpen: boolean
|
|
setHistoryIsOpen: (historyIsOpen: boolean) => void
|
|
}
|
|
|
|
export default function Header({
|
|
chatIsOpen,
|
|
setChatIsOpen,
|
|
historyIsOpen,
|
|
setHistoryIsOpen,
|
|
}: HeaderProps) {
|
|
const { setLeftMenuShown } = useLayoutContext()
|
|
const { onlineUsersArray } = useOnlineUsersContext()
|
|
|
|
function toggleChatOpen() {
|
|
setChatIsOpen(!chatIsOpen)
|
|
}
|
|
|
|
function toggleHistoryOpen() {
|
|
setHistoryIsOpen(!historyIsOpen)
|
|
}
|
|
|
|
const handleShowLeftMenuClick = useCallback(() => {
|
|
sendMB('navigation-clicked-menu')
|
|
setLeftMenuShown(value => !value)
|
|
}, [setLeftMenuShown])
|
|
|
|
return (
|
|
<header className="toolbar toolbar-header">
|
|
<div className="toolbar-left">
|
|
<MenuButton onClick={handleShowLeftMenuClick} />
|
|
</div>
|
|
<div className="toolbar-right">
|
|
<OnlineUsersWidget
|
|
onlineUsers={onlineUsersArray}
|
|
goToUser={() => alert('Not implemented')}
|
|
/>
|
|
<LayoutDropdownButton />
|
|
<HistoryToggleButton
|
|
historyIsOpen={historyIsOpen}
|
|
onClick={toggleHistoryOpen}
|
|
/>
|
|
<ChatToggleButton
|
|
chatIsOpen={chatIsOpen}
|
|
onClick={toggleChatOpen}
|
|
unreadMessageCount={0}
|
|
/>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|