Merge pull request #101 from vadimuz/nano

Nano image

Author: benhowell

README.md

@@ -66,6 +66,7 @@ src                     | string        | undefined     | Required. A string ref
 thumbnail               | string        | undefined     | Required. A string referring to any valid image resource (file, url, etc).
 thumbnailWidth          | number        | undefined     | Required. Width of the thumbnail image.
 thumbnailHeight         | number        | undefined     | Required. Height of the thumbnail image.
+nano                    | string:base64 | undefined     | Optional. Thumbnail Base64 image will be injected to background under the main image, that is waiting for a loading. This is super helpful and fancy if you receive base64 images 4x4 pixels from the server-side response.
 alt                     | string        | ""            | Optional. Image alt attribute.
 tags                    | array         | undefined     | Optional. An array of objects containing tag attributes (value and title). e.g. `{value: "foo", title: "bar"}`
 isSelected              | bool          | undefined     | Optional. The selected state of the image.

src/Gallery.js

@@ -313,6 +313,7 @@ Gallery.propTypes = {
     images: PropTypes.arrayOf(
         PropTypes.shape({
             src: PropTypes.string.isRequired,
+            nano: PropTypes.string,
             alt: PropTypes.string,
             thumbnail: PropTypes.string.isRequired,
             srcset: PropTypes.array,

src/Image.js

@@ -32,18 +32,26 @@ class Image extends Component {
     tileViewportStyle () {
         if (this.props.tileViewportStyle)
             return this.props.tileViewportStyle.call(this);
+        var nanoBase64Backgorund = {}
+        if(this.props.item.nano) {
+            nanoBase64Backgorund = { 
+                background: `url(${this.props.item.nano})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center center'
+            }
+        }
         if (this.props.item.isSelected)
-            return {
+            return Object.assign({
                 width: this.props.item.vwidth -32,
                 height: this.props.height -32,
                 margin: 16,
-                overflow: "hidden"
-            };
-        return {
+                overflow: "hidden",
+            }, nanoBase64Backgorund);
+        return Object.assign({
             width: this.props.item.vwidth,
             height: this.props.height,
-            overflow: "hidden"
-        };
+            overflow: "hidden",
+        }, nanoBase64Backgorund);
     }
 
     thumbnailStyle () {