@rpg-engine/long-bow 0.4.2 → 0.4.3

package/src/components/Chat/Chat.tsx

@@ -1,196 +1,196 @@
-import { IChatMessage } from '@rpg-engine/shared';
-import dayjs from 'dayjs';
-import React, { useEffect, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { RxPaperPlane } from 'react-icons/rx';
-import styled from 'styled-components';
-import { Column } from '../shared/Column';
-
-interface IEmitter {
-  _id: string;
-  name: string;
-}
-
-interface IStyles {
-  textColor?: string;
-  buttonColor?: string;
-  buttonBackgroundColor?: string;
-  width?: string;
-  height?: string;
-}
-
-export interface IChatProps {
-  chatMessages: IChatMessage[];
-  onSendChatMessage: (message: string) => void;
-  onCloseButton: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  opacity?: number;
-  sendMessage: boolean;
-  styles?: IStyles;
-}
-
-export const Chat: React.FC<IChatProps> = ({
-  chatMessages,
-  onSendChatMessage,
-  onFocus,
-  onBlur,
-  styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
-    height: 'auto',
-  },
-}) => {
-  const [message, setMessage] = useState('');
-
-  useEffect(() => {
-    scrollChatToBottom();
-  }, []);
-
-  useEffect(() => {
-    scrollChatToBottom();
-  }, [chatMessages]);
-
-  const scrollChatToBottom = () => {
-    const scrollingElement = document.querySelector('.chat-body');
-    if (scrollingElement) {
-      scrollingElement.scrollTop = scrollingElement.scrollHeight;
-    }
-  };
-
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!message || message.trim() === '') return;
-    onSendChatMessage(message);
-    setMessage('');
-  };
-  const getInputValue = (value: string) => {
-    setMessage(value);
-  };
-
-  const onRenderMessageLines = (
-    emitter: IEmitter,
-    createdAt: string | undefined,
-    message: string
-  ) => {
-    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${
-      emitter?.name ? `${emitter.name}: ` : 'Unknown: '
-    } ${message}`;
-  };
-
-  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
-    return chatMessages?.length ? (
-      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt as string, message)}
-        </Message>
-      ))
-    ) : (
-      <Message color={styles?.textColor || '#c65102'}>
-        No messages available.
-      </Message>
-    );
-  };
-
-  return (
-    <ChatContainer
-      width={styles?.width || '80%'}
-      height={styles?.height || 'auto'}
-    >
-      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
-        <MessagesContainer className="chat-body">
-          {onRenderChatMessages(chatMessages)}
-        </MessagesContainer>
-
-        <Form onSubmit={handleSubmit}>
-          <Column flex={70}>
-            <TextField
-              value={message}
-              id="inputMessage"
-              onChange={e => getInputValue(e.target.value)}
-              height={20}
-              type="text"
-              autoComplete="off"
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onPointerDown={onFocus}
-              autoFocus
-            />
-          </Column>
-          <Column justifyContent="flex-end">
-            <Button
-              buttonColor={styles?.buttonColor || '#005b96'}
-              buttonBackgroundColor={
-                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
-              }
-              id="chat-send-button"
-              style={{ borderRadius: '20%' }}
-            >
-              <RxPaperPlane size={15} />
-            </Button>
-          </Column>
-        </Form>
-      </ErrorBoundary>
-    </ChatContainer>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-interface IMessageProps {
-  color: string;
-}
-
-interface IButtonProps {
-  buttonColor: string;
-  buttonBackgroundColor: string;
-}
-
-const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
-`;
-
-const TextField = styled.input`
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
-`;
-
-const MessagesContainer = styled.div`
-  height: 70%;
-  margin-bottom: 10px;
-  .chat-body {
-    max-height: auto;
-    overflow-y: auto;
-  }
-`;
-
-const Message = styled.div<IMessageProps>`
-  margin-bottom: 8px;
-  color: ${({ color }) => color};
-`;
-
-const Form = styled.form`
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Button = styled.button<IButtonProps>`
-  color: ${({ buttonColor }) => buttonColor};
-  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 28px;
-  height: 28px;
-  border: none !important;
-`;
+import { IChatMessage } from '@rpg-engine/shared';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { RxPaperPlane } from 'react-icons/rx';
+import styled from 'styled-components';
+import { Column } from '../shared/Column';
+
+interface IEmitter {
+  _id: string;
+  name: string;
+}
+
+interface IStyles {
+  textColor?: string;
+  buttonColor?: string;
+  buttonBackgroundColor?: string;
+  width?: string;
+  height?: string;
+}
+
+export interface IChatProps {
+  chatMessages: IChatMessage[];
+  onSendChatMessage: (message: string) => void;
+  onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  opacity?: number;
+  sendMessage: boolean;
+  styles?: IStyles;
+}
+
+export const Chat: React.FC<IChatProps> = ({
+  chatMessages,
+  onSendChatMessage,
+  onFocus,
+  onBlur,
+  styles = {
+    textColor: '#c65102',
+    buttonColor: '#005b96',
+    buttonBackgroundColor: 'rgba(0,0,0,.2)',
+    width: '80%',
+    height: 'auto',
+  },
+}) => {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, []);
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, [chatMessages]);
+
+  const scrollChatToBottom = () => {
+    const scrollingElement = document.querySelector('.chat-body');
+    if (scrollingElement) {
+      scrollingElement.scrollTop = scrollingElement.scrollHeight;
+    }
+  };
+
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!message || message.trim() === '') return;
+    onSendChatMessage(message);
+    setMessage('');
+  };
+  const getInputValue = (value: string) => {
+    setMessage(value);
+  };
+
+  const onRenderMessageLines = (
+    emitter: IEmitter,
+    createdAt: string | undefined,
+    message: string
+  ) => {
+    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${
+      emitter?.name ? `${emitter.name}: ` : 'Unknown: '
+    } ${message}`;
+  };
+
+  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
+    return chatMessages?.length ? (
+      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
+        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt as string, message)}
+        </Message>
+      ))
+    ) : (
+      <Message color={styles?.textColor || '#c65102'}>
+        No messages available.
+      </Message>
+    );
+  };
+
+  return (
+    <ChatContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
+      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+        <MessagesContainer className="chat-body">
+          {onRenderChatMessages(chatMessages)}
+        </MessagesContainer>
+
+        <Form onSubmit={handleSubmit}>
+          <Column flex={70}>
+            <TextField
+              value={message}
+              id="inputMessage"
+              onChange={e => getInputValue(e.target.value)}
+              height={20}
+              type="text"
+              autoComplete="off"
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onPointerDown={onFocus}
+              autoFocus
+            />
+          </Column>
+          <Column justifyContent="flex-end">
+            <Button
+              buttonColor={styles?.buttonColor || '#005b96'}
+              buttonBackgroundColor={
+                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
+              }
+              id="chat-send-button"
+              style={{ borderRadius: '20%' }}
+            >
+              <RxPaperPlane size={15} />
+            </Button>
+          </Column>
+        </Form>
+      </ErrorBoundary>
+    </ChatContainer>
+  );
+};
+
+interface IContainerProps {
+  width: string;
+  height: string;
+}
+
+interface IMessageProps {
+  color: string;
+}
+
+interface IButtonProps {
+  buttonColor: string;
+  buttonBackgroundColor: string;
+}
+
+const ChatContainer = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: auto;
+`;
+
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
+`;
+
+const MessagesContainer = styled.div`
+  height: 70%;
+  margin-bottom: 10px;
+  .chat-body {
+    max-height: auto;
+    overflow-y: auto;
+  }
+`;
+
+const Message = styled.div<IMessageProps>`
+  margin-bottom: 8px;
+  color: ${({ color }) => color};
+`;
+
+const Form = styled.form`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Button = styled.button<IButtonProps>`
+  color: ${({ buttonColor }) => buttonColor};
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  width: 28px;
+  height: 28px;
+  border: none !important;
+`;