MessageBox notch and avatar property added. (#37)

* MessageBox notch property added.

* MessageBox avatar property added.

* README.MD update 'notch'

* renderAvatar prop added.

* renderAddCmp prop added.
MessageBox max-width style deleted.

Author: abdurrahmanekr

README.md

@@ -110,6 +110,9 @@ import { MessageBox } from 'react-chat-elements'
 | onForwardClick | none | function | message forward on click event |
 | forwarded | none | boolean | message forward icon |
 | statu | none | string | message statu info (waiting, sent, received, read) |
+| notch | true | boolean | message box notch |
+| avatar | none | url | message box avatar url |
+| renderAddCmp | none | function (component) | adding custom components to message box |
 
 
 ## SystemMessage Component

example/App.js

@@ -96,7 +96,7 @@ export class App extends Component {
                     view: 'list',
                     title: loremIpsum({ count: 2, units: 'words' }),
                     titleColor: this.getRandomColor(),
-                    text: type === 'spotify' ? 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' : loremIpsum({ count: 1, units: 'sentences' }),
+                    text: type === 'spotify' ? 'spotify:track:7wGoVu4Dady5GV0Sv4UIsx' : loremIpsum({ count: 1, units: 'sentences' }),
                     data: {
                         uri: `data:image/png;base64,${this.photo(150)}`,
                         status: {
@@ -111,6 +111,7 @@ export class App extends Component {
                     statu: statu,
                     date: new Date(),
                     dateString: moment(new Date()).format('HH:mm'),
+                    avatar: `data:image/png;base64,${this.photo()}`,
                 };
             case 'chat':
                 return {

src/MessageBox/MessageBox.css

@@ -62,7 +62,6 @@
     padding: 6px 9px 8px 9px;
     float: left;
     min-width: 140px;
-    max-width: 70%;
 }
 
 .rce-mbox-body {
@@ -117,6 +116,10 @@
     padding-bottom: 3px;
 }
 
+.rce-mbox.rce-mbox--clear-notch {
+    border-radius: 5px 5px 5px 5px !important;
+}
+
 .rce-mbox-right-notch {
     position: absolute;
     right: -14px;
@@ -144,6 +147,8 @@
     color: #4f81a1;
     user-select: none;
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
 .rce-mbox-title:hover {
@@ -158,3 +163,7 @@
     margin-left: 3px;
     font-size: 15px;
 }
+
+.rce-mbox-title > .rce-avatar-container {
+    margin-right: 5px;
+}

src/MessageBox/MessageBox.js

@@ -7,6 +7,8 @@ import SystemMessage from '../SystemMessage/SystemMessage';
 import LocationMessage from '../LocationMessage/LocationMessage';
 import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
 
+import Avatar from '../Avatar/Avatar';
+
 import FaForward from 'react-icons/lib/fa/mail-forward';
 import FaReply from 'react-icons/lib/fa/mail-reply';
 
@@ -27,6 +29,10 @@ export class MessageBox extends Component {
             <div
                 className={classNames('rce-container-mbox', this.props.className)}
                 onClick={this.props.onClick}>
+                {
+                    this.props.renderAddCmp instanceof Function &&
+                    this.props.renderAddCmp()
+                }
                 {
                     this.props.type === 'system' ?
                         <SystemMessage
@@ -36,6 +42,7 @@ export class MessageBox extends Component {
                             className={classNames(
                                 positionCls,
                                 {'rce-mbox--clear-padding': thatAbsoluteTime},
+                                {'rce-mbox--clear-notch': !this.props.notch}
                             )}>
                             <div className='rce-mbox-body'>
                                 {
@@ -52,14 +59,22 @@ export class MessageBox extends Component {
                                 }
 
                                 {
-                                    this.props.title &&
+                                    (this.props.title || this.props.avatar) &&
                                     <p
                                         style={this.props.titleColor && { color: this.props.titleColor }}
                                         onClick={this.props.onTitleClick}
                                         className={classNames('rce-mbox-title', {
                                             'rce-mbox-title--clear': this.props.type === 'text',
                                         })}>
-                                        {this.props.title}
+                                        {
+                                            this.props.avatar &&
+                                            <Avatar
+                                                src={this.props.avatar}/>
+                                        }
+                                        {
+                                            this.props.title &&
+                                            <span>{this.props.title}</span>
+                                        }
                                     </p>
                                 }
 
@@ -149,7 +164,8 @@ export class MessageBox extends Component {
                             </div>
 
                             {
-                                this.props.position === 'right' ?
+                                this.props.notch &&
+                                (this.props.position === 'right' ?
                                     <svg className="rce-mbox-right-notch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                         <path d="M0 0v20L20 0" />
                                     </svg>
@@ -166,6 +182,7 @@ export class MessageBox extends Component {
                                             <path d="M20 0v20L0 0" filter="url(#filter1)" />
                                         </svg>
                                     </div>
+                                )
                             }
                         </div>
                 }
@@ -190,6 +207,9 @@ MessageBox.defaultProps = {
     forwarded: false,
     statu: null,
     dateString: null,
+    notch: true,
+    avatar: null,
+    renderAddCmp: null,
 };