v0.2.5

benhowell · Sep 26, 2016 · a8ea1d2 · a8ea1d2
1 parent 88da04c
commit a8ea1d2
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # react-grid-gallery
 
+### v0.2.5 / 2016-09-26
+
+* Added image tagging functionality. Optional `tags` prop takes an array of objects containing tag attributes. `value` prop is the text shown on the tag and `title` prop is the text shown when hovering over the tag. e.g. `tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}]`
+
 ### 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).

diff --git a/lib/Gallery.js b/lib/Gallery.js
@@ -271,6 +271,10 @@ Gallery.propTypes = {
         thumbnail: _react.PropTypes.string.isRequired,
         srcset: _react.PropTypes.array,
         caption: _react.PropTypes.string,
+        tags: _react.PropTypes.arrayOf(_react.PropTypes.shape({
+            value: _react.PropTypes.string.isRequired,
+            title: _react.PropTypes.string.isRequired
+        })),
         thumbnailWidth: _react.PropTypes.number.isRequired,
         thumbnailHeight: _react.PropTypes.number.isRequired,
         isSelected: _react.PropTypes.bool

diff --git a/lib/Image.js b/lib/Image.js
@@ -46,7 +46,7 @@ var Image = function (_Component) {
                 overflow: "hidden"
             };
             return {
-                width: "" + this.props.item.vwidth + "px",
+                width: this.props.item.vwidth,
                 height: this.props.height,
                 overflow: "hidden"
             };
@@ -105,6 +105,23 @@ var Image = function (_Component) {
         value: function render() {
             var _this2 = this;
 
+            var tags = typeof this.props.item.tags === 'undefined' ? _react2.default.createElement('noscript', null) : this.props.item.tags.map(function (tag) {
+                return _react2.default.createElement(
+                    'div',
+                    { title: tag.title,
+                        key: "tag-" + tag.value,
+                        style: { display: "inline-block",
+                            cursor: 'pointer',
+                            pointerEvents: 'visible',
+                            margin: "2px" } },
+                    _react2.default.createElement(
+                        'span',
+                        { style: tagStyle },
+                        tag.value
+                    )
+                );
+            });
+
             return _react2.default.createElement(
                 'div',
                 { className: 'tile',
@@ -116,7 +133,7 @@ var Image = function (_Component) {
                         return _this2.setState({ hover: false });
                     },
                     style: {
-                        margin: "" + this.props.margin + "px",
+                        margin: this.props.margin,
                         WebkitUserSelect: "none",
                         position: "relative",
                         float: "left",
@@ -134,6 +151,21 @@ var Image = function (_Component) {
                             width: "100%" } },
                     this.renderCheckButton()
                 ),
+                _react2.default.createElement(
+                    'div',
+                    { className: 'tile-bottom-bar',
+                        key: "tile-bottom-bar-" + this.props.index,
+                        style: {
+                            padding: "2px",
+                            pointerEvents: "none",
+                            position: "absolute",
+                            minHeight: "0",
+                            maxHeight: "160px",
+                            width: "100%",
+                            bottom: "0"
+                        } },
+                    tags
+                ),
                 _react2.default.createElement('div', { className: 'tile-overlay',
                     key: "tile-overlay-" + this.props.index,
                     style: {
@@ -163,15 +195,35 @@ var Image = function (_Component) {
     return Image;
 }(_react.Component);
 
-Image.propTypes = { item: _react.PropTypes.object,
+;
+
+Image.propTypes = {
+    item: _react.PropTypes.object,
     index: _react.PropTypes.number,
     margin: _react.PropTypes.number,
     height: _react.PropTypes.number,
     isSelectable: _react.PropTypes.bool,
     onClick: _react.PropTypes.func,
-    onImageSelected: _react.PropTypes.func };
-
-Image.defaultProps = { isSelectable: true,
-    hover: false };
+    onImageSelected: _react.PropTypes.func
+};
+
+Image.defaultProps = {
+    isSelectable: true,
+    hover: false
+};
+
+var tagStyle = {
+    display: "inline",
+    padding: ".2em .6em .3em",
+    fontSize: "75%",
+    fontWeight: "600",
+    lineHeight: "1",
+    color: "yellow",
+    background: "rgba(0,0,0,0.65)",
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    verticalAlign: "baseline",
+    borderRadius: ".25em"
+};
 
 exports.default = Image;
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.2.4",
+  "version": "0.2.5",
   "description": "Justified gallery component for React.",
   "main": "lib/Gallery.js",
   "dependencies": {