onReplyClick and onReplyMessageClick added

replyButton feat added

Author: abdurrahmanekr

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 |

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' }),

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 <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

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;
-}
+}

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: {},

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,