diff options
Diffstat (limited to 'vnext/src/ui/PM.js')
-rw-r--r-- | vnext/src/ui/PM.js | 51 |
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 +}; |