material-ui-image - npm Package Compare versions

Comparing version 3.0.0-pre.3 to 3.0.0-pre.4

lib/components/Image/Image.js

@@ -61,3 +61,3 @@ 'use strict';
 /**
- * Images are ugly until they're loaded. Materialize it with material image! It will show a random material color as background and a loading animation until it's fully loaded.
+ * Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
  * @see [Image loading patterns](https://material.io/guidelines/patterns/loading-images.html)
@@ -81,2 +81,12 @@ */
   (0, _createClass3.default)(Image, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.src !== nextProps.src) {
+        this.setState({
+          imageError: false,
+          imageLoaded: false
+        });
+      }
+    }
+  }, {
     key: 'getStyles',
@@ -83,0 +93,0 @@ value: function getStyles() {

package.json

 {
   "name": "material-ui-image",
-  "version": "3.0.0-pre.3",
+  "version": "3.0.0-pre.4",
   "description": "Material style image with loading animation",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/components/Image/Image.js

@@ -9,3 +9,3 @@ import React, { Component } from 'react'
 /**
- * Images are ugly until they're loaded. Materialize it with material image! It will show a random material color as background and a loading animation until it's fully loaded.
+ * Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
  * @see [Image loading patterns](https://material.io/guidelines/patterns/loading-images.html)
@@ -22,2 +22,11 @@ */
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.src !== nextProps.src) {
+      this.setState({
+        imageError: false,
+        imageLoaded: false
+      })
+    }
+  }
+
   getStyles () {
@@ -24,0 +33,0 @@ const {

src/components/Image/Image.md

 Normal:
 ```
-    <Image
-      src="http://idolosol.com/images/terrain-1.jpg"
-      onClick={() => console.log('onTouchTap')}
-      aspectRatio={(16/9)}
-    />
+const { Button } = require('material-ui');
+initialState = {
+  foo: false
+};
+
+<div>
+  <Image
+    src={state.foo ? "http://lorempixel.com/1600/900/people/" : "http://lorempixel.com/1600/900/nature/"}
+    onClick={() => console.log('onClick')}
+    aspectRatio={(16/9)}
+  />
+  <Button raised onClick={() => setState({foo: !state.foo})}>
+    Reload
+  </Button>
+</div>
 ```
+
+Loading:
+```
+<Image
+  onClick={() => console.log('onClick')}
+  aspectRatio={(16/9)}
+/>
+```
+
+Error:
+```
+<Image
+  src="http://lorempixels.com/1600/900/nature/"
+  onClick={() => console.log('onClick')}
+  aspectRatio={(16/9)}
+/>
+```

No alert changes

Improved metrics

Total package byte prevSize

1064783

increased by0.08%

Lines of code

487

increased by3.84%

No dependency changes