Message File feature added.

Detaysoft · Aug 10, 2017 · ce96e49 · ce96e49
1 parent 331266e
commit ce96e49
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 19 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/ChatItem/ChatItem.css b/src/ChatItem/ChatItem.css
@@ -14,6 +14,7 @@
     user-select: none;
     max-width: 100%;
     overflow: hidden;
+    min-width: 240px;
 }
 
 .rce-citem:hover {

diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -11,7 +11,7 @@
 	border-top-right-radius: 0px;
 	margin-right: 20px;
 	margin-top: 5px;
-	display: inline-block;
+	display: flex;
 	flex-direction: column;
 	margin-bottom: 5px;
 	padding: 6px 9px 8px 9px;
@@ -106,4 +106,58 @@
 
 .rce-mbox-photo--download:active {
 	opacity: .3;
+}
+
+.rce-mbox-file {
+	background: #e9e9e9;
+	display: flex;
+	border-radius: 5px;
+	margin-top: -3px;
+	margin-right: -6px;
+	margin-left: -6px;
+	align-items: center;
+	min-height: 52px;
+	max-width: 500px;
+	padding: 5px 0;
+	cursor: pointer;
+    user-select: none;
+    outline: none;
+    border:none;
+}
+
+.rce-mbox-file > * {
+	padding: 0px 10px;
+}
+
+.rce-mbox-file--icon {
+	font-size: 30px;
+	align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.rce-mbox-file--size {
+	font-size: 10px;
+	margin-top: 3px;
+	max-width: 52px;
+	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.rce-mbox-file--text {
+	font-size: 13.6px;
+	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.rce-mbox-file--buttons {
+	font-size: 30px;
+	align-items: center;
+    display: flex;
+}
+
+.rce-mbox-file--loading {
+	font-size: 15px;
 }
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './MessageBox.css';
 
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
+import FaFile from 'react-icons/lib/fa/file';
 
 const classNames = require('classnames');
 const ProgressBar = require('react-progressbar.js');
@@ -26,6 +27,10 @@ export class MessageBox extends Component {
 					circle.setText(value);
 			}
 		};
+		var fileProgressOptions = Object.assign({}, progressOptions);
+		fileProgressOptions.strokeWidth = 5;
+		fileProgressOptions.color = '#333';
+		fileProgressOptions.trailWidth = 5;
 
 		return (
 			<div className="rce-container-mbox">
@@ -74,6 +79,40 @@ export class MessageBox extends Component {
 							</div>
 						</div>
 					}
+					{
+						this.props.type === 'file' &&
+						<button className="rce-mbox-file">
+							<div className="rce-mbox-file--icon">
+								<FaFile
+									color='#aaa'/>
+								<div className="rce-mbox-file--size">
+									1024mB
+								</div>
+							</div>
+							<div className="rce-mbox-file--text">
+								{this.props.text}
+							</div>
+							<div className="rce-mbox-file--buttons">
+								{
+									!this.props.data.status.click &&
+									<FaCloudDownload
+										color='#aaa'/>
+								}
+								{
+									this.props.data.status.loading !== 0 &&
+									<Circle
+										progress={this.props.data.status.loading}
+										options={fileProgressOptions}
+										initialAnimate={true}
+										containerStyle={{
+											width: '40px',
+											height: '40px',
+										}}
+										containerClassName={'rce-mbox-file--loading'} />
+								}
+							</div>
+						</button>
+					}
 					<div className="rce-mbox-time rce-mbox-right">
 						12:30
 					</div>

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -1,4 +1,9 @@
 body {
 	font-family: verdana, ubuntu;
 	background: navajowhite;
+}
+
+input,
+button {
+	font-family: verdana, ubuntu;
 }
diff --git a/src/example/App.js b/src/example/App.js
@@ -1,17 +1,22 @@
 import React, { Component } from 'react';
 import MessageBox from '../MessageBox/MessageBox';
-import ChatItem from '../ChatItem/ChatItem';
 
 const loremIpsum = require('lorem-ipsum');
 
 export class App extends Component {
 	random() {
 		return {
-			unread: parseInt(Math.random() * 10 % 2),
-			title: loremIpsum({count: 1, units: 'sentences'}),
-			avatar: 'https://avatars0.githubusercontent.com/u/15075759?v=4',
-			subtitle: loremIpsum({count: 1, units: 'sentences'}),
-			date: new Date().setDate(1),
+			position: (parseInt(Math.random() * 10 % 2) && 'right'),
+			type: (parseInt(Math.random() * 10 % 2) ? 'file' : '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: 1,
+				}
+			},
+			date: new Date(),
 		};
 	}
 
@@ -22,20 +27,21 @@ export class App extends Component {
 				{
 					arr.map((x, i) => {
 						var tmp = this.random();
-						return <ChatItem
-							key={i}
-							title={tmp.title}
-							subtitle={tmp.subtitle}
-							avatar={tmp.avatar}
-							unread={tmp.unread}
-							date={tmp.date}/>;
 
-						// return <MessageBox
+						// return <ChatItem
 						// 	key={i}
-						// 	type={tmp.type}
-						// 	text={tmp.text}
-						// 	data={tmp.data}
-						// 	position={tmp.position}/>;
+						// 	title={tmp.title}
+						// 	subtitle={tmp.subtitle}
+						// 	avatar={tmp.avatar}
+						// 	unread={tmp.unread}
+						// 	date={tmp.date}/>;
+
+						return <MessageBox
+							key={i}
+							type={tmp.type}
+							text={tmp.text}
+							data={tmp.data}
+							position={tmp.position}/>
 					})
 				}
 			</div>