Merge pull request #213 from Detaysoft/forwardedMsg

forwarded message

Author: einann

README.md

@@ -146,6 +146,7 @@ import { MessageBox } from 'react-chat-elements'
 | onMessageFocused        | none       | function             | makes focus value false after the message becomes focus                                            |
 | reply                   | none       | object               | reply data                                                                                         |
 | retracted               | none       | boolean              | message deleted or retracted                                                                       |
+| forwardedMessageText    | Forwarded  | string               | forwarded message text                                                                             |
 
 ## Reply Message Component
 
@@ -385,6 +386,7 @@ inputClear()
 | onMaxLengthExceed | none    | function          | called when max length exceed |
 | autofocus         | false   | bool              | input autofocus               |
 | value             | none    | string            | input value                   |
+
 ## Button Component
 
 ```javascript

example/App.css

@@ -48,7 +48,6 @@ button {
 
 .input-area {
   height: 50px;
-  background: red;
 }
 
 .on-drag-mlist {

example/components/ChatListExample.tsx

@@ -16,7 +16,6 @@ function Test(params: any) {
           'padding': '2px',
           'right': '-12px',
           'top': '-6px',
-          'background': 'red',
           'color': 'white',
           'borderRadius': '100%',
           'width': '12px',

example/components/DropdownExample.tsx

@@ -24,7 +24,6 @@ function DropdownExample() {
             icon: {
               component: <FaSquare />,
               float: 'left',
-              color: 'red',
               size: 22,
             },
             text: 'Menu Item',

example/components/MessageListExample.tsx

@@ -115,8 +115,6 @@ function MessageListExample() {
         downButton={true}
         downButtonBadge={10}
         sendMessagePreview={true}
-        messageBoxStyles={{ backgroundColor: 'red' }}
-        notchStyle={{ fill: 'red' }}
       />
 
       <div

example/utils/MessageTypes.ts

@@ -18,7 +18,7 @@ export const photoMessage: MessageType = {
   text: loremIpsum({ count: 1, units: 'sentences' }),
   titleColor: getRandomColor(),
   status: 'waiting',
-  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',     
+  statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   data: {
     uri: `data:image/png;base64,${photo(150)}`,
     status: {
@@ -54,6 +54,7 @@ export const locationMessage: MessageType = {
   notch: true,
   copiableDate: true,
   retracted: false,
+  forwardedMessageText: 'Forwarded',
   className: '',
   data: {
     latitude: '37.773972',
@@ -100,6 +101,7 @@ export const fileMessage: MessageType = {
   notch: true,
   copiableDate: true,
   retracted: false,
+  forwardedMessageText: 'Forwarded',
   className: '',
   reply:
     token() >= 1
@@ -186,6 +188,7 @@ export const videoMessage: MessageType = {
   removeButton: true,
   controlsList: '',
   status: 'read',
+  forwardedMessageText: 'Forwarded',
   statusTitle: token() >= 5 ? 'Desktop' : 'Mobile',
   data: {
     uri: `data:image/png;base64,${photo(150)}`,
@@ -271,6 +274,7 @@ export const meetingMessage: MessageType = {
   copiableDate: true,
   retracted: false,
   className: '',
+  forwardedMessageText: 'Forwarded',
   reply:
     token() >= 1
       ? {
@@ -392,6 +396,7 @@ export const textMessage: MessageType = {
   notch: true,
   copiableDate: true,
   retracted: false,
+  forwardedMessageText: 'Forwarded',
   className: '',
   reply:
     token() >= 1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "12.0.11",
+  "version": "12.0.12",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/ChatItem/ChatItem.css

@@ -129,7 +129,6 @@
   justify-content: center;
   display: flex;
   border-radius: 100%;
-  background: red;
 }
 
 .rce-citem-body--bottom-status-icon {

src/MessageBox/MessageBox.css

@@ -331,3 +331,26 @@
 .rce-mbox-title > .rce-avatar-container {
   margin-right: 5px;
 }
+
+.rce-mbox-forwardedMessage {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  margin-top: -1px;
+  margin-bottom: 6px;
+  margin-right: -6px;
+  margin-left: -6px;
+  border-radius: 5px;
+  padding: 0 5px;
+  padding-right: 0;
+  transition: 200ms;
+  user-select: none;
+}
+
+.rce-mbox-forwarded-message {
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  font-size: 13px;
+  font-style: italic;
+}

src/MessageBox/MessageBox.tsx

@@ -17,6 +17,7 @@ import Avatar from '../Avatar/Avatar'
 import { RiShareForwardFill } from 'react-icons/ri'
 import { IoIosDoneAll } from 'react-icons/io'
 import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll } from 'react-icons/md'
+import { TiArrowForward } from 'react-icons/ti'
 
 import { format } from 'timeago.js'
 
@@ -130,7 +131,18 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, sty
               </div>
             )}
 
-            {props.reply && <ReplyMessage onClick={props.onReplyMessageClick} {...props.reply} />}
+            {props.forwardedMessageText ? (
+              <div className='rce-mbox-forwardedMessage'>
+                <div className='rce-mbox-forwarded-message'>
+                  <TiArrowForward fontSize={18} />
+                  <i style={{ margin: '0 3px 1px 0' }}> {props.forwardedMessageText}</i>
+                </div>
+              </div>
+            ) : null}
+
+            {!props.forwardedMessageText && props.reply ? (
+              <ReplyMessage onClick={props.onReplyMessageClick} {...props.reply} />
+            ) : null}
 
             {props.type === 'text' && (
               <div