delete message için gerekli düzenlemeler yapıldı

Author: emregudur

src/ChatItem/ChatItem.js

@@ -8,6 +8,7 @@ import {
 } from'timeago.js';
 
 import classNames from 'classnames';
+import MdBlock from 'react-icons/lib/md/block';
 
 export class ChatItem extends Component {
 

src/MessageBox/MessageBox.css

@@ -176,6 +176,25 @@
     word-break: break-word;
 }
 
+.rce-mbox-text-retracted {
+    font-style: italic;
+    user-select: none;
+    display: flex;
+    align-items: center;
+}
+
+.rce-mbox-text.rce-mbox-text-retracted svg {
+    margin-right: 3px;
+}
+
+.rce-mbox-text-retracted.left {
+    color: #555555b3 !important;
+}
+
+.rce-mbox-text-retracted.right {
+    color: #efefefb3 !important;
+}
+
 .rce-mbox-text:after {
     content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
 }

src/MessageBox/MessageBox.js

@@ -20,6 +20,7 @@ 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 MdBlock from 'react-icons/lib/md/block';
 
 import {
     format,
@@ -105,12 +106,17 @@ export class MessageBox extends React.PureComponent {
                                 }
 
                                 {
+                                    this.props.retracted === false &&
                                     this.props.removeButton === true &&
                                     <div
-                                        className={classNames(
+                                        className={this.props.forwarded === true ? classNames(
                                             'rce-mbox-remove',
                                             { 'rce-mbox-remove-right': this.props.position === 'left' },
                                             { 'rce-mbox-remove-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.onRemoveMessageClick}>
                                             <MdRemove />
@@ -150,7 +156,15 @@ export class MessageBox extends React.PureComponent {
 
                                 {
                                     this.props.type === 'text' &&
-                                    <div className="rce-mbox-text">
+                                    <div className={classNames('rce-mbox-text', {
+                                        'rce-mbox-text-retracted': this.props.retracted,
+                                        'left': this.props.position === 'left',
+                                        'right': this.props.position === 'right',
+                                    })}>
+                                        {
+                                            this.props.retracted &&
+                                            <MdBlock />
+                                        }
                                         {this.props.text}
                                     </div>
                                 }

src/MessageList/MessageList.js

@@ -89,6 +89,11 @@ export class MessageList extends Component {
             this.props.onReplyMessageClick(item, i, e);
     }
 
+    onRemoveMessageClick(item, i, e) {
+        if (this.props.onRemoveMessageClick instanceof Function)
+            this.props.onRemoveMessageClick(item, i, e);
+    }
+
     onContextMenu(item, i, e) {
         if (this.props.onContextMenu instanceof Function)
             this.props.onContextMenu(item, i, e);