new feature: MessageBox statusTitle added

Author: mery2510

example/utils/MessageTypes.ts

@@ -18,6 +18,7 @@ export const photoMessage: MessageType = {
   text: loremIpsum({ count: 1, units: 'sentences' }),
   titleColor: getRandomColor(),
   status: 'waiting',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',     
   data: {
     uri: `data:image/png;base64,${photo(150)}`,
     status: {
@@ -37,6 +38,7 @@ export const locationMessage: MessageType = {
   zoom: '',
   apiKey: '',
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',
   text: loremIpsum({ count: 1, units: 'sentences' }),
@@ -82,6 +84,7 @@ export const fileMessage: MessageType = {
     size: '100MB',
   },
   status: 'sent',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   id: String(Math.random()),
   position: token() >= 1 ? 'right' : 'left',
   text: loremIpsum({ count: 1, units: 'sentences' }),
@@ -124,6 +127,7 @@ export const systemMessage: MessageType = {
   replyButton: true,
   removeButton: true,
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   notch: true,
   copiableDate: true,
   retracted: false,
@@ -149,6 +153,7 @@ export const spotifyMessage: MessageType = {
   retracted: false,
   className: '',
   status: 'read',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   theme: 'white',
   view: 'list',
   width: 300,
@@ -181,6 +186,7 @@ export const videoMessage: MessageType = {
   removeButton: true,
   controlsList: '',
   status: 'read',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   data: {
     uri: `data:image/png;base64,${photo(150)}`,
     videoURL: token() >= 1 ? 'https://www.w3schools.com/html/mov_bbb.mp4' : 'http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4',
@@ -223,6 +229,7 @@ export const audioMessage: MessageType = {
   replyButton: true,
   removeButton: true,
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   notch: true,
   copiableDate: true,
   retracted: false,
@@ -259,6 +266,7 @@ export const meetingMessage: MessageType = {
   replyButton: true,
   removeButton: true,
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   notch: true,
   copiableDate: true,
   retracted: false,
@@ -349,6 +357,7 @@ export const meetingLinkMessage: MessageType = {
   replyButton: true,
   removeButton: true,
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   notch: true,
   copiableDate: true,
   retracted: false,
@@ -379,6 +388,7 @@ export const textMessage: MessageType = {
   replyButton: true,
   removeButton: true,
   status: 'received',
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   notch: true,
   copiableDate: true,
   retracted: false,

example/utils/common.ts

@@ -18,7 +18,7 @@ export const getRandomColor = () => {
 }
 
 export const token = () => {
-  return Math.floor((Math.random() * 10) % 9)
+  return Math.floor((Math.random() * 10) % 10)
 }
 
 export function useForceUpdate() {

src/MessageBox/MessageBox.tsx

@@ -172,8 +172,8 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, sty
             >
               {props.copiableDate && props.date && (props.dateString || format(props.date))}
               {props.status && (
-                <span className='rce-mbox-status'>
-                  {props.status === 'waiting' && <MdAccessTime />}
+                <span className='rce-mbox-status' title={props.statusTitle}>
+                  {props.status === 'waiting' && <MdAccessTime />}        
 
                   {props.status === 'sent' && <MdCheck />}
 

src/type.d.ts

@@ -140,8 +140,9 @@ export interface IDefaultProps {
  * @prop titleColor The Message's titleColor and required.
  * @prop forwarded The Message's forwarded and required.
  * @prop replyButton The Message's replyButton icon and required.
- * @prop removeButton The Message's removeButton icon and required.
+ * @prop removeButton The Message's removeButton icon and required. 
  * @prop status The Message's status icon and required.
+ * @prop statusTitle The Message's statusTitle and required.
  * @prop notch The Message's notch and required.
  * @prop copiableDate The Message's copiableDate and optional.
  * @prop retracted The Message's retracted and required.
@@ -163,6 +164,7 @@ export interface IMessage {
   replyButton: boolean
   removeButton: boolean
   status: 'waiting' | 'sent' | 'received' | 'read'
+  statusTitle?: string
   notch: boolean
   copiableDate?: boolean
   retracted: boolean