add Channel Context Menu
This commit is contained in:
parent
7777fb2bb2
commit
f42078853a
111
src/components/ChannelContextMenu.jsx
Normal file
111
src/components/ChannelContextMenu.jsx
Normal file
|
@ -0,0 +1,111 @@
|
|||
/*
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React, {
|
||||
useRef, useEffect, useState, useLayoutEffect,
|
||||
} from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import {
|
||||
hideContextMenu,
|
||||
} from '../actions';
|
||||
import type { State } from '../reducers';
|
||||
|
||||
const UserContextMenu = ({
|
||||
xPos,
|
||||
yPos,
|
||||
cid,
|
||||
channels,
|
||||
close,
|
||||
}) => {
|
||||
const wrapperRef = useRef(null);
|
||||
const [channelArray, setChannelArray] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
||||
close();
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('touchstart', handleClickOutside);
|
||||
window.addEventListener('resize', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('touchstart', handleClickOutside);
|
||||
window.removeEventListener('resize', handleClickOutside);
|
||||
};
|
||||
}, [wrapperRef]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
for (let i = 0; i < channels.length; i += 1) {
|
||||
const chan = channels[i];
|
||||
/*
|
||||
* [cid, name, type, lastMessage]
|
||||
*/
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (chan[0] == cid) {
|
||||
setChannelArray(chan);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [channels.length]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className="contextmenu"
|
||||
style={{
|
||||
right: window.innerWidth - xPos,
|
||||
top: yPos,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ borderBottom: 'thin solid' }}
|
||||
>
|
||||
✔✘ Mute
|
||||
</div>
|
||||
{(channelArray[2] !== 0)
|
||||
&& (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Close
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function mapStateToProps(state: State) {
|
||||
const {
|
||||
xPos,
|
||||
yPos,
|
||||
args,
|
||||
} = state.contextMenu;
|
||||
const {
|
||||
channels,
|
||||
} = state.chat;
|
||||
const {
|
||||
cid,
|
||||
} = args;
|
||||
return {
|
||||
xPos,
|
||||
yPos,
|
||||
cid,
|
||||
channels,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
close() {
|
||||
dispatch(hideContextMenu());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserContextMenu);
|
|
@ -20,6 +20,7 @@ import {
|
|||
setChatChannel,
|
||||
fetchChatMessages,
|
||||
setChatInputMessage,
|
||||
showContextMenu,
|
||||
} from '../actions';
|
||||
import ProtocolClient from '../socket/ProtocolClient';
|
||||
import { saveSelection, restoreSelection } from '../utils/storeSelection';
|
||||
|
@ -43,6 +44,7 @@ const Chat = ({
|
|||
fetching,
|
||||
blocked,
|
||||
triggerModal,
|
||||
openChannelContextMenu,
|
||||
}) => {
|
||||
const listRef = useRef();
|
||||
const targetRef = useRef();
|
||||
|
@ -111,6 +113,7 @@ const Chat = ({
|
|||
* for whatever reason (left faction etc.)
|
||||
* set channel to first available one
|
||||
*/
|
||||
useEffect(() => {
|
||||
let i = 0;
|
||||
while (i < channels.length) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
|
@ -122,6 +125,7 @@ const Chat = ({
|
|||
if (i && i === channels.length) {
|
||||
setChannel(channels[0][0]);
|
||||
}
|
||||
}, [chatChannel, channels]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -132,7 +136,6 @@ const Chat = ({
|
|||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
@ -142,17 +145,29 @@ const Chat = ({
|
|||
}}
|
||||
>
|
||||
<span
|
||||
onClick={(event) => {
|
||||
const {
|
||||
clientX,
|
||||
clientY,
|
||||
} = event;
|
||||
openChannelContextMenu(
|
||||
clientX,
|
||||
clientY,
|
||||
chatChannel,
|
||||
);
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>⚙</span>
|
||||
|
||||
{(showExpand) &&
|
||||
{(showExpand)
|
||||
&& (
|
||||
<span
|
||||
onClick={triggerModal}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>↷</span>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<ul
|
||||
className="chatarea"
|
||||
|
@ -263,6 +278,11 @@ function mapDispatchToProps(dispatch) {
|
|||
setInputMessage(message) {
|
||||
dispatch(setChatInputMessage(message));
|
||||
},
|
||||
openChannelContextMenu(xPos, yPos, cid) {
|
||||
dispatch(showContextMenu('CHANNEL', xPos, yPos, {
|
||||
cid,
|
||||
}));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -40,7 +40,7 @@ function ChatBox({
|
|||
className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
>
|
||||
<Chat showExpand={true} />
|
||||
<Chat showExpand />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -15,10 +15,12 @@ import Palette from './Palette';
|
|||
import HistorySelect from './HistorySelect';
|
||||
import Mobile3DControls from './Mobile3DControls';
|
||||
import UserContextMenu from './UserContextMenu';
|
||||
import ChannelContextMenu from './ChannelContextMenu';
|
||||
|
||||
|
||||
const CONTEXT_MENUS = {
|
||||
USER: <UserContextMenu />,
|
||||
CHANNEL: <ChannelContextMenu />,
|
||||
/* other context menus */
|
||||
};
|
||||
|
||||
|
|
|
@ -37,9 +37,11 @@ const UserContextMenu = ({
|
|||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('touchstart', handleClickOutside);
|
||||
window.addEventListener('resize', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('touchstart', handleClickOutside);
|
||||
window.removeEventListener('resize', handleClickOutside);
|
||||
};
|
||||
}, [wrapperRef]);
|
||||
|
||||
|
@ -58,6 +60,8 @@ const UserContextMenu = ({
|
|||
block(uid, name);
|
||||
close();
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>
|
||||
Block
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user