v0.1.12

ben · ben · commit d1d07209f830 · 2016-08-22T12:26:03.000+10:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # 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
 
 * Fixed react-dom typo
diff --git a/lib/CheckButton.js b/lib/CheckButton.js
@@ -1,12 +1,12 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
@@ -36,19 +36,19 @@ var CheckButton = function (_Component) {
     }
 
     _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() {
             if (this.props.isSelected || this.props.isSelectable && this.props.parentHover) return 'visible';
             return 'hidden';
         }
     }, {
-        key: "render",
+        key: 'render',
         value: function render() {
             var _this2 = this;
 
@@ -57,9 +57,9 @@ var CheckButton = function (_Component) {
             };
 
             return _react2.default.createElement(
-                "div",
+                'div',
                 {
-                    title: "Select",
+                    title: 'Select',
                     style: {
                         visibility: this.visibility(),
                         background: 'none',
@@ -80,43 +80,43 @@ var CheckButton = function (_Component) {
                         return _this2.setState({ hover: false });
                     } },
                 _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' })
                 )
             );
         }
@@ -126,15 +126,19 @@ var CheckButton = function (_Component) {
 }(_react.Component);
 
 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 };
 
 CheckButton.defaultProps = { isSelectable: true,
     isSelected: false,
     parentHover: false,
     hover: false };
 
-exports.default = CheckButton;
+exports.default = CheckButton;
+//module.exports = CheckButton;
diff --git a/lib/Gallery.js b/lib/Gallery.js
@@ -6,10 +6,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _reactImages = require('react-images');
 
 var _reactImages2 = _interopRequireDefault(_reactImages);
@@ -25,6 +21,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 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');
 
@@ -69,15 +67,20 @@ var Gallery = function (_Component) {
     }, {
         key: 'componentDidUpdate',
         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();
             }
         }
     }, {
         key: 'handleResize',
         value: function handleResize() {
             this.setState({
-                containerWidth: Math.floor(_reactDom2.default.findDOMNode(this).clientWidth)
+                containerWidth: Math.floor(this.refs.gallery.clientWidth)
+                //Math.floor(ReactDOM.findDOMNode(this).clientWidth)
             });
         }
     }, {
@@ -134,7 +137,8 @@ var Gallery = function (_Component) {
         key: 'getOnClickThumbnailFunc',
         value: function getOnClickThumbnailFunc() {
             if (!this.props.onClickThumbnail && this.props.enableLightbox) return this.openLightbox;
-            return this.props.onClickThumbnail;
+            if (this.props.onClickThumbnail) return this.props.onClickThumbnail;
+            return null;
         }
     }, {
         key: 'calculateCutOff',
@@ -232,7 +236,7 @@ var Gallery = function (_Component) {
         value: function render() {
             return _react2.default.createElement(
                 'div',
-                { id: 'Gallery' },
+                { id: 'Gallery', ref: 'gallery' },
                 this.renderGallery(),
                 _react2.default.createElement(_reactImages2.default, {
                     images: this.props.images,
diff --git a/lib/Image.js b/lib/Image.js
@@ -92,6 +92,9 @@ var Image = function (_Component) {
         value: function renderCheckButton() {
             return _react2.default.createElement(_CheckButton2.default, { key: 'Select',
                 index: this.props.index,
+                color: "rgba(255, 255, 255, 0.7)",
+                selectedColor: "#4285f4",
+                hoverColor: "rgba(255, 255, 255, 1)",
                 isSelected: this.props.isSelected,
                 isSelectable: this.props.isSelectable,
                 onClick: this.props.isSelectable ? this.props.onToggleSelected : null,
@@ -145,9 +148,9 @@ var Image = function (_Component) {
                     { className: 'tile-viewport',
                         style: this.tileViewportStyle(),
                         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', {
                         key: "img-" + this.props.index,
                         src: this.props.item.thumbnail, title: this.props.item.caption,
diff --git a/lib/react-grid-gallery.bundle.min.js b/lib/react-grid-gallery.bundle.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-grid-gallery",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
   "dependencies": {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-grid-gallery",`
`3`		`- "version": "0.1.11",`
	`3`	`+ "version": "0.1.12",`
`4`	`4`	`"description": "Justified gallery component for React.",`
`5`	`5`	`"main": "lib/Gallery.js",`
`6`	`6`	`"dependencies": {`