Merge pull request #57 from Detaysoft/next

Next 0.9.0

Author: abdurrahmanekr

example/App.js

@@ -100,9 +100,10 @@ export class App extends Component {
                     data: {
                         uri: `data:image/png;base64,${this.photo(150)}`,
                         status: {
-                            click: false,
-                            loading: 0,
+                            click: true,
+                            loading: .5,
                         },
+                        size: "100MB",
                         width: 300,
                         height: 300,
                         latitude: '37.773972',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
@@ -21,8 +21,8 @@
     "isomorphic-style-loader": "^2.0.0",
     "lorem-ipsum": "^1.0.4",
     "nwb": "^0.18.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-scripts": "^1.0.10",
     "react-test-renderer": "^15.6.1",
     "webpack-node-externals": "^1.6.0"
@@ -60,7 +60,7 @@
     "classnames": "^2.2.5",
     "moment": "^2.18.1",
     "react-icons": "^2.2.5",
-    "react-progressbar.js": "^0.2.0",
+    "react-progress-bar.js": "^0.2.3",
     "react-spinkit": "^3.0.0"
   }
 }

src/FileMessage/FileMessage.css

@@ -54,4 +54,6 @@
 
 .rce-mbox-file--loading {
     font-size: 15px;
+    width: 40px;
+    height: 40px;
 }

src/FileMessage/FileMessage.js

@@ -4,7 +4,7 @@ import './FileMessage.css';
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
 import FaFile from 'react-icons/lib/fa/file';
 
-const ProgressBar = require('react-progressbar.js');
+const ProgressBar = require('react-progress-bar.js');
 const Circle = ProgressBar.Circle;
 
 export class FileMessage extends Component {
@@ -66,10 +66,6 @@ export class FileMessage extends Component {
                                 progress={this.props.data.status.loading}
                                 options={progressOptions}
                                 initialAnimate={true}
-                                containerStyle={{
-                                    width: '40px',
-                                    height: '40px',
-                                }}
                                 containerClassName={'rce-mbox-file--loading'} />
                         }
                     </div>

src/MessageBox/MessageBox.js

@@ -66,7 +66,7 @@ export class MessageBox extends Component {
 
                                 {
                                     (this.props.title || this.props.avatar) &&
-                                    <p
+                                    <div
                                         style={this.props.titleColor && { color: this.props.titleColor }}
                                         onClick={this.props.onTitleClick}
                                         className={classNames('rce-mbox-title', {
@@ -81,7 +81,7 @@ export class MessageBox extends Component {
                                             this.props.title &&
                                             <span>{this.props.title}</span>
                                         }
-                                    </p>
+                                    </div>
                                 }
 
                                 {

src/PhotoMessage/PhotoMessage.css

@@ -39,6 +39,8 @@
 .rce-mbox-photo--img__block-item {
     margin: auto;
     cursor: pointer;
+    width: 100px;
+    height: 100px;
 }
 
 .rce-mbox-photo--download {

src/PhotoMessage/PhotoMessage.js

@@ -4,7 +4,7 @@ import './PhotoMessage.css';
 
 import FaCloudDownload from 'react-icons/lib/fa/cloud-download';
 
-const ProgressBar = require('react-progressbar.js');
+const ProgressBar = require('react-progress-bar.js');
 const Circle = ProgressBar.Circle;
 
 export class PhotoMessage extends Component {
@@ -54,10 +54,6 @@ export class PhotoMessage extends Component {
                                     progress={this.props.data.status.loading}
                                     options={progressOptions}
                                     initialAnimate={true}
-                                    containerStyle={{
-                                        width: '100px',
-                                        height: '100px',
-                                    }}
                                     containerClassName={'rce-mbox-photo--img__block-item'} />
                             }
                         </div>

src/SpotifyMessage/SpotifyMessage.js

@@ -30,7 +30,7 @@ export class SpotifyMessage extends Component {
                     width={this.props.width}
                     height={this.props.height}
                     frameBorder="0"
-                    allowTransparency="true"></iframe>
+                    allowtransparency="true"></iframe>
             </div>
         );
     }