mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-19 12:50:17 -04:00
190 lines
5.1 KiB
JavaScript
190 lines
5.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './DrawerHeader.scss';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
import cons from '../../../client/state/cons';
|
|
import {
|
|
openPublicRooms,
|
|
openCreateRoom,
|
|
openSpaceManage,
|
|
openJoinAlias,
|
|
openSpaceAddExisting,
|
|
openInviteUser,
|
|
openReusableContextMenu,
|
|
} from '../../../client/action/navigation';
|
|
import { getEventCords } from '../../../util/common';
|
|
|
|
import { blurOnBubbling } from '../../atoms/button/script';
|
|
|
|
import Text from '../../atoms/text/Text';
|
|
import RawIcon from '../../atoms/system-icons/RawIcon';
|
|
import Header, { TitleWrapper } from '../../atoms/header/Header';
|
|
import IconButton from '../../atoms/button/IconButton';
|
|
import { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
|
|
import SpaceOptions from '../../molecules/space-options/SpaceOptions';
|
|
|
|
import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
|
|
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
|
|
import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
|
|
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
|
|
import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
|
|
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
|
|
|
|
export function HomeSpaceOptions({ spaceId, afterOptionSelect }) {
|
|
const mx = initMatrix.matrixClient;
|
|
const room = mx.getRoom(spaceId);
|
|
const canManage = room
|
|
? room.currentState.maySendStateEvent('m.space.child', mx.getUserId())
|
|
: true;
|
|
|
|
return (
|
|
<>
|
|
<MenuHeader>Add rooms or spaces</MenuHeader>
|
|
<MenuItem
|
|
iconSrc={SpacePlusIC}
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openCreateRoom(true, spaceId);
|
|
}}
|
|
disabled={!canManage}
|
|
>
|
|
Create new space
|
|
</MenuItem>
|
|
<MenuItem
|
|
iconSrc={HashPlusIC}
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openCreateRoom(false, spaceId);
|
|
}}
|
|
disabled={!canManage}
|
|
>
|
|
Create new room
|
|
</MenuItem>
|
|
{!spaceId && (
|
|
<MenuItem
|
|
iconSrc={HashGlobeIC}
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openPublicRooms();
|
|
}}
|
|
>
|
|
Explore public rooms
|
|
</MenuItem>
|
|
)}
|
|
{!spaceId && (
|
|
<MenuItem
|
|
iconSrc={PlusIC}
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openJoinAlias();
|
|
}}
|
|
>
|
|
Join with address
|
|
</MenuItem>
|
|
)}
|
|
{spaceId && (
|
|
<MenuItem
|
|
iconSrc={PlusIC}
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openSpaceAddExisting(spaceId);
|
|
}}
|
|
disabled={!canManage}
|
|
>
|
|
Add existing
|
|
</MenuItem>
|
|
)}
|
|
{spaceId && (
|
|
<MenuItem
|
|
onClick={() => {
|
|
afterOptionSelect();
|
|
openSpaceManage(spaceId);
|
|
}}
|
|
iconSrc={HashSearchIC}
|
|
>
|
|
Manage rooms
|
|
</MenuItem>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
HomeSpaceOptions.defaultProps = {
|
|
spaceId: null,
|
|
};
|
|
HomeSpaceOptions.propTypes = {
|
|
spaceId: PropTypes.string,
|
|
afterOptionSelect: PropTypes.func.isRequired,
|
|
};
|
|
|
|
function DrawerHeader({ selectedTab, spaceId }) {
|
|
const mx = initMatrix.matrixClient;
|
|
const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
|
|
|
|
const isDMTab = selectedTab === cons.tabs.DIRECTS;
|
|
const room = mx.getRoom(spaceId);
|
|
const spaceName = isDMTab ? null : room?.name || null;
|
|
|
|
const openSpaceOptions = (e) => {
|
|
e.preventDefault();
|
|
openReusableContextMenu('bottom', getEventCords(e, '.header'), (closeMenu) => (
|
|
<SpaceOptions roomId={spaceId} afterOptionSelect={closeMenu} />
|
|
));
|
|
};
|
|
|
|
const openHomeSpaceOptions = (e) => {
|
|
e.preventDefault();
|
|
openReusableContextMenu('right', getEventCords(e, '.ic-btn'), (closeMenu) => (
|
|
<HomeSpaceOptions spaceId={spaceId} afterOptionSelect={closeMenu} />
|
|
));
|
|
};
|
|
|
|
return (
|
|
<Header>
|
|
{spaceName ? (
|
|
<button
|
|
className="drawer-header__btn"
|
|
onClick={openSpaceOptions}
|
|
type="button"
|
|
onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
|
|
>
|
|
<TitleWrapper>
|
|
<Text variant="s1" weight="medium" primary>
|
|
{spaceName}
|
|
</Text>
|
|
</TitleWrapper>
|
|
<RawIcon size="small" src={ChevronBottomIC} />
|
|
</button>
|
|
) : (
|
|
<TitleWrapper>
|
|
<Text variant="s1" weight="medium" primary>
|
|
{tabName}
|
|
</Text>
|
|
</TitleWrapper>
|
|
)}
|
|
|
|
{isDMTab && (
|
|
<IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="small" />
|
|
)}
|
|
{!isDMTab && (
|
|
<IconButton
|
|
onClick={openHomeSpaceOptions}
|
|
tooltip="Add rooms/spaces"
|
|
src={PlusIC}
|
|
size="small"
|
|
/>
|
|
)}
|
|
</Header>
|
|
);
|
|
}
|
|
|
|
DrawerHeader.defaultProps = {
|
|
spaceId: null,
|
|
};
|
|
DrawerHeader.propTypes = {
|
|
selectedTab: PropTypes.string.isRequired,
|
|
spaceId: PropTypes.string,
|
|
};
|
|
|
|
export default DrawerHeader;
|