From f6f010090629a9658ba69297315bf00f4665e0dc Mon Sep 17 00:00:00 2001
From: meryem <feyzameryem9913@gmail.com>
Date: Tue, 28 Feb 2023 17:34:17 +0300
Subject: [PATCH] new feature: MessageBox statusTitle added

---
 example/utils/MessageTypes.ts | 10 ++++++++++
 example/utils/common.ts       |  2 +-
 src/MessageBox/MessageBox.tsx |  4 ++--
 src/type.d.ts                 |  4 +++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/example/utils/MessageTypes.ts b/example/utils/MessageTypes.ts
index 1be6a795..6d0acaa9 100644
--- a/example/utils/MessageTypes.ts
+++ b/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,
diff --git a/example/utils/common.ts b/example/utils/common.ts
index 6b298fd7..f9a80acc 100644
--- a/example/utils/common.ts
+++ b/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() {
diff --git a/src/MessageBox/MessageBox.tsx b/src/MessageBox/MessageBox.tsx
index 1b14328a..87a7453b 100644
--- a/src/MessageBox/MessageBox.tsx
+++ b/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 />}
 
diff --git a/src/type.d.ts b/src/type.d.ts
index 3037aeae..1520037c 100644
--- a/src/type.d.ts
+++ b/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