aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/ui/PM.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-04 21:13:12 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitf470636a70943a8ecad8bddc791a1c2dddd28e1e (patch)
treec43d109d88adbde9a696084070cdd92c6b9a004b /vnext/src/ui/PM.js
parent3d7d213e3ddc5bf4f71d536f31677b768aa3b7c0 (diff)
Components -> UI
Diffstat (limited to 'vnext/src/ui/PM.js')
-rw-r--r--vnext/src/ui/PM.js51
1 files changed, 51 insertions, 0 deletions
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
new file mode 100644
index 00000000..a1e70ad5
--- /dev/null
+++ b/vnext/src/ui/PM.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { UserType, MessageType } from './Types';
+
+import Avatar from './Avatar';
+import { format } from '../utils/embed';
+
+function PM(props) {
+ const { chat } = props;
+ return (
+ <li>
+ <div style={chatItemStyle(props.visitor, chat)}>
+ <Avatar user={chat.user} />
+ <div style={bubbleStyle(props.visitor, chat)}>
+ <p dangerouslySetInnerHTML={{ __html: format(chat.body) }} />
+ </div>
+ </div>
+ </li>
+ );
+}
+
+export default React.memo(PM);
+
+function bubbleStyle(me, msg) {
+ const isMe = me.uid === msg.user.uid;
+ const color = isMe ? '#fff' : '#222';
+ const background = isMe ? '#ec4b98' : '#eee';
+ return {
+ background: background,
+ color: color,
+ padding: '12px'
+ };
+}
+
+function chatItemStyle(me, msg) {
+ const isMe = me.uid === msg.user.uid;
+ const alignment = isMe ? 'flex-end' : 'flex-start';
+ return {
+ padding: '3px 6px',
+ listStyle: 'none',
+ margin: '10px 0',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: alignment
+ };
+}
+
+PM.propTypes = {
+ chat: MessageType.isRequired,
+ visitor: UserType.isRequired
+};