react-grid-gallery - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

CHANGELOG.md

 # react-grid-gallery
 
+### v0.1.12 / 2016-08-22
+
+* Replaced ReactDOM.findDOMNode(this) with ref, removed react-dom deps
+* Added conditional to ensure image onClick not fired when no function specified
+* Moved CheckButton styling (color, hoverColor, selectedColor) to props
+
+
 ### v0.1.11 / 2016-08-21
@@ -4,0 +11,0 @@

gulpfile.js

@@ -76,3 +76,4 @@ 'use strict';
                         './examples/demo1.js',
-                        './examples/demo2.js'], {
+                        './examples/demo2.js',
+                        './examples/demo3.js'], {
         extensions: ['.js', '.jsx']
@@ -79,0 +80,0 @@ })

lib/CheckButton.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -9,3 +9,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
@@ -40,9 +40,9 @@ var _react2 = _interopRequireDefault(_react);
     _createClass(CheckButton, [{
-        key: "fill",
+        key: 'fill',
         value: function fill() {
-            if (this.props.isSelected) return "#4285f4";else if (this.state.hover) return "rgba(255, 255, 255, 1)";
-            return "rgba(255, 255, 255, 0.7)";
+            if (this.props.isSelected) return this.props.selectedColor;else if (this.state.hover) return this.props.hoverColor;
+            return this.props.color;
         }
     }, {
-        key: "visibility",
+        key: 'visibility',
         value: function visibility() {
@@ -53,3 +53,3 @@ if (this.props.isSelected || this.props.isSelectable && this.props.parentHover) return 'visible';
     }, {
-        key: "render",
+        key: 'render',
         value: function render() {
@@ -63,5 +63,5 @@ var _this2 = this;
             return _react2.default.createElement(
-                "div",
+                'div',
                 {
-                    title: "Select",
+                    title: 'Select',
                     style: {
@@ -87,39 +87,39 @@ visibility: this.visibility(),
                 _react2.default.createElement(
-                    "svg",
+                    'svg',
                     {
                         fill: this.fill(),
-                        height: "24", viewBox: "0 0 24 24",
-                        width: "24",
-                        xmlns: "http://www.w3.org/2000/svg" },
+                        height: '24', viewBox: '0 0 24 24',
+                        width: '24',
+                        xmlns: 'http://www.w3.org/2000/svg' },
                     _react2.default.createElement(
-                        "radialGradient",
+                        'radialGradient',
                         {
-                            id: "shadow",
-                            cx: "38",
-                            cy: "95.488",
-                            r: "10.488",
-                            gradientTransform: "matrix(1 0 0 -1 -26 109)",
-                            gradientUnits: "userSpaceOnUse" },
-                        _react2.default.createElement("stop", {
-                            offset: ".832",
-                            stopColor: "#010101" }),
-                        _react2.default.createElement("stop", {
-                            offset: "1",
-                            stopColor: "#010101",
-                            stopOpacity: "0" })
+                            id: 'shadow',
+                            cx: '38',
+                            cy: '95.488',
+                            r: '10.488',
+                            gradientTransform: 'matrix(1 0 0 -1 -26 109)',
+                            gradientUnits: 'userSpaceOnUse' },
+                        _react2.default.createElement('stop', {
+                            offset: '.832',
+                            stopColor: '#010101' }),
+                        _react2.default.createElement('stop', {
+                            offset: '1',
+                            stopColor: '#010101',
+                            stopOpacity: '0' })
                     ),
-                    _react2.default.createElement("circle", {
+                    _react2.default.createElement('circle', {
                         style: circleStyle,
-                        opacity: ".26",
-                        fill: "url(#shadow)",
-                        cx: "12", cy: "13.512",
-                        r: "10.488" }),
-                    _react2.default.createElement("circle", {
+                        opacity: '.26',
+                        fill: 'url(#shadow)',
+                        cx: '12', cy: '13.512',
+                        r: '10.488' }),
+                    _react2.default.createElement('circle', {
                         style: circleStyle,
-                        fill: "#FFF",
-                        cx: "12",
-                        cy: "12.2",
-                        r: "8.292" }),
-                    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                    _react2.default.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
+                        fill: '#FFF',
+                        cx: '12',
+                        cy: '12.2',
+                        r: '8.292' }),
+                    _react2.default.createElement('path', { d: 'M0 0h24v24H0z', fill: 'none' }),
+                    _react2.default.createElement('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' })
                 )
@@ -134,6 +134,9 @@ );
 CheckButton.propTypes = { index: _react.PropTypes.number,
+    color: _react.PropTypes.string,
     isSelectable: _react.PropTypes.bool,
     isSelected: _react.PropTypes.bool,
+    selectedColor: _react.PropTypes.string,
     parentHover: _react.PropTypes.bool,
     hover: _react.PropTypes.bool,
+    hoverColor: _react.PropTypes.string,
     onClick: _react.PropTypes.func };
@@ -146,2 +149,3 @@
 
-exports.default = CheckButton;
+exports.default = CheckButton;
+//module.exports = CheckButton;

lib/Gallery.js

@@ -9,6 +9,2 @@ 'use strict';
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _reactImages = require('react-images');
@@ -29,3 +25,5 @@
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+//import ReactDOM from 'react-dom';
 
+
 var update = require('react-addons-update');
@@ -74,3 +72,7 @@
         value: function componentDidUpdate() {
-            if (_reactDom2.default.findDOMNode(this).clientWidth !== this.state.containerWidth) {
+            //if (ReactDOM.findDOMNode(this).clientWidth
+            //    !== this.state.containerWidth){
+            //    this.handleResize();
+            //}
+            if (this.refs.gallery.clientWidth !== this.state.containerWidth) {
                 this.handleResize();
@@ -83,3 +85,4 @@ }
             this.setState({
-                containerWidth: Math.floor(_reactDom2.default.findDOMNode(this).clientWidth)
+                containerWidth: Math.floor(this.refs.gallery.clientWidth)
+                //Math.floor(ReactDOM.findDOMNode(this).clientWidth)
             });
@@ -141,3 +144,4 @@ }
             if (!this.props.onClickThumbnail && this.props.enableLightbox) return this.openLightbox;
-            return this.props.onClickThumbnail;
+            if (this.props.onClickThumbnail) return this.props.onClickThumbnail;
+            return null;
         }
@@ -240,3 +244,3 @@ }, {
                 'div',
-                { id: 'Gallery' },
+                { id: 'Gallery', ref: 'gallery' },
                 this.renderGallery(),
@@ -243,0 +247,0 @@ _react2.default.createElement(_reactImages2.default, {

lib/Image.js

@@ -95,2 +95,5 @@ 'use strict';
                 index: this.props.index,
+                color: "rgba(255, 255, 255, 0.7)",
+                selectedColor: "#4285f4",
+                hoverColor: "rgba(255, 255, 255, 1)",
                 isSelected: this.props.isSelected,
@@ -149,5 +152,5 @@ isSelectable: this.props.isSelectable,
                         key: "tile-viewport-" + this.props.index,
-                        onClick: function onClick(e) {
+                        onClick: this.props.onClick ? function (e) {
                             return _this2.props.onClick(_this2.props.index, e);
-                        } },
+                        } : null },
                     _react2.default.createElement('img', {
@@ -154,0 +157,0 @@ key: "img-" + this.props.index,

package.json

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

README.md

@@ -10,2 +10,7 @@ # React Grid Gallery
 https://benhowell.github.io/react-grid-gallery/
+* [Main Demo](https://benhowell.github.io/react-grid-gallery/#demo)
+* [Pre-selected Images](https://benhowell.github.io/react-grid-gallery/#pre-selected-images)
+* [Permanently Selected Images](https://benhowell.github.io/react-grid-gallery/#permanently-selected-images)
+* [Simple Gallery](https://benhowell.github.io/react-grid-gallery/#simple-gallery)
+* [Main Demo Code](https://benhowell.github.io/react-grid-gallery/#code-sample)
 
@@ -20,3 +25,3 @@ ## Installation
 
-```js
+```jsx
 import React from 'react';
@@ -99,3 +104,3 @@ import { render } from 'react-dom';
 
-```js
+```jsx
 images={[{
@@ -163,1 +168,4 @@ src: 'http://example.com/example/img1.jpg',
    * [Matthew Wiebe. - unsplash.com](unsplash.com)
+
+
+

src/CheckButton.js

@@ -17,6 +17,6 @@ import React, { Component, PropTypes } from 'react';
         if (this.props.isSelected)
-            return "#4285f4";
+            return this.props.selectedColor;
         else if (this.state.hover)
-            return "rgba(255, 255, 255, 1)";
-        return "rgba(255, 255, 255, 0.7)";
+            return this.props.hoverColor;
+        return this.props.color;
     }
@@ -101,6 +101,9 @@
 CheckButton.propTypes = {index: PropTypes.number,
+                         color: PropTypes.string,
                          isSelectable: PropTypes.bool,
                          isSelected: PropTypes.bool,
+                         selectedColor: PropTypes.string,
                          parentHover: PropTypes.bool,
                          hover: PropTypes.bool,
+                         hoverColor: PropTypes.string,
                          onClick: PropTypes.func};
@@ -114,1 +117,2 @@
 export default CheckButton;
+//module.exports = CheckButton;

src/Gallery.js

 import React, { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import Lightbox from 'react-images';
@@ -41,3 +40,3 @@ import Image from './Image.js';
     componentDidUpdate () {
-        if (ReactDOM.findDOMNode(this).clientWidth
+        if (this.refs.gallery.clientWidth
             !== this.state.containerWidth){
@@ -50,3 +49,4 @@ this.handleResize();
         this.setState({
-            containerWidth: Math.floor(ReactDOM.findDOMNode(this).clientWidth)
+            containerWidth:
+            Math.floor(this.refs.gallery.clientWidth)
         });
@@ -107,3 +107,5 @@ }
             return this.openLightbox;
-        return this.props.onClickThumbnail;
+        if(this.props.onClickThumbnail)
+            return this.props.onClickThumbnail;
+        return null;
     }
@@ -206,3 +208,3 @@
         return (
-                <div id="Gallery">
+                <div id="Gallery" ref="gallery">
                 {this.renderGallery()}
@@ -209,0 +211,0 @@ <Lightbox

src/Image.js

@@ -68,2 +68,5 @@ import React, { Component, PropTypes } from 'react';
             index={this.props.index}
+            color={"rgba(255, 255, 255, 0.7)"}
+            selectedColor={"#4285f4"}
+            hoverColor={"rgba(255, 255, 255, 1)"}
             isSelected={this.props.isSelected}
@@ -121,4 +124,4 @@ isSelectable={this.props.isSelectable}
             key={"tile-viewport-"+this.props.index}
-            onClick={(e) => this.props.onClick(this.props.index, e)}>
-
+            onClick={this.props.onClick ?
+                     (e) => this.props.onClick(this.props.index, e) : null}>
                 <img
@@ -125,0 +128,0 @@ key={"img-"+this.props.index}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

404781

increased by5.05%

Number of package files

21

increased by5%

Lines of code

3208

increased by3.95%

Number of lines in readme file

168

increased by5%

No dependency changes