2021-08-30 15:42:24 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
2021-09-03 12:28:01 +00:00
|
|
|
import initMatrix from '../../../client/initMatrix';
|
2021-08-30 15:42:24 +00:00
|
|
|
import {
|
2021-09-03 12:28:01 +00:00
|
|
|
selectSpace, openPublicRooms, openCreateRoom, openInviteUser,
|
2021-08-30 15:42:24 +00:00
|
|
|
} from '../../../client/action/navigation';
|
2021-09-03 12:28:01 +00:00
|
|
|
import navigation from '../../../client/state/navigation';
|
2021-08-30 15:42:24 +00:00
|
|
|
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
|
|
import Header, { TitleWrapper } from '../../atoms/header/Header';
|
|
|
|
import IconButton from '../../atoms/button/IconButton';
|
|
|
|
import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
|
|
|
|
|
|
|
|
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
|
|
|
|
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
|
|
|
|
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
|
2021-09-03 12:28:01 +00:00
|
|
|
import ChevronLeftIC from '../../../../public/res/ic/outlined/chevron-left.svg';
|
|
|
|
|
|
|
|
function DrawerHeader({ selectedTab, spaceId }) {
|
|
|
|
const mx = initMatrix.matrixClient;
|
|
|
|
const tabName = selectedTab === 'home' ? 'Home' : 'Direct messages';
|
|
|
|
|
|
|
|
const room = mx.getRoom(spaceId);
|
|
|
|
const spaceName = selectedTab === 'dm' ? null : (room?.name || null);
|
|
|
|
|
|
|
|
function handleBackClick() {
|
|
|
|
const spacePath = navigation.selectedSpacePath;
|
|
|
|
if (spacePath.length === 1) {
|
|
|
|
selectSpace(null);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
selectSpace(spacePath[spacePath.length - 2]);
|
|
|
|
}
|
2021-08-30 15:42:24 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Header>
|
|
|
|
<TitleWrapper>
|
2021-09-03 12:28:01 +00:00
|
|
|
<Text variant="s1">{spaceName || tabName}</Text>
|
2021-08-30 15:42:24 +00:00
|
|
|
</TitleWrapper>
|
2021-09-03 12:28:01 +00:00
|
|
|
{ spaceName && <IconButton onClick={handleBackClick} tooltip="Back" src={ChevronLeftIC} size="normal" /> }
|
|
|
|
{ selectedTab === 'dm' && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
|
|
|
|
{ selectSpace !== 'dm' && !spaceName && (
|
|
|
|
<>
|
2021-08-30 15:42:24 +00:00
|
|
|
<ContextMenu
|
|
|
|
content={(hideMenu) => (
|
|
|
|
<>
|
2021-08-31 13:13:31 +00:00
|
|
|
<MenuHeader>Add room</MenuHeader>
|
2021-08-30 15:42:24 +00:00
|
|
|
<MenuItem
|
|
|
|
iconSrc={HashPlusIC}
|
2021-08-31 13:13:31 +00:00
|
|
|
onClick={() => { hideMenu(); openCreateRoom(); }}
|
2021-08-30 15:42:24 +00:00
|
|
|
>
|
2021-08-31 13:13:31 +00:00
|
|
|
Create new room
|
2021-08-30 15:42:24 +00:00
|
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
|
|
iconSrc={HashSearchIC}
|
2021-08-31 13:13:31 +00:00
|
|
|
onClick={() => { hideMenu(); openPublicRooms(); }}
|
2021-08-30 15:42:24 +00:00
|
|
|
>
|
2021-08-31 13:13:31 +00:00
|
|
|
Add public room
|
2021-08-30 15:42:24 +00:00
|
|
|
</MenuItem>
|
|
|
|
</>
|
|
|
|
)}
|
2021-08-31 13:13:31 +00:00
|
|
|
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
|
2021-08-30 15:42:24 +00:00
|
|
|
/>
|
2021-09-03 12:28:01 +00:00
|
|
|
</>
|
|
|
|
)}
|
2021-08-30 15:42:24 +00:00
|
|
|
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
|
|
|
|
</Header>
|
|
|
|
);
|
|
|
|
}
|
2021-09-03 12:28:01 +00:00
|
|
|
|
|
|
|
DrawerHeader.defaultProps = {
|
|
|
|
spaceId: null,
|
|
|
|
};
|
2021-08-30 15:42:24 +00:00
|
|
|
DrawerHeader.propTypes = {
|
2021-09-03 12:28:01 +00:00
|
|
|
selectedTab: PropTypes.string.isRequired,
|
|
|
|
spaceId: PropTypes.string,
|
2021-08-30 15:42:24 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default DrawerHeader;
|