From c0d3d068de2169d428752ae61677ecef4fbe38f0 Mon Sep 17 00:00:00 2001
From: abdurrahmanekr <abdurrahmaneker58@gmail.com>
Date: Wed, 27 Sep 2017 10:55:51 +0300
Subject: [PATCH] message-box status prop added. forwarded title deleted.
 version update v0.4.26

---
 example/App.js                                | 33 +++++++++++++------
 package.json                                  |  2 +-
 src/MessageBox/MessageBox.css                 |  5 +++
 src/MessageBox/MessageBox.js                  | 30 ++++++++++++++++-
 src/MessageBox/__tests__/MessageBox.js        |  4 +--
 .../__snapshots__/MessageBox.js.snap          |  7 ++++
 6 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/example/App.js b/example/App.js
index 20edaeb5..28ea663d 100644
--- a/example/App.js
+++ b/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':
diff --git a/package.json b/package.json
index 703aadae..dc09ebc8 100644
--- a/package.json
+++ b/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 <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
index f16c1ed5..8b494c0a 100644
--- a/src/MessageBox/MessageBox.css
+++ b/src/MessageBox/MessageBox.css
@@ -117,3 +117,8 @@
 .rce-mbox-title:hover {
     text-decoration: underline;
 }
+
+.rce-mbox-statu {
+	margin-left: 3px;
+	font-size: 15px;
+}
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
index c760e70d..75a7f38b 100644
--- a/src/MessageBox/MessageBox.js
+++ b/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,
 };
 
 
diff --git a/src/MessageBox/__tests__/MessageBox.js b/src/MessageBox/__tests__/MessageBox.js
index 3819a524..fb182e33 100644
--- a/src/MessageBox/__tests__/MessageBox.js
+++ b/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();
   });
-});
\ No newline at end of file
+});
diff --git a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap b/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap
index cf2c7242..5dd9f61a 100644
--- a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap
+++ b/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