onOpen and onDownload added.

Author: abdurrahmanekr

README.md

@@ -76,6 +76,9 @@ import { MessageBox } from 'react-chat-elements'
 | text | none | string | message text |
 | data | {} | object | message data |
 | date | new Date() | Date | message date |
+| onClick | none | function | message on click (message(object) is returned) |
+| onOpen | none | function | message on open (file or photo) (message(object) is returned) |
+| onDownload | none | function | message on download (file or photo) (message(object) is returned) |
 
 
 ## SystemMessage Component
@@ -127,6 +130,8 @@ import { MessageList } from 'react-chat-elements'
 | lockable | false | boolean | It locks to scroll position when the dataSource has been changed |
 | toBottomHeight | 300 | int or string(only '100%') | If the toBottomHeight property's value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property's value has been set **'100%'**, scrollbar goes to bottom at the end of the page when the data source has been changed. |
 | onClick | none | function | message list item on click (message(object) is returned) |
+| onOpen | none | function | message list item on open (file or photo) (message(object) is returned) |
+| onDownload | none | function | message list item on download (file or photo) (message(object) is returned) |
 
 
 ## ChatList Component

example/App.js

@@ -158,6 +158,12 @@ export class App extends Component {
 					className='right-panel'>
 					<MessageList
 						className='message-list'
+						onDownload={() => {
+							debugger;
+						}}
+						onOpen={() => {
+							debugger;
+						}}
 						lockable={true}
 						dataSource={this.state.messageList} />
 					<Input
@@ -175,9 +181,7 @@ export class App extends Component {
 								buttonProps={{
 									text: 'Boşu Boşuna'
 								}}
-								onSelect={(i) => {
-									console.log(`${i}'nci nesne seçildi`)
-								}}
+								onSelect={this.addMessage.bind(this)}
 								animationPosition='southeast'/>
 						}/>
 				</div>

src/FileMessage/FileMessage.js

@@ -8,6 +8,17 @@ const ProgressBar = require('react-progressbar.js');
 const Circle = ProgressBar.Circle;
 
 export class FileMessage extends Component {
+
+	onClick() {
+		if (!this.props.data.status)
+			return;
+
+		if (!this.props.data.status.download && this.props.onDownload instanceof Function)
+			this.props.onDownload();
+		else if (this.props.data.status.download && this.props.onOpen instanceof Function)
+			this.props.onOpen();
+	}
+
 	render() {
 		var progressOptions = {
 			strokeWidth: 5,
@@ -25,14 +36,14 @@ export class FileMessage extends Component {
 					circle.setText(value);
 			}
 		};
-		
+
 		return (
-			<button className="rce-mbox-file">
+			<button className="rce-mbox-file" onClick={this.onClick.bind(this)}>
 				<div className="rce-mbox-file--icon">
 					<FaFile
 						color='#aaa'/>
 					<div className="rce-mbox-file--size">
-						1024mB
+						{this.props.data.size}
 					</div>
 				</div>
 				<div className="rce-mbox-file--text">
@@ -41,12 +52,14 @@ export class FileMessage extends Component {
 				<div className="rce-mbox-file--buttons">
 					{
 						this.props.data.status &&
+						!this.props.data.status.download &&
 						!this.props.data.status.click &&
 						<FaCloudDownload
 							color='#aaa'/>
 					}
 					{
 						this.props.data.status &&
+						typeof this.props.data.status.loading === 'number' &&
 						this.props.data.status.loading !== 0 &&
 						<Circle
 							progress={this.props.data.status.loading}
@@ -67,7 +80,10 @@ export class FileMessage extends Component {
 FileMessage.defaultProps = {
 	text: '',
 	data: {},
+	onClick: null,
+	onDownload: null,
+	onOpen: null,
 };
 
 
-export default FileMessage;
+export default FileMessage;

src/FileMessage/__tests__/__snapshots__/FileMessage.js.snap

@@ -3,6 +3,7 @@
 exports[`FileMessage component should render without issues 1`] = `
 <button
   className="rce-mbox-file"
+  onClick={[Function]}
 >
   <div
     className="rce-mbox-file--icon"
@@ -12,9 +13,7 @@ exports[`FileMessage component should render without issues 1`] = `
     />
     <div
       className="rce-mbox-file--size"
-    >
-      1024mB
-    </div>
+    />
   </div>
   <div
     className="rce-mbox-file--text"

src/MessageBox/MessageBox.js

@@ -28,12 +28,16 @@ export class MessageBox extends Component {
 					{
 						this.props.type === 'photo' &&
 						<PhotoMessage
+							onOpen={this.props.onOpen}
+							onDownload={this.props.onDownload}
 							data={this.props.data}
 							text={this.props.text}/>
 					}
 					{
 						this.props.type === 'file' &&
 						<FileMessage
+							onOpen={this.props.onOpen}
+							onDownload={this.props.onDownload}
 							data={this.props.data}
 							text={this.props.text}/>
 					}
@@ -74,6 +78,8 @@ MessageBox.defaultProps = {
 	date: new Date(),
 	data: {},
 	onClick: null,
+	onOpen: null,
+	onDownload: null,
 };
 
 

src/MessageList/MessageList.js

@@ -37,6 +37,16 @@ export class MessageList extends Component {
 		return e.scrollHeight - e.scrollTop - e.offsetHeight;
 	}
 
+	onOpen(item, i) {
+		if (this.props.onOpen instanceof Function)
+			this.props.onOpen(item, i);
+	}
+
+	onDownload(item, i) {
+		if (this.props.onDownload instanceof Function)
+			this.props.onDownload(item, i);
+	}
+
 	onClick(item, i) {
 		if (this.props.onClick instanceof Function)
 			this.props.onClick(item, i);
@@ -52,6 +62,8 @@ export class MessageList extends Component {
 						<MessageBox
 							key={i}
 							{...x}
+							onOpen={() => this.onOpen(x, i)}
+							onDownload={() => this.onDownload(x, i)}
 							onClick={() => this.onClick(x, i)} />
 					))
 				}
@@ -62,6 +74,8 @@ export class MessageList extends Component {
 
 MessageList.defaultProps = {
 	onClick: null,
+	onOpen: null,
+	onDownload: null,
 	dataSource: [],
 	lockable: false,
 	toBottomHeight: 300,

src/PhotoMessage/PhotoMessage.css

@@ -61,4 +61,4 @@
 
 .rce-mbox-photo--download:active {
 	opacity: .3;
-}
+}

src/PhotoMessage/PhotoMessage.js

@@ -29,19 +29,21 @@ export class PhotoMessage extends Component {
 		return (
 			<div className="rce-mbox-photo">
 				<div className="rce-mbox-photo--img">
-					<img src={this.props.data.uri} alt={this.props.data.alt}/>
+					<img src={this.props.data.uri} alt={this.props.data.alt} onClick={this.props.onOpen}/>
 					{
 						this.props.data.status &&
 						!this.props.data.status.download &&
 						<div className="rce-mbox-photo--img__block">
 							{
 								!this.props.data.status.click &&
 								<button
+									onClick={this.props.onDownload}
 									className="rce-mbox-photo--img__block-item rce-mbox-photo--download">
 									<FaCloudDownload/>
 								</button>
 							}
 							{
+								typeof this.props.data.status.loading === 'number' &&
 								this.props.data.status.loading !== 0 &&
 								<Circle
 									progress={this.props.data.status.loading}
@@ -67,7 +69,9 @@ export class PhotoMessage extends Component {
 PhotoMessage.defaultProps = {
 	text: '',
 	data: {},
+	onDownload: null,
+	onOpen: null,
 };
 
 
-export default PhotoMessage;
+export default PhotoMessage;

src/PhotoMessage/__tests__/__snapshots__/PhotoMessage.js.snap

@@ -7,7 +7,9 @@ exports[`PhotoMessage component should render without issues 1`] = `
   <div
     className="rce-mbox-photo--img"
   >
-    <img />
+    <img
+      onClick={null}
+    />
   </div>
   <div
     className="rce-mbox-text"