messageBox componentine message Delete iconu eklendi, tasarımı düzenlendi

Author: emregudur

example/App.js

@@ -110,6 +110,7 @@ export class App extends Component {
                     position: (this.token() >= 1 ? 'right' : 'left'),
                     forwarded: true,
                     replyButton: true,
+                    removeButton: true,
                     reply: this.token() >= 1 ? ({
                         photoURL: this.token() >= 1 ? `data:image/png;base64,${this.photo(150)}` : null,
                         title: loremIpsum({ count: 2, units: 'words' }),
@@ -178,6 +179,9 @@ export class App extends Component {
                     onReplyMessageClick: () => {
                         console.log('onReplyMessageClick');
                     },
+                    onRemoveMessageClick: () => {
+                        console.log('onReplyMessageClick');
+                    },
                     avatar: `data:image/png;base64,${this.photo()}`,
                 };
             case 'chat':

src/MessageBox/MessageBox.css

@@ -2,7 +2,7 @@
     flex-direction: column;
     display: block;
     overflow-x: hidden;
-    min-width: 200px;
+    min-width: 300px;
 }
 
 .rce-mbox-forward {
@@ -62,6 +62,49 @@
     visibility: visible;
 }
 
+.rce-mbox-remove {
+    width: 30px;
+    height: 30px;
+    border-radius: 20px;
+    background: #fff;
+    position: absolute;
+    /*display: none;*/
+    flex-direction: row;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 5px 0 rgba(164, 164, 164, 1);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}
+
+.rce-mbox-remove-left {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    left: -120px;
+}
+
+.rce-mbox-remove-right {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    right: -120px;
+}
+
+.rce-container-mbox:hover .rce-mbox-remove-left {
+    opacity: 1;
+    visibility: visible;
+}
+
+.rce-container-mbox:hover .rce-mbox-remove-right {
+    opacity: 1;
+    visibility: visible;
+}
+
 .rce-container-mbox:hover .rce-mbox-reply-btn-left {
     opacity: 1;
     visibility: visible;

src/MessageBox/MessageBox.js

@@ -19,6 +19,7 @@ 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 MdRemove from 'react-icons/lib/md/delete';
 
 import {
     format,
@@ -103,6 +104,19 @@ export class MessageBox extends React.PureComponent {
                                     </div>
                                 }
 
+                                {
+                                    this.props.removeButton === true &&
+                                    <div
+                                        className={classNames(
+                                            'rce-mbox-remove',
+                                            { 'rce-mbox-remove-right': this.props.position === 'left' },
+                                            { 'rce-mbox-remove-left': this.props.position === 'right' }
+                                        )}
+                                        onClick={this.props.onRemoveMessageClick}>
+                                            <MdRemove />
+                                    </div>
+                                }
+
                                 {
                                     (this.props.title || this.props.avatar) &&
                                     <div
@@ -314,6 +328,7 @@ MessageBox.defaultProps = {
     onTitleClick: null,
     onForwardClick: null,
     onReplyClick: null,
+    onRemoveMessageClick: null,
     onReplyMessageClick: null,
     date: new Date(),
     data: {},

src/MessageList/MessageList.js

@@ -170,6 +170,7 @@ export class MessageList extends Component {
                                 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))}
+                                onRemoveMessageClick={this.props.onRemoveMessageClick && ((e) => this.onRemoveMessageClick(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))}