125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
|
|
import { twemojify } from '../../../util/twemojify';
|
|
|
|
import initMatrix from '../../../client/initMatrix';
|
|
import cons from '../../../client/state/cons';
|
|
import navigation from '../../../client/state/navigation';
|
|
import { openInviteUser } from '../../../client/action/navigation';
|
|
import * as roomActions from '../../../client/action/room';
|
|
|
|
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
|
import RoomNotification from '../../molecules/room-notification/RoomNotification';
|
|
|
|
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
|
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
|
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
|
|
|
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
|
|
|
let isRoomOptionVisible = false;
|
|
let roomId = null;
|
|
function RoomOptions() {
|
|
const openerRef = useRef(null);
|
|
const [, forceUpdate] = useForceUpdate();
|
|
|
|
function openRoomOptions(cords, rId) {
|
|
if (roomId !== null || isRoomOptionVisible) {
|
|
roomId = null;
|
|
if (cords.detail === 0) openerRef.current.click();
|
|
return;
|
|
}
|
|
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
|
|
roomId = rId;
|
|
openerRef.current.click();
|
|
forceUpdate();
|
|
}
|
|
|
|
const afterRoomOptionsToggle = (isVisible) => {
|
|
isRoomOptionVisible = isVisible;
|
|
if (!isVisible) {
|
|
setTimeout(() => {
|
|
if (!isRoomOptionVisible) roomId = null;
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
|
|
return () => {
|
|
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
|
|
};
|
|
}, []);
|
|
|
|
const handleMarkAsRead = () => {
|
|
const mx = initMatrix.matrixClient;
|
|
const room = mx.getRoom(roomId);
|
|
if (!room) return;
|
|
const events = room.getLiveTimeline().getEvents();
|
|
mx.sendReadReceipt(events[events.length - 1]);
|
|
};
|
|
|
|
const handleInviteClick = () => openInviteUser(roomId);
|
|
const handleLeaveClick = (toggleMenu) => {
|
|
if (confirm('Are you really want to leave this room?')) {
|
|
roomActions.leave(roomId);
|
|
toggleMenu();
|
|
}
|
|
};
|
|
|
|
const mx = initMatrix.matrixClient;
|
|
const room = mx.getRoom(roomId);
|
|
const canInvite = room?.canInvite(mx.getUserId());
|
|
|
|
return (
|
|
<ContextMenu
|
|
afterToggle={afterRoomOptionsToggle}
|
|
maxWidth={298}
|
|
content={(toggleMenu) => (
|
|
<>
|
|
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
|
|
<MenuItem
|
|
iconSrc={TickMarkIC}
|
|
onClick={() => {
|
|
handleMarkAsRead(); toggleMenu();
|
|
}}
|
|
>
|
|
Mark as read
|
|
</MenuItem>
|
|
<MenuItem
|
|
disabled={!canInvite}
|
|
iconSrc={AddUserIC}
|
|
onClick={() => {
|
|
handleInviteClick(); toggleMenu();
|
|
}}
|
|
>
|
|
Invite
|
|
</MenuItem>
|
|
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
|
|
<MenuHeader>Notification</MenuHeader>
|
|
{roomId && <RoomNotification roomId={roomId} />}
|
|
</>
|
|
)}
|
|
render={(toggleMenu) => (
|
|
<input
|
|
ref={openerRef}
|
|
onClick={toggleMenu}
|
|
type="button"
|
|
style={{
|
|
width: '32px',
|
|
height: '32px',
|
|
backgroundColor: 'transparent',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
padding: 0,
|
|
border: 'none',
|
|
visibility: 'hidden',
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default RoomOptions;
|