Detaysoft · abdurrahmanekr · Jul 30, 2017 · Aug 2, 2017 · Aug 2, 2017 · Aug 9, 2017
diff --git a/.gitignore b/.gitignore
@@ -1,12 +1,12 @@
 dependencies
-/node_modules
+node_modules
 
 # testing
-/coverage
+coverage
 
 # misc
 .DS_Store
 .env
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -5,9 +5,10 @@
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "src/index.js",
   "devDependencies": {
-    "react": "^15.6.1",
     "enzyme": "^2.9.1",
     "enzyme-to-json": "^1.5.1",
+    "lorem-ipsum": "^1.0.4",
+    "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-scripts": "^1.0.10",
     "react-test-renderer": "^15.6.1"
@@ -35,6 +36,15 @@
   },
   "homepage": "https://github.com/abdurrahmanekr/react-chat-elements#readme",
   "scripts": {
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom",
+    "test:coverage": "npm run test -- --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "react-icons": "^2.2.5",
+    "react-progressbar.js": "^0.2.0",
+    "react-spinkit": "^3.0.0",
     "test": "react-scripts test --env=jsdom",
     "test:coverage": "npm run test -- --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js"
   }

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+  <title>React Chat Components</title>
+</head>
+
+<body>
+  <div id="root" class="container"></div>
+</body>
+
+</html>
diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -0,0 +1,109 @@
+.rce-container-mbox {
+	flex-direction: column;
+	display: block;
+	overflow: hidden;
+}
+.rce-mbox {
+	position: relative;
+	background: white;
+	border-radius: 5px;
+	box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2);
+	border-top-right-radius: 0px;
+	margin-right: 20px;
+	margin-top: 5px;
+	display: inline-block;
+	flex-direction: column;
+	margin-bottom: 5px;
+	padding: 6px 9px 8px 9px;
+	float: left;
+	min-width: 140px;
+	max-width: 70%;
+}
+
+.rce-mbox.rce-mbox-right {
+	float: right;
+}
+
+.rce-mbox-text {
+	font-size: 13.6px;
+}
+
+.rce-mbox-time {
+	text-align: right;
+	color: rgba(0,0,0,0.45);
+	font-size: 12px;
+}
+
+.rce-mbox-right-notch {
+	z-index: 1;
+	position: absolute;
+	right: -14px;
+	top: 0px;
+	width: 15px;
+	height: 15px;
+	fill: white;
+	filter: drop-shadow( 2px 0px 1px rgba(0,0,0,.2) );
+}
+
+.rce-mbox-photo {
+	margin-top: -3px;
+	margin-right: -6px;
+	margin-left: -6px;
+}
+
+.rce-mbox-photo .rce-mbox-text {
+	padding: 5px 0px;
+	max-width: 300px;
+	margin: auto;
+}
+
+.rce-mbox-photo--img {
+	position: relative;
+	display: flex;
+	overflow: hidden;
+	justify-content: center;
+	border-radius: 5px;
+	max-height: 300px;
+}
+
+.rce-mbox-photo--img__block {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.5);
+	border-radius: 5px;
+	display: flex;
+}
+
+.rce-mbox-photo--img img {
+	height: 100%;
+}
+
+.rce-mbox-photo--img__block-item {
+	margin: auto;
+	cursor: pointer;
+}
+
+.rce-mbox-photo--download {
+	color: #efe;
+	display: flex;
+	justify-content: center;
+	background: none;
+	border: none;
+	font-size: 3.2em;
+	outline: none;
+	border: 1px solid #eee;
+	border-radius: 100%;
+	height: 100px;
+	width: 100px;
+}
+
+.rce-mbox-photo--download:hover {
+	opacity: .7;
+}
+
+.rce-mbox-photo--download:active {
+	opacity: .3;
+}
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -1,7 +1,89 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './MessageBox.css';
 
-const MessageBox = () => (
-	<div></div>
-);
+import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
 
-module.exports = MessageBox;
+const classNames = require('classnames');
+const ProgressBar = require('react-progressbar.js');
+const Circle = ProgressBar.Circle;
+
+export class MessageBox extends Component {
+	render() {
+		var positionCls = classNames('rce-mbox', { 'rce-mbox-right' : this.props.position === 'right' });
+		var progressOptions = {
+			strokeWidth: 2.3,
+			color: '#efe',
+			trailColor: '#aaa',
+			trailWidth: 1,
+			step: (state, circle) => {
+				circle.path.setAttribute('trail', state.color);
+				circle.path.setAttribute('trailwidth-width', state.width);
+
+				var value = Math.round(circle.value() * 100);
+				if (value === 0)
+					circle.setText('');
+				else
+					circle.setText(value);
+			}
+		};
+
+		return (
+			<div className="rce-container-mbox">
+				<div
+					className={positionCls}>
+					{
+						this.props.type === 'text' &&
+						<div className="rce-mbox-text">
+							{this.props.text}
+						</div>
+					}
+
+					{
+						this.props.type === 'photo' &&
+						<div className="rce-mbox-photo">
+							<div className="rce-mbox-photo--img">
+								<img src={this.props.data.uri} alt={this.props.data.alt}/>
+								{
+									this.props.data.status &&
+									!this.props.data.status.download &&
+									<div className="rce-mbox-photo--img__block">
+										{
+											!this.props.data.status.click &&
+											<button
+												className="rce-mbox-photo--img__block-item rce-mbox-photo--download">
+												<FaCloudDownload/>
+											</button>
+										}
+										{
+											this.props.data.status.loading !== 0 &&
+											<Circle
+												progress={this.props.data.status.loading}
+												options={progressOptions}
+												initialAnimate={true}
+												containerStyle={{
+													width: '100px',
+													height: '100px',
+												}}
+												containerClassName={'rce-mbox-photo--img__block-item'} />
+										}
+									</div>
+								}
+							</div>
+							<div className="rce-mbox-text">
+								{this.props.text}
+							</div>
+						</div>
+					}
+					<div className="rce-mbox-time rce-mbox-right">
+						12:30
+					</div>
+					<svg className="rce-mbox-right-notch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+						<path d="M0 0v20L20 0"/>
+					</svg>
+				</div>
+			</div>
+		);
+	}
+}
+
+export default MessageBox;
diff --git a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap b/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap
@@ -1,3 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageBox component should render without issues 1`] = `<div />`;
+exports[`MessageBox component should render without issues 1`] = `
+<div
+  className="rce-container-mbox"
+>
+  <div
+    className="rce-mbox"
+  >
+    <div
+      className="rce-mbox-time rce-mbox-right"
+    >
+      12:30
+    </div>
+    <svg
+      className="rce-mbox-right-notch"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0v20L20 0"
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/src/assets/img/leftArrow.svg b/src/assets/img/leftArrow.svg
diff --git a/src/assets/img/rightArrow.svg b/src/assets/img/rightArrow.svg
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -0,0 +1,4 @@
+body {
+	font-family: verdana;
+	background: navajowhite;
+}
diff --git a/src/example/App.js b/src/example/App.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import MessageBox from '../MessageBox/MessageBox';
+
+const loremIpsum = require('lorem-ipsum');
+
+export class App extends Component {
+	random() {
+		return {
+			position: (parseInt(Math.random() * 10 % 2) && 'right'),
+			type: 'photo',
+			text: loremIpsum({count: 1, units: 'sentences'}),
+			data: {
+				uri: 'https://user-images.githubusercontent.com/15075759/29005175-1d023bea-7ade-11e7-86d5-21f87225ef56.png',
+				status: {
+					click: true,
+					loading: 0.5,
+				}
+			},
+			date: new Date(),
+		};
+	}
+
+	render() {
+		var arr = [1,2,3,4,5,6,7,8,9,0];
+		return (
+			<div>
+				{
+					arr.map((x, i) => {
+						var tmp = this.random();
+
+						return <MessageBox
+							key={i}
+							type={tmp.type}
+							text={tmp.text}
+							data={tmp.data}
+							position={tmp.position}/>
+					})
+				}
+			</div>
+		);
+	}
+}
+export default App;
diff --git a/src/example/index.js b/src/example/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+
+const render = Component => {
+	ReactDOM.render(
+		<Component/>,
+		document.getElementById('root'),
+	);
+};
+
+render(App);
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,11 @@
-/* import css */
-import '../assets/css';
+import './assets/style.css';
+
+import './example';
 
 /* import components */
-import MessageBox from './MessageBox.js';
+import MessageBox from './MessageBox/MessageBox';
 
 
 export {
-	MessageBox
+	MessageBox,
 };