add custom channel drop down menu basics
This commit is contained in:
parent
eaef11f484
commit
4064f1674d
94
src/components/ChannelDropDown.jsx
Normal file
94
src/components/ChannelDropDown.jsx
Normal file
|
@ -0,0 +1,94 @@
|
||||||
|
/*
|
||||||
|
* Drop Down menu for Chat Channel selection
|
||||||
|
*
|
||||||
|
* @flow
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, {
|
||||||
|
useRef, useLayoutEffect, useState, useEffect,
|
||||||
|
} from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import type { State } from '../reducers';
|
||||||
|
import {
|
||||||
|
setChatChannel,
|
||||||
|
} from '../actions';
|
||||||
|
|
||||||
|
const ChannelDropDown = ({
|
||||||
|
channels,
|
||||||
|
chatChannel,
|
||||||
|
setChannel,
|
||||||
|
}) => {
|
||||||
|
const [show, setShow] = useState(false);
|
||||||
|
const wrapperRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event) {
|
||||||
|
if (wrapperRef.current
|
||||||
|
&& !wrapperRef.current.contains(event.target)
|
||||||
|
) {
|
||||||
|
setShow(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
document.addEventListener('touchstart', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
document.addEventListener('touchstart', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [wrapperRef]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{position: 'relative'}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 50,
|
||||||
|
}}
|
||||||
|
ref={wrapperRef}
|
||||||
|
onClick={() => setShow(true)}
|
||||||
|
className="channelbtn"
|
||||||
|
>
|
||||||
|
{chatChannel}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 10,
|
||||||
|
right: 10,
|
||||||
|
display: (show) ? 'initial' : 'none',
|
||||||
|
}}
|
||||||
|
className="channeldd"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
channels.map((ch) => (
|
||||||
|
<div>
|
||||||
|
{ch[1]}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function mapStateToProps(state: State) {
|
||||||
|
const { chatChannel } = state.gui;
|
||||||
|
const { channels } = state.chat;
|
||||||
|
return {
|
||||||
|
channels,
|
||||||
|
chatChannel,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch) {
|
||||||
|
return {
|
||||||
|
setChannel(channelId) {
|
||||||
|
dispatch(setChatChannel(channelId));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ChannelDropDown);
|
|
@ -11,6 +11,7 @@ import { connect } from 'react-redux';
|
||||||
|
|
||||||
import type { State } from '../reducers';
|
import type { State } from '../reducers';
|
||||||
import ChatMessage from './ChatMessage';
|
import ChatMessage from './ChatMessage';
|
||||||
|
import ChannelDropDown from './ChannelDropDown';
|
||||||
import { MAX_CHAT_MESSAGES } from '../core/constants';
|
import { MAX_CHAT_MESSAGES } from '../core/constants';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -152,25 +153,7 @@ const Chat = ({
|
||||||
>
|
>
|
||||||
‣
|
‣
|
||||||
</button>
|
</button>
|
||||||
<select
|
<ChannelDropDown />
|
||||||
style={{ width: 50 }}
|
|
||||||
onChange={(evt) => {
|
|
||||||
const sel = evt.target;
|
|
||||||
setChannel(sel.options[sel.selectedIndex].value);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
channels.map((ch) => (
|
|
||||||
<option
|
|
||||||
// eslint-disable-next-line eqeqeq
|
|
||||||
selected={ch[0] == chatChannel}
|
|
||||||
value={ch[0]}
|
|
||||||
>
|
|
||||||
{ch[1]}
|
|
||||||
</option>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -152,6 +152,23 @@ tr:nth-child(even) {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.channelbtn {
|
||||||
|
background-color: #d0d0d0;
|
||||||
|
text-align: center;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: thin;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channelbtn:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channeldd {
|
||||||
|
background-color: rgba(226, 226, 226);
|
||||||
|
}
|
||||||
|
|
||||||
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #palettebox {
|
.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #palettebox {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: rgba(226, 226, 226, 0.80);
|
background-color: rgba(226, 226, 226, 0.80);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user