Merge pull request #77 from Detaysoft/error-file-theme

File/Photo Message error feature added.

Author: abdurrahmanekr

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.0.5",
+  "version": "10.1.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/FileMessage/FileMessage.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import './FileMessage.css';
 
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
+import FaError from 'react-icons/lib/fa/exclamation-triangle';
 import FaFile from 'react-icons/lib/fa/file';
 
 const ProgressBar = require('react-progress-bar.js');
@@ -37,6 +38,8 @@ export class FileMessage extends Component {
             }
         };
 
+        const error = this.props.data.status && this.props.data.status.error === true;
+
         return (
             <div className='rce-mbox-file'>
                 <button onClick={this.onClick.bind(this)}>
@@ -52,13 +55,20 @@ export class FileMessage extends Component {
                     </div>
                     <div className="rce-mbox-file--buttons">
                         {
+                            error &&
+                            <FaError
+                                color='#ff3d3d'/>
+                        }
+                        {
+                            !error &&
                             this.props.data.status &&
                             !this.props.data.status.download &&
                             !this.props.data.status.click &&
                             <FaCloudDownload
                                 color='#aaa'/>
                         }
                         {
+                            !error &&
                             this.props.data.status &&
                             typeof this.props.data.status.loading === 'number' &&
                             this.props.data.status.loading !== 0 &&

src/PhotoMessage/PhotoMessage.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import './PhotoMessage.css';
 
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
+import FaError from 'react-icons/lib/fa/exclamation-triangle';
 
 const ProgressBar = require('react-progress-bar.js');
 const Circle = ProgressBar.Circle;
@@ -26,6 +27,8 @@ export class PhotoMessage extends Component {
             }
         };
 
+        const error = this.props.data.status && this.props.data.status.error === true;
+
         return (
             <div className="rce-mbox-photo">
                 <div
@@ -39,7 +42,18 @@ export class PhotoMessage extends Component {
                         alt={this.props.data.alt}
                         onClick={this.props.onOpen}
                         onLoad={this.props.onLoad}/>
+
+                    {
+                        error &&
+                        <div className="rce-mbox-photo--img__block">
+                            <button
+                                className="rce-mbox-photo--img__block-item rce-mbox-photo--download">
+                                <FaError/>
+                            </button>
+                        </div>
+                    }
                     {
+                        !error &
                         this.props.data.status &&
                         !this.props.data.status.download &&
                         <div className="rce-mbox-photo--img__block">