Merge pull request #115 from Detaysoft/reply-feat

Reply feature added!

Author: abdurrahmanekr

README.md

@@ -149,6 +149,27 @@ import { MessageBox } from 'react-chat-elements'
 | copiableDate | false | boolean | message box date text copiable |
 | 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 |
+
+## Reply Message Component
+
+```javascript
+import { MessageBox } from 'react-chat-elements'
+
+<MessageBox
+    reply={{
+        photoURL: 'https://facebook.github.io/react/img/logo.svg',
+        title: 'elit magna',
+        titleColor: '#8717ae',
+        message: 'Aliqua amet incididunt id nostrud',
+    }}
+    onReplyMessageClick={() => console.log('reply clicked!')}
+    position={'left'}
+    type={'text'}
+    text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}/>
+```
+
+![reply-message](https://user-images.githubusercontent.com/15075759/80224625-9dbbeb00-8652-11ea-994f-022be0cffe30.png)
 
 
 ## SystemMessage Component

example/App.js

@@ -95,6 +95,12 @@ export class App extends Component {
                 return {
                     position: (this.token() >= 1 ? 'right' : 'left'),
                     forwarded: true,
+                    reply: this.token() >= 1 ? ({
+                        photoURL: this.token() >= 1 ? `data:image/png;base64,${this.photo(150)}` : null,
+                        title: loremIpsum({ count: 2, units: 'words' }),
+                        titleColor: this.getRandomColor(),
+                        message: loremIpsum({ count: 1, units: 'sentences' }),
+                    }) : null,
                     type: type,
                     theme: 'white',
                     view: 'list',
@@ -119,6 +125,9 @@ export class App extends Component {
                     },
                     status: status,
                     date: +new Date(),
+                    onReplyMessageClick: () => {
+                        console.log('onReplyMessageClick');
+                    },
                     avatar: `data:image/png;base64,${this.photo()}`,
                 };
             case 'chat':

src/ChatItem/__tests__/__snapshots__/ChatItem.js.snap

@@ -13,6 +13,7 @@ exports[`ChatItem component should render without issues 1`] = `
     >
       <Avatar
         alt=""
+        className=""
         onError={[Function]}
         sideElement={null}
         size="large"
@@ -32,7 +33,7 @@ exports[`ChatItem component should render without issues 1`] = `
         <div
           className="rce-citem-body--top-time"
         >
-          right now
+          just now
         </div>
       </div>
       <div

src/MessageBox/MessageBox.js

@@ -6,6 +6,7 @@ import FileMessage from '../FileMessage/FileMessage';
 import SystemMessage from '../SystemMessage/SystemMessage';
 import LocationMessage from '../LocationMessage/LocationMessage';
 import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
+import ReplyMessage from '../ReplyMessage/ReplyMessage';
 
 import Avatar from '../Avatar/Avatar';
 
@@ -104,6 +105,16 @@ export class MessageBox extends Component {
                                     </div>
                                 }
 
+                                {
+                                    this.props.reply &&
+                                    <ReplyMessage
+                                        photoURL={this.props.reply.photoURL}
+                                        title={this.props.reply.title}
+                                        titleColor={this.props.reply.titleColor}
+                                        message={this.props.reply.message}
+                                        onClick={this.props.onReplyMessageClick}/>
+                                }
+
                                 {
                                     this.props.type === 'text' &&
                                     <div className="rce-mbox-text">
@@ -243,6 +254,7 @@ MessageBox.defaultProps = {
     titleColor: null,
     onTitleClick: null,
     onForwardClick: null,
+    onReplyMessageClick: null,
     date: new Date(),
     data: {},
     onClick: null,
@@ -251,6 +263,7 @@ MessageBox.defaultProps = {
     onLoad: null,
     onPhotoError: null,
     forwarded: false,
+    reply: false,
     status: null,
     dateString: null,
     notch: true,

src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap

@@ -17,7 +17,7 @@ exports[`MessageBox component should render without issues 1`] = `
       />
       <div
         className="rce-mbox-time non-copiable"
-        data-text="right now"
+        data-text="just now"
       >
         <span
           className="rce-mbox-status"

src/ReplyMessage/ReplyMessage.css

@@ -0,0 +1,61 @@
+.rce-mbox-reply {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    margin-top: -3px;
+    margin-bottom: 6px;
+    margin-right: -6px;
+    margin-left: -6px;
+    border-radius: 5px;
+    background: #ececec;
+    padding: 0 5px;
+    padding-right: 0;
+    font-size: 12px;
+    cursor: pointer;
+    transition: 200ms;
+    user-select: none;
+}
+
+.rce-mbox-reply.rce-mbox-reply-border {
+    border-left: 5px solid;
+}
+
+.rce-mbox-reply:hover {
+    opacity: 0.85;
+}
+
+.rce-mbox-reply-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 3px 0;
+    flex: 1;
+}
+
+.rce-mbox-reply-owner {
+    font-size: 13px;
+}
+
+.rce-mbox-reply-message {
+    color: #5a5a5a;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.rce-mbox-reply-right {
+    width: 40px;
+    height: 40px;
+}
+
+.rce-mbox-reply-right img {
+    width: 100%;
+}
+
+.rce-mbox-reply-text {
+    padding: 5px 0;
+    width: 250px;
+    margin-left: -6px;
+    margin-right: -6px;
+}

src/ReplyMessage/ReplyMessage.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import './ReplyMessage.css';
+
+const classNames = require('classnames');
+
+export class ReplyMessage extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {
+            photoURL,
+            title,
+            titleColor,
+            message,
+            onClick,
+        } = this.props;
+
+        return (
+            <div
+                className={classNames("rce-mbox-reply", {
+                    'rce-mbox-reply-border': !!titleColor
+                })}
+                style={titleColor && { borderColor: titleColor }}
+                onClick={onClick}>
+                <div className="rce-mbox-reply-left">
+                    <div
+                        style={titleColor && { color: titleColor }}
+                        className="rce-mbox-reply-owner">
+                        {title || 'Unknown'}
+                    </div>
+                    <div className="rce-mbox-reply-message">
+                        {message || '...'}
+                    </div>
+                </div>
+                {
+                    photoURL &&
+                    <div className="rce-mbox-reply-right">
+                        <img src={photoURL} alt=""/>
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+ReplyMessage.defaultProps = {
+    photoURL: null,
+    title: null,
+    titleColor: null,
+    message: null,
+    onClick: () => void(0),
+}
+
+export default ReplyMessage;

src/ReplyMessage/__tests__/ReplyMessage.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import ReplyMessage from '../ReplyMessage';
+
+describe('ReplyMessage component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<ReplyMessage />);
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

src/ReplyMessage/__tests__/__snapshots__/ReplyMessage.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReplyMessage component should render without issues 1`] = `
+<div
+  className="rce-mbox-reply"
+  onClick={[Function]}
+  style={null}
+>
+  <div
+    className="rce-mbox-reply-left"
+  >
+    <div
+      className="rce-mbox-reply-owner"
+      style={null}
+    >
+      Unknown
+    </div>
+    <div
+      className="rce-mbox-reply-message"
+    >
+      ...
+    </div>
+  </div>
+</div>
+`;