Merge pull request #132 from Detaysoft/meeting-message-context

Meeting message context

Author: abdurrahmanekr

README.md

@@ -147,6 +147,7 @@ import { MessageBox } from 'react-chat-elements'
 | onMeetingTitleClick | none | function | meeting title message on click event |
 | onMeetingVideoLinkClick | none | function | meeting video link message on click event |
 | onReplyMessageClick | none | function | reply message on click event |
+| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event |
 | onContextMenu | none | function | message contextmenu click event |
 | forwarded | none | boolean | message forward icon |
 | replyButton | none | boolean | message reply icon |
@@ -235,10 +236,12 @@ import { MeetingMessage } from 'react-chat-elements'
 | date | new Date() | Date | Meeting date |
 | collapseTitle | none | string | Meeting subtitle |
 | participants | [] | array | Meeting participant array |
+| moreItems | none | array | message more items |
 | dataSource | [] | array | meeting list array |
 | onClick | none | function | meeting message on click event (message(object) is returned) |
 | onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) |
 | onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) |
+| onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event |
 
 ## SystemMessage Component
 

package.json

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

src/MeetingMessage/MeetingMessage.css

@@ -105,11 +105,14 @@
 }
 
 .rce-mtmg-right-icon {
-    display: flex;
-    align-items: center;
-    position: relative;
     right: 10px;
     cursor: pointer;
+    height: 100%;
+    background: transparent !important;
+}
+
+.rce-mtmg-body .rce-dropdown-container {
+    height: 100%;
 }
 
 .rce-mtmg-right-icon > svg {

src/MeetingMessage/MeetingMessage.js

@@ -13,6 +13,7 @@ import {
 } from'timeago.js';
 
 import Avatar from '../Avatar/Avatar';
+import Dropdown from '../Dropdown/Dropdown';
 
 import classNames from 'classnames';
 
@@ -38,6 +39,8 @@ export class MeetingMessage extends Component {
             title,
             subject,
             onClick,
+            onMeetingMoreSelect,
+            moreItems,
             collapseTitle,
             dataSource,
             participants,
@@ -70,8 +73,19 @@ export class MeetingMessage extends Component {
                                 </span>
                             </div>
                         </div>
-                        <div className="rce-mtmg-right-icon">
-                            <MdMoreHoriz/>
+                        <div>
+                            <Dropdown
+                                animationType="bottom"
+                                animationPosition="norteast"
+                                buttonProps={{
+                                    className:'rce-mtmg-right-icon',
+                                    icon: {
+                                        component: <MdMoreHoriz/>,
+                                        size: 24,
+                                    },
+                                }}
+                                items={moreItems}
+                                onSelect={onMeetingMoreSelect}/>
                         </div>
                     </div>
                     <div
@@ -237,6 +251,7 @@ MeetingMessage.defaultProps = {
     dataSource: [],
     participants: [],
     onClick: () => void(0),
+    onMeetingMoreSelect: () => void(0),
     onMeetingTitleClick: () => void(0),
     onMeetingVideoLinkClick: () => void(0),
     onAvatarError: () => void(0),

src/MessageBox/MessageBox.js

@@ -196,8 +196,10 @@ export class MessageBox extends Component {
                                         dateString={this.props.meeting.dateString}
                                         collapseTitle={this.props.meeting.collapseTitle}
                                         participants={this.props.meeting.participants}
+                                        moreItems={this.props.meeting.moreItems}
                                         dataSource={this.props.meeting.dataSource}
                                         onClick={this.props.onMeetingMessageClick}
+                                        onMeetingMoreSelect={this.props.onMeetingMoreSelect}
                                         onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
                                         onMeetingTitleClick={this.props.onMeetingTitleClick} />
                                 }

src/MessageList/MessageList.js

@@ -145,6 +145,11 @@ export class MessageList extends Component {
         }
     }
 
+    onMeetingMoreSelect(item, i, e) {
+        if (this.props.onMeetingMoreSelect instanceof Function)
+            this.props.onMeetingMoreSelect(item, i, e);
+    }
+
     render() {
         return (
             <div
@@ -167,6 +172,7 @@ export class MessageList extends Component {
                                 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))}
+                                onMeetingMoreSelect={this.props.onMeetingMoreSelect && ((e) => this.onMeetingMoreSelect(x, i, e))}
                                 onMessageFocused={this.props.onMessageFocused && ((e) => this.onMessageFocused(x, i, e))}
                                 onMeetingMessageClick={this.props.onMeetingMessageClick && ((e) => this.onMeetingMessageClick(x, i, e))}
                                 onMeetingTitleClick={this.props.onMeetingTitleClick}