onReplyClick and onReplyMessageClick added

replyButton feat added
Detaysoft · Apr 27, 2020 · 6b09f88 · 6b09f88
1 parent 3a3531d
commit 6b09f88
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -140,8 +140,11 @@ import { MessageBox } from 'react-chat-elements'
 | onPhotoError | none | function | message on error photo |
 | onTitleClick | none | function | message title on click event |
 | onForwardClick | none | function | message forward on click event |
+| onReplyClick | none | function | message reply on click event |
+| onReplyMessageClick | none | function | reply message on click event |
 | onContextMenu | none | function | message contextmenu click event |
 | forwarded | none | boolean | message forward icon |
+| replyButton | none | boolean | message reply icon |
 | status | none | string | message status info (waiting, sent, received, read) |
 | notch | true | boolean | message box notch |
 | avatar | none | url | message box avatar url |
@@ -225,6 +228,8 @@ import { MessageList } from 'react-chat-elements'
 | onDownload | none | function | message list item on download (file or photo) (message(object) is returned) |
 | onScroll | none | function | message list onScroll event |
 | onForwardClick | none | function | message list item onForwardClick event |
+| onReplyClick | none | function | message list item onReplyClick event |
+| onReplyMessageClick | none | function | message list item onReplyMessageClick event |
 | downButton | true | boolean | message list scroll to bottom button |
 | downButtonBadge | none | boolean | message list downButton badge content |
 | onDownButtonClick | none | function | message list onDownButtonClick |

diff --git a/example/App.js b/example/App.js
@@ -95,6 +95,7 @@ export class App extends Component {
                 return {
                     position: (this.token() >= 1 ? 'right' : 'left'),
                     forwarded: true,
+                    replyButton: true,
                     reply: this.token() >= 1 ? ({
                         photoURL: this.token() >= 1 ? `data:image/png;base64,${this.photo(150)}` : null,
                         title: loremIpsum({ count: 2, units: 'words' }),

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.9.0",
+  "version": "10.9.1",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -38,6 +38,20 @@
     right: -50px;
 }
 
+.rce-mbox-reply-btn-left {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    left: -85px;
+}
+
+.rce-mbox-reply-btn-right {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    right: -85px;
+}
+
 .rce-container-mbox:hover .rce-mbox-forward-left {
     opacity: 1;
     visibility: visible;
@@ -48,6 +62,16 @@
     visibility: visible;
 }
 
+.rce-container-mbox:hover .rce-mbox-reply-btn-left {
+    opacity: 1;
+    visibility: visible;
+}
+
+.rce-container-mbox:hover .rce-mbox-reply-btn-right {
+    opacity: 1;
+    visibility: visible;
+}
+
 .rce-mbox {
     position: relative;
     background: white;
@@ -222,4 +246,4 @@
 
 .rce-mbox-title > .rce-avatar-container {
     margin-right: 5px;
-}
+}
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -11,11 +11,11 @@ import ReplyMessage from '../ReplyMessage/ReplyMessage';
 import Avatar from '../Avatar/Avatar';
 
 import FaForward from 'react-icons/lib/fa/mail-forward';
-import FaReply from 'react-icons/lib/fa/mail-reply';
 
 import IoDoneAll from 'react-icons/lib/io/android-done-all';
 import MdIosTime from 'react-icons/lib/md/access-time';
 import MdCheck from 'react-icons/lib/md/check';
+import MdMessage from 'react-icons/lib/md/message';
 
 import {
     format,
@@ -84,6 +84,23 @@ export class MessageBox extends Component {
                                     </div>
                                 }
 
+                                {
+                                    this.props.replyButton === true &&
+                                    <div
+                                        className={this.props.forwarded !== true ? classNames(
+                                            'rce-mbox-forward',
+                                            { 'rce-mbox-forward-right': this.props.position === 'left' },
+                                            { 'rce-mbox-forward-left': this.props.position === 'right' }
+                                        ) : classNames(
+                                            'rce-mbox-forward',
+                                            { 'rce-mbox-reply-btn-right': this.props.position === 'left' },
+                                            { 'rce-mbox-reply-btn-left': this.props.position === 'right' }
+                                        )}
+                                        onClick={this.props.onReplyClick}>
+                                            <MdMessage />
+                                    </div>
+                                }
+
                                 {
                                     (this.props.title || this.props.avatar) &&
                                     <div
@@ -254,6 +271,7 @@ MessageBox.defaultProps = {
     titleColor: null,
     onTitleClick: null,
     onForwardClick: null,
+    onReplyClick: null,
     onReplyMessageClick: null,
     date: new Date(),
     data: {},

diff --git a/src/MessageList/MessageList.js b/src/MessageList/MessageList.js
@@ -79,6 +79,16 @@ export class MessageList extends Component {
             this.props.onForwardClick(item, i, e);
     }
 
+    onReplyClick(item, i, e) {
+        if (this.props.onReplyClick instanceof Function)
+            this.props.onReplyClick(item, i, e);
+    }
+
+    onReplyMessageClick(item, i, e) {
+        if (this.props.onReplyMessageClick instanceof Function)
+            this.props.onReplyMessageClick(item, i, e);
+    }
+
     onContextMenu(item, i, e) {
         if (this.props.onContextMenu instanceof Function)
             this.props.onContextMenu(item, i, e);
@@ -148,6 +158,8 @@ export class MessageList extends Component {
                                 onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
                                 onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
                                 onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
+                                onReplyClick={this.props.onReplyClick && ((e) => this.onReplyClick(x, i, e))}
+                                onReplyMessageClick={this.props.onReplyMessageClick && ((e) => this.onReplyMessageClick(x, i, e))}
                                 onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
                                 onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
                                 onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
@@ -181,6 +193,8 @@ MessageList.defaultProps = {
     onClick: null,
     onTitleClick: null,
     onForwardClick: null,
+    onReplyClick: null,
+    onReplyMessageClick: null,
     onDownButtonClick: null,
     onOpen: null,
     onPhotoError: null,