Display action bars 🎉

Author: retrixe

src/components/chat/ActionBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  ChatToJsx,
+  type ClickEvent,
+  type ColorMap,
+  type MinecraftChat
+} from '../../minecraft/chatToJsx'
+import Text from '../Text'
+import useDarkMode from '../../context/useDarkMode'
+
+const ActionBar: React.FC<{
+  content: MinecraftChat
+  colorMap: ColorMap
+  onClickEvent: (ce: ClickEvent) => void
+}> = props => {
+  return (
+    <View
+      style={[
+        useDarkMode() ? styles.actionBarDark : styles.actionBarLight,
+        styles.actionBar
+      ]}
+    >
+      <ChatToJsx
+        chat={props.content}
+        component={Text}
+        colorMap={props.colorMap}
+        onClickEvent={props.onClickEvent}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionBar: {
+    padding: 8,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actionBarLight: { backgroundColor: '#fff' },
+  actionBarDark: { backgroundColor: '#242424' }
+})
+
+export default ActionBar

src/components/chat/ChatMessageList.tsx

@@ -16,13 +16,13 @@ export interface Message {
 const MessageRenderer = (props: {
   item: Message
   colorMap: ColorMap
-  clickEventHandler: (event: ClickEvent) => void
+  onClickEvent: (event: ClickEvent) => void
 }): JSX.Element => (
   <ChatToJsx
     chat={props.item.text}
     component={Text}
     colorMap={props.colorMap}
-    clickEventHandler={props.clickEventHandler}
+    onClickEvent={props.onClickEvent}
   />
 )
 
@@ -31,13 +31,13 @@ const MessageRendererMemo = React.memo(
   (prev, next) =>
     prev.item.key === next.item.key &&
     prev.colorMap === next.colorMap &&
-    prev.clickEventHandler === next.clickEventHandler
+    prev.onClickEvent === next.onClickEvent
 )
 
 const ChatMessageList = (props: {
   messages: Message[]
   colorMap: ColorMap
-  clickEventHandler: (ce: ClickEvent) => void
+  onClickEvent: (ce: ClickEvent) => void
 }): JSX.Element => {
   // If colorMap/clickEventHandler changes, this will change and cause a re-render.
   // If messages changes, FlatList will execute this function for all messages, and
@@ -47,10 +47,10 @@ const ChatMessageList = (props: {
       <MessageRendererMemo
         item={item}
         colorMap={props.colorMap}
-        clickEventHandler={props.clickEventHandler}
+        onClickEvent={props.onClickEvent}
       />
     ),
-    [props.colorMap, props.clickEventHandler]
+    [props.colorMap, props.onClickEvent]
   )
   return (
     <FlatList

src/minecraft/chatToJsx.tsx

@@ -253,7 +253,7 @@ const parseChatToJsx = (
   chat: MinecraftChat,
   Component: React.ComponentType<TextProps>,
   colorMap: ColorMap,
-  clickEventHandler: (clickEvent: ClickEvent) => void = () => {},
+  handleClickEvent: (clickEvent: ClickEvent) => void = () => {},
   componentProps?: Record<string, unknown>,
   trim = false
 ): JSX.Element => {
@@ -280,7 +280,7 @@ const parseChatToJsx = (
             key={i}
             style={style}
             selectable
-            onPress={ce ? () => clickEventHandler(ce) : undefined}
+            onPress={ce ? () => handleClickEvent(ce) : undefined}
             onLongPress={() => {}}
           >
             {c.text ? c.text : ''}
@@ -297,14 +297,14 @@ export const ChatToJsx = (props: {
   component: React.ComponentType<TextProps>
   colorMap: ColorMap
   componentProps?: Record<string, unknown>
-  clickEventHandler?: (clickEvent: ClickEvent) => void
+  onClickEvent?: (clickEvent: ClickEvent) => void
   trim?: boolean
 }): JSX.Element =>
   parseChatToJsx(
     props.chat ?? { text: '' },
     props.component,
     props.colorMap,
-    props.clickEventHandler,
+    props.onClickEvent,
     props.componentProps,
     props.trim
   )

src/screens/ChatScreen.tsx

@@ -45,6 +45,7 @@ import { ConnectionState } from '../minecraft/connection'
 import { makeChatMessagePacket } from '../minecraft/packets/chat'
 import TextField from '../components/TextField'
 import Text from '../components/Text'
+import ActionBar from '../components/chat/ActionBar'
 import ChatMessageList, {
   type Message
 } from '../components/chat/ChatMessageList'
@@ -71,7 +72,7 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
 
   // TODO: Show command history.
   const [, setCommandHistory] = useState<string[]>([])
-  const [, setActionBar] = useState<MinecraftChat | null>(null)
+  const [actionBar, setActionBar] = useState<MinecraftChat | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [loading, setLoading] = useState('Connecting to server...')
   const [message, setMessage] = useState('')
@@ -283,10 +284,17 @@ const ChatScreen = ({ navigation, route }: Props): JSX.Element => {
       )}
       {!loading && connection && (
         <>
+          {actionBar && (
+            <ActionBar
+              content={actionBar}
+              colorMap={darkMode ? mojangColorMap : lightColorMap}
+              onClickEvent={handleClickEvent}
+            />
+          )}
           <ChatMessageList
             messages={messages}
             colorMap={darkMode ? mojangColorMap : lightColorMap}
-            clickEventHandler={handleClickEvent}
+            onClickEvent={handleClickEvent}
           />
           <View style={darkMode ? styles.textAreaDark : styles.textArea}>
             <TextField