MessageListExample fixes, MessageBox status design changes

Author: Emre Güdür

example/components/MessageListExample.tsx

@@ -36,28 +36,30 @@ function MessageListExample() {
     switch (data) {
       case 0:
         Addmtype = 'photo'
-        setStatus('sent')
+        setStatus('waiting')
         break
       case 1:
         Addmtype = 'file'
         setStatus('sent')
         break
       case 2:
         Addmtype = 'system'
-        setStatus('received')
         break
       case 3:
         Addmtype = 'location'
+        setStatus('received')
         break
       case 4:
         Addmtype = 'spotify'
+        setStatus('waiting')
         break
       case 5:
         Addmtype = 'meeting'
+        setStatus('sent')
         break
       case 6:
         Addmtype = 'video'
-        setStatus('sent')
+        setStatus('read')
         break
       case 7:
         Addmtype = 'audio'

example/utils/MessageTypes.ts

@@ -16,7 +16,7 @@ export const photoMessage: MessageType = {
   retracted: false,
   text: loremIpsum({ count: 1, units: 'sentences' }),
   titleColor: getRandomColor(),
-  status: 'sent',
+  status: 'waiting',
   data: {
     uri: `data:image/png;base64,${photo(150)}`,
     status: {
@@ -80,7 +80,7 @@ export const fileMessage: MessageType = {
     },
     size: '100MB',
   },
-  status: 'read',
+  status: 'sent',
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',
   text: loremIpsum({ count: 1, units: 'sentences' }),
@@ -147,7 +147,7 @@ export const spotifyMessage: MessageType = {
   copiableDate: true,
   retracted: false,
   className: '',
-  status: 'received',
+  status: 'read',
   theme: 'white',
   view: 'list',
   width: 300,

src/MessageBox/MessageBox.css

@@ -208,10 +208,12 @@
 }
 
 .rce-mbox-time {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
   text-align: right;
   color: rgba(0, 0, 0, 0.45);
   font-size: 12px;
-  position: absolute;
   right: -4px;
   bottom: -5px;
 }
@@ -221,7 +223,9 @@
 }
 
 .rce-mbox-time-block {
-  /*position: relative;*/
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   right: 0;
   bottom: 0;
   left: 0;
@@ -320,6 +324,7 @@
 .rce-mbox-status {
   margin-left: 3px;
   font-size: 15px;
+  height: 15px;
 }
 
 .rce-mbox-title > .rce-avatar-container {

src/MessageBox/MessageBox.tsx

@@ -16,7 +16,7 @@ import Avatar from '../Avatar/Avatar'
 
 import { RiShareForwardFill } from 'react-icons/ri'
 import { IoIosDoneAll } from 'react-icons/io'
-import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock } from 'react-icons/md'
+import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll } from 'react-icons/md'
 
 import { format } from 'timeago.js'
 
@@ -176,7 +176,7 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...
 
                   {props.status === 'received' && <IoIosDoneAll />}
 
-                  {props.status === 'read' && <IoIosDoneAll color='#4FC3F7' />}
+                  {props.status === 'read' && <MdDoneAll color='#4FC3F7' />}
                 </span>
               )}
             </div>