react-grid-gallery - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

CHANGELOG.md

 # react-grid-gallery
 
+### v0.2.4 / 2016-09-17
+
+* `onImageSelected` prop function now takes two optional args, index (index of selected image in images array) and image (the selected image object).
+
 ### v0.2.3 / 2016-09-16
@@ -4,0 +8,0 @@

examples/app.js

@@ -12,7 +12,6 @@ import React from 'react';
             images: this.props.images,
-            selectedImages: [],
             selectAllChecked: false
         };
 
-        this.setSelectedImages = this.setSelectedImages.bind(this);
+        this.onImageSelected = this.onImageSelected.bind(this);
         this.getSelectedImages = this.getSelectedImages.bind(this);
@@ -22,10 +21,26 @@ this.onClickSelectAll = this.onClickSelectAll.bind(this);
 
-    setSelectedImages (selectedImages) {
+    allImagesSelected (images){
+        var f = images.filter(
+            function (img) {
+                return img.isSelected == true;
+            }
+        );
+        return f.length == images.length;
+    }
+
+    onImageSelected (index, image) {
+        var images = this.state.images.slice();
+        var img = images[index];
+        if(img.hasOwnProperty("isSelected"))
+            img.isSelected = !img.isSelected;
+        else
+            img.isSelected = true;
+
         this.setState({
-            selectedImages: selectedImages
+            images: images
         });
 
-        if(selectedImages.length < this.state.images.length){
+        if(this.allImagesSelected(images)){
             this.setState({
-                selectAllChecked: false
+                selectAllChecked: true
             });
@@ -35,3 +50,3 @@ }
             this.setState({
-                selectAllChecked: true
+                selectAllChecked: false
             });
@@ -42,3 +57,7 @@ }
     getSelectedImages () {
-        return this.state.selectedImages.toString();
+        var selected = [];
+        for(var i = 0; i < this.state.images.length; i++)
+            if(this.state.images[i].isSelected == true)
+                selected.push(i);
+        return selected;
     }
@@ -52,12 +71,15 @@
 
+        var images = this.state.images.slice();
         if(selectAllChecked){
-            this.setState({
-                selectedImages: Array.from(Array(this.state.images.length).keys())
-            });
+            for(var i = 0; i < this.state.images.length; i++)
+                images[i].isSelected = true;
         }
         else {
-            this.setState({
-                selectedImages: []
-            });
+            for(var i = 0; i < this.state.images.length; i++)
+                images[i].isSelected = false;
+
         }
+        this.setState({
+            images: images
+        });
     }
@@ -86,3 +108,3 @@
                     color: "#666"
-                }}>Selected images: {this.getSelectedImages()}</div>
+                }}>Selected images: {this.getSelectedImages().toString()}</div>
                 <div style={{
@@ -96,4 +118,3 @@ display: "block",
             images={this.state.images}
-            selectedImages={this.state.selectedImages}
-            onSelectedImagesChange={this.setSelectedImages}/>
+            onImageSelected={this.onImageSelected}/>
                 </div>
@@ -113,3 +134,4 @@ </div>
             thumbnailWidth: React.PropTypes.number.isRequired,
-            thumbnailHeight: React.PropTypes.number.isRequired
+            thumbnailHeight: React.PropTypes.number.isRequired,
+            isSelected: React.PropTypes.bool
         })
@@ -116,0 +138,0 @@ ).isRequired

examples/demo1.js

@@ -11,13 +11,19 @@ import React from 'react';
         this.state = {
-            images: this.props.images,
-            selectedImages: [3,7,5]
+            images: this.props.images
         };
 
-        this.setSelectedImages = this.setSelectedImages.bind(this);
+        this.onImageSelected = this.onImageSelected.bind(this);
 
     }
 
-    setSelectedImages (selectedImages) {
+    onImageSelected (index, image) {
+        var images = this.state.images.slice();
+        var img = images[index];
+        if(img.hasOwnProperty("isSelected"))
+            img.isSelected = !img.isSelected;
+        else
+            img.isSelected = true;
+
         this.setState({
-            selectedImages: selectedImages
+            images: images
         });
@@ -36,4 +42,3 @@ }
             images={this.state.images}
-            selectedImages={this.state.selectedImages}
-            onSelectedImagesChange={this.setSelectedImages}/>
+            onImageSelected={this.onImageSelected}/>
                 </div>
@@ -52,3 +57,4 @@ );
             thumbnailWidth: React.PropTypes.number.isRequired,
-            thumbnailHeight: React.PropTypes.number.isRequired
+            thumbnailHeight: React.PropTypes.number.isRequired,
+            isSelected: React.PropTypes.bool
         })
@@ -86,2 +92,3 @@ ).isRequired
             thumbnailHeight: 213,
+            isSelected: true,
             caption: "201H (gratisography.com)"
@@ -101,2 +108,3 @@ },
             thumbnailHeight: 113,
+            isSelected: true,
             caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
@@ -116,2 +124,3 @@ },
             thumbnailHeight: 213,
+            isSelected: true,
             caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
@@ -118,0 +127,0 @@ }

examples/demo2.js

@@ -11,4 +11,3 @@ import React from 'react';
         this.state = {
-            images: this.props.images,
-            selected: [2,0,6]
+            images: this.props.images
         };
@@ -27,4 +26,3 @@ }
             images={this.state.images}
-            enableImageSelection={false}
-            selectedImages={this.state.selected}/>
+            enableImageSelection={false}/>
                 </div>
@@ -43,3 +41,4 @@ );
             thumbnailWidth: React.PropTypes.number.isRequired,
-            thumbnailHeight: React.PropTypes.number.isRequired
+            thumbnailHeight: React.PropTypes.number.isRequired,
+            isSelected: React.PropTypes.bool
         })
@@ -56,2 +55,3 @@ ).isRequired
             thumbnailHeight: 320,
+            isSelected: true,
             caption: "8H (gratisography.com)"
@@ -71,2 +71,3 @@ },
             thumbnailHeight: 148,
+            isSelected: true,
             caption: "315H (gratisography.com)"
@@ -100,2 +101,3 @@ },
             thumbnailHeight: 320,
+            isSelected: true,
             caption: "Wood Glass (Tom Eversley - isorepublic.com)"
@@ -102,0 +104,0 @@ },

lib/Gallery.js

@@ -125,3 +125,3 @@ 'use strict';
             event.preventDefault();
-            if (this.props.onImageSelected) this.props.onImageSelected(this.state.images[index]);
+            if (this.props.onImageSelected) this.props.onImageSelected(index, this.state.images[index]);
         }
@@ -128,0 +128,0 @@ }, {

package.json

 {
   "name": "react-grid-gallery",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Justified gallery component for React.",
@@ -5,0 +5,0 @@ "main": "lib/Gallery.js",

README.md

@@ -78,3 +78,3 @@ # React Grid Gallery
 enableImageSelection    | bool          | true          | Optional. Allow images to be selectable. Setting this option to `false` whilst supplying images with `isSelected: true` will result in those images being permanently selected.
-onImageSelected         | func          | undefined     | Optional. Function to execute when an image is selected. Optional arg: image (the selected image). This function is only executable when `enableImageSelection: true`. 
+onImageSelected         | func          | undefined     | Optional. Function to execute when an image is selected. Optional args: index (index of selected image in images array), image (the selected image). This function is only executable when `enableImageSelection: true`. 
 rowHeight               | number        | 180           | Optional. The height of each row in the gallery.
@@ -81,0 +81,0 @@ margin                  | number        | 2             | Optional. The margin around each image in the gallery.

src/Gallery.js

@@ -93,3 +93,3 @@ import React, { Component, PropTypes } from 'react';
         if(this.props.onImageSelected)
-            this.props.onImageSelected(this.state.images[index]);
+            this.props.onImageSelected(index, this.state.images[index]);
     }
@@ -96,0 +96,0 @@

No alert changes

Improved metrics

Lines of code

3274

increased by0.89%

Worsened metrics

Total package byte prevSize

433143

decreased by-0.39%

No dependency changes