add contextmenu event handler prop, onContextMenu to MessageBox and MessageList

Author: Reyhan Ünal

README.md

@@ -136,6 +136,7 @@ import { MessageBox } from 'react-chat-elements'
 | onLoad | none | function | message on load photo |
 | onTitleClick | none | function | message title on click event |
 | onForwardClick | none | function | message forward on click event |
+| onContextMenu | none | function | message contextmenu click event |
 | forwarded | none | boolean | message forward icon |
 | status | none | string | message status info (waiting, sent, received, read) |
 | notch | true | boolean | message box notch |
@@ -200,7 +201,7 @@ import { MessageList } from 'react-chat-elements'
 | downButton | true | boolean | message list scroll to bottom button |
 | downButtonBadge | none | boolean | message list downButton badge content |
 | onDownButtonClick | none | function | message list onDownButtonClick |
-
+| onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event |
 
 ## ChatList Component
 

src/MessageBox/MessageBox.js

@@ -50,7 +50,9 @@ export class MessageBox extends Component {
                                 {'rce-mbox--clear-padding': thatAbsoluteTime},
                                 {'rce-mbox--clear-notch': !this.props.notch}
                             )}>
-                            <div className='rce-mbox-body'>
+                            <div
+                                className='rce-mbox-body'
+                                onContextMenu={this.props.onContextMenu}>
                                 {
                                     this.props.forwarded === true &&
                                     <div
@@ -229,6 +231,7 @@ MessageBox.defaultProps = {
     avatar: null,
     renderAddCmp: null,
     copiableDate: false,
+    onContextMenu: null,
 };
 
 

src/MessageList/MessageList.js

@@ -69,6 +69,11 @@ export class MessageList extends Component {
             this.props.onForwardClick(item, i, e);
     }
 
+    onContextMenu(item, i, e) {
+        if (this.props.onContextMenu instanceof Function)
+            this.props.onContextMenu(item, i, e);
+    }
+
     loadRef(ref) {
         this.mlistRef = ref;
         if (this.props.cmpRef instanceof Function)
@@ -127,7 +132,9 @@ export class MessageList extends Component {
                                 onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
                                 onTitleClick={this.props.onDownload && ((e) => this.onTitleClick(x, i, e))}
                                 onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
-                                onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}/>
+                                onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
+                                onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
+                                />
                         ))
                     }
                 </div>