message-box status prop added.

forwarded title deleted.
version update v0.4.26

example/App.js

@@ -60,16 +60,28 @@ export class App extends Component {
 		switch (type) {
 			case 'message':
 				var type = this.token();
-				if (type === 0)
-					type = 'photo';
-				else if (type === 1)
-					type = 'file';
-				else if (type === 2)
-					type = 'system';
-				else if (type === 3)
-					type = 'location';
-				else
-					type = 'text';
+				var statu = 'waiting';
+				switch(type) {
+					case 0:
+						type = 'photo';
+						statu = 'sent';
+						break;
+					case 1:
+						type = 'file';
+						statu = 'sent';
+						break;
+					case 2:
+						type = 'system';
+						statu = 'received';
+						break;
+					case 3:
+						type = 'location';
+						break;
+					default:
+						type = 'text';
+						statu = 'read';
+						break;
+				}
 
 				return {
 					position: (this.token() >= 1 ? 'right' : 'left'),
@@ -89,6 +101,7 @@ export class App extends Component {
 						latitude: '37.773972',
 						longitude: '-122.431297',
 					},
+					statu: statu,
 					date: new Date(),
 				};
 			case 'chat':

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

src/MessageBox/MessageBox.css

@@ -117,3 +117,8 @@
 .rce-mbox-title:hover {
     text-decoration: underline;
 }
+
+.rce-mbox-statu {
+	margin-left: 3px;
+	font-size: 15px;
+}

src/MessageBox/MessageBox.js

@@ -9,6 +9,10 @@ import LocationMessage from '../LocationMessage/LocationMessage';
 import FaForward from 'react-icons/lib/fa/mail-forward';
 import FaReply from 'react-icons/lib/fa/mail-reply';
 
+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';
+
 const moment = require('moment');
 
 const classNames = require('classnames');
@@ -31,7 +35,6 @@ export class MessageBox extends Component {
 							{
 								this.props.forwarded === true &&
 								<div
-									title="Mesajı İlet"
 									className={classNames(
 										'rce-mbox-forward',
 										{ 'rce-mbox-forward-right': this.props.position === 'left' },
@@ -89,6 +92,30 @@ export class MessageBox extends Component {
 									!isNaN(this.props.date) &&
 									moment(this.props.date).fromNow()
 								}
+								{
+									this.props.statu &&
+									<span className='rce-mbox-statu'>
+										{
+											this.props.statu === 'waiting' &&
+											<MdIosTime />
+										}
+
+										{
+											this.props.statu === 'sent' &&
+											<MdCheck />
+										}
+
+										{
+											this.props.statu === 'received' &&
+											<IoDoneAll />
+										}
+
+										{
+											this.props.statu === 'read' &&
+											<IoDoneAll color='#4FC3F7'/>
+										}
+									</span>
+								}
 							</div>
 
 							{
@@ -131,6 +158,7 @@ MessageBox.defaultProps = {
 	onOpen: null,
 	onDownload: null,
 	forwarded: false,
+	statu: null,
 };
 
 

src/MessageBox/__tests__/MessageBox.js

@@ -5,9 +5,9 @@ import MessageBox from '../MessageBox';
 
 describe('MessageBox component', () => {
   it('should render without issues', () => {
-    const component = shallow(<MessageBox />);
+    const component = shallow(<MessageBox statu='read'/>);
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
-});
+});

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

@@ -15,6 +15,13 @@ exports[`MessageBox component should render without issues 1`] = `
       className="rce-mbox-time"
     >
       a few seconds ago
+      <span
+        className="rce-mbox-statu"
+      >
+        <IoAndroidDoneAll
+          color="#4FC3F7"
+        />
+      </span>
     </div>
     <div>
       <svg