add custom channel drop down menu basics

src/components/ChannelDropDown.jsx

@@ -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);

src/components/Chat.jsx

@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 
 import type { State } from '../reducers';
 import ChatMessage from './ChatMessage';
+import ChannelDropDown from './ChannelDropDown';
 import { MAX_CHAT_MESSAGES } from '../core/constants';
 
 import {
@@ -152,25 +153,7 @@ const Chat = ({
             >
               ‣
             </button>
-            <select
-              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>
+            <ChannelDropDown />
           </form>
         </div>
       ) : (

src/styles/default.css

@@ -152,6 +152,23 @@ tr:nth-child(even) {
   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 {
   position: fixed;
   background-color: rgba(226, 226, 226, 0.80);