Skip to content

Commit

Permalink
Merge pull request #143 from Detaysoft/message-delete
Browse files Browse the repository at this point in the history 
Message delete
  • Loading branch information
@abdurrahmanekr
abdurrahmanekr authored May 21, 2021
2 parents 6b73d96 + c73862d commit 88f5423
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 2 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,12 @@ 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 |
| onRemoveMessageClick | none | function | message remove 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 |
| removeButton | none | boolean | message remove icon |
| status | none | string | message status info (waiting, sent, received, read) |
| notch | true | boolean | message box notch |
| avatar | none | url | message box avatar url |
Expand All @@ -159,6 +161,7 @@ import { MessageBox } from 'react-chat-elements'
| focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused |
| onMessageFocused | none | function | makes focus value false after the message becomes focus |
| reply | none | object | reply data |
| retracted | none | boolean | message deleted or retracted |

## Reply Message Component

Expand Down
5 changes: 5 additions & 0 deletions example/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ export class App extends Component {
position: (this.token() >= 1 ? 'right' : 'left'),
forwarded: true,
replyButton: true,
removeButton: true,
retracted: false,
reply: this.token() >= 1 ? ({
photoURL: this.token() >= 1 ? `data:image/png;base64,${this.photo(150)}` : null,
title: loremIpsum({ count: 2, units: 'words' }),
Expand Down Expand Up @@ -178,6 +180,9 @@ export class App extends Component {
onReplyMessageClick: () => {
console.log('onReplyMessageClick');
},
onRemoveMessageClick: () => {
console.log('onRemoveMessageClick');
},
avatar: `data:image/png;base64,${this.photo()}`,
};
case 'chat':
Expand Down
1 change: 1 addition & 0 deletions src/ChatItem/ChatItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down
64 changes: 63 additions & 1 deletion src/MessageBox/MessageBox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
flex-direction: column;
display: block;
overflow-x: hidden;
min-width: 200px;
min-width: 300px;
}

.rce-mbox-forward {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -133,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"
}
Expand Down
33 changes: 32 additions & 1 deletion src/MessageBox/MessageBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ 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 MdBlock from 'react-icons/lib/md/block';

import {
format,
Expand Down Expand Up @@ -74,6 +76,7 @@ export class MessageBox extends React.PureComponent {
className='rce-mbox-body'
onContextMenu={this.props.onContextMenu}>
{
!this.props.retracted &&
this.props.forwarded === true &&
<div
className={classNames(
Expand All @@ -87,6 +90,7 @@ export class MessageBox extends React.PureComponent {
}

{
!this.props.retracted &&
this.props.replyButton === true &&
<div
className={this.props.forwarded !== true ? classNames(
Expand All @@ -103,6 +107,24 @@ export class MessageBox extends React.PureComponent {
</div>
}

{
!this.props.retracted &&
this.props.removeButton === true &&
<div
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 />
</div>
}

{
(this.props.title || this.props.avatar) &&
<div
Expand Down Expand Up @@ -136,7 +158,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>
}
Expand Down Expand Up @@ -314,6 +344,7 @@ MessageBox.defaultProps = {
onTitleClick: null,
onForwardClick: null,
onReplyClick: null,
onRemoveMessageClick: null,
onReplyMessageClick: null,
date: new Date(),
data: {},
Expand Down
6 changes: 6 additions & 0 deletions src/MessageList/MessageList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -170,6 +175,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))}
Expand Down

0 comments on commit 88f5423

Please sign in to comment.