progressbar containerStyle change

Message avatar p element converted to div

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

@@ -60,7 +60,7 @@
     "classnames": "^2.2.5",
     "moment": "^2.18.1",
     "react-icons": "^2.2.5",
-    "react-progress-bar.js": "^0.2.0-dev",
+    "react-progress-bar.js": "^0.2.2",
     "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

@@ -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

@@ -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>
         );
     }