react-grid-gallery - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

CHANGELOG.md

 # 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
@@ -4,0 +8,0 @@

examples/app.js

@@ -140,2 +140,3 @@ import React from 'react';
             thumbnailHeight: 174,
+            tags: [{value: "Nature", title: "Nature"}, {value: "Flora", title: "Flora"}],
             caption: "After Rain (Jeshu John - designerspics.com)"
@@ -176,2 +177,3 @@ },
             thumbnailHeight: 320,
+            tags: [{value: "Nature", title: "Nature"}],
             caption: "8H (gratisography.com)"
@@ -191,2 +193,3 @@ },
             thumbnailHeight: 148,
+            tags: [{value: "People", title: "People"}],
             caption: "315H (gratisography.com)"
@@ -213,2 +216,3 @@ },
             thumbnailHeight: 113,
+            tags: [{value: "People", title: "People"}],
             caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
@@ -256,2 +260,3 @@ },
             thumbnailHeight: 213,
+            tags: [{value: "Nature", title: "Nature"}, {value: "People", title: "People"}],
             caption: "Surfer Sunset (Tom Eversley - isorepublic.com)"
@@ -264,2 +269,3 @@ },
             thumbnailHeight: 213,
+            tags: [{value: "People", title: "People"}, {value: "Sport", title: "Sport"}],
             caption: "Man on BMX (Tom Eversley - isorepublic.com)"
@@ -286,2 +292,3 @@ },
             thumbnailHeight: 179,
+            tags: [{value: "Nature", title: "Nature"}, {value: "Fauna", title: "Fauna"}],
             caption: "Untitled (Jan Vasek - jeshoots.com)"
@@ -294,2 +301,3 @@ },
             thumbnailHeight: 215,
+            tags: [{value: "People", title: "People"}],
             caption: "Untitled (moveast.me)"
@@ -296,0 +304,0 @@ },

lib/Gallery.js

@@ -274,2 +274,6 @@ 'use strict';
         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,
@@ -276,0 +280,0 @@ thumbnailHeight: _react.PropTypes.number.isRequired,

lib/Image.js

@@ -49,3 +49,3 @@ 'use strict';
             return {
-                width: "" + this.props.item.vwidth + "px",
+                width: this.props.item.vwidth,
                 height: this.props.height,
@@ -109,2 +109,19 @@ overflow: "hidden"
 
+            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(
@@ -121,3 +138,3 @@ 'div',
                     style: {
-                        margin: "" + this.props.margin + "px",
+                        margin: this.props.margin,
                         WebkitUserSelect: "none",
@@ -140,2 +157,17 @@ position: "relative",
                 ),
+                _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',
@@ -170,3 +202,6 @@ key: "tile-overlay-" + this.props.index,
 
-Image.propTypes = { item: _react.PropTypes.object,
+;
+
+Image.propTypes = {
+    item: _react.PropTypes.object,
     index: _react.PropTypes.number,
@@ -177,7 +212,24 @@ margin: _react.PropTypes.number,
     onClick: _react.PropTypes.func,
-    onImageSelected: _react.PropTypes.func };
+    onImageSelected: _react.PropTypes.func
+};
 
-Image.defaultProps = { isSelectable: true,
-    hover: false };
+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;

package.json

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

README.md

@@ -5,3 +5,3 @@ # React Grid Gallery
 
-## Live Demo & Examples (NOTE: Demo and example apps are currently using v0.2.2)
+## Live Demo & Examples
 
@@ -34,3 +34,3 @@ https://benhowell.github.io/react-grid-gallery/
         thumbnailHeight: 174,
-        isSelected: false,
+        isSelected: true,
         caption: "After Rain (Jeshu John - designerspics.com)"
@@ -43,3 +43,3 @@ },
         thumbnailHeight: 212,
-        isSelected: false,
+        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
         caption: "Boats (Jeshu John - designerspics.com)"
@@ -69,2 +69,3 @@ },
 thumbnailHeight         | number        | undefined     | Required. Height of the thumbnail image.
+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.
@@ -71,0 +72,0 @@ caption                 | string        | undefined     | Optional. Image caption.

src/Gallery.js

@@ -231,2 +231,8 @@ import React, { Component, PropTypes } from 'react';
             caption: PropTypes.string,
+            tags: PropTypes.arrayOf(
+                PropTypes.shape({
+                    value: PropTypes.string.isRequired,
+                    title: PropTypes.string.isRequired
+                })
+            ),
             thumbnailWidth: PropTypes.number.isRequired,
@@ -233,0 +239,0 @@ thumbnailHeight: PropTypes.number.isRequired,

src/Image.js

@@ -22,3 +22,3 @@ import React, { Component, PropTypes } from 'react';
         return {
-            width: ""+this.props.item.vwidth+"px",
+            width: this.props.item.vwidth,
             height: this.props.height,
@@ -81,2 +81,14 @@ overflow: "hidden"
     render () {
+        var tags = (typeof this.props.item.tags === 'undefined') ? <noscript/> :
+                this.props.item.tags.map((tag) => {
+                    return <div title={tag.title}
+                    key={"tag-"+tag.value}
+                    style={{display: "inline-block",
+                            cursor: 'pointer',
+                            pointerEvents: 'visible',
+                            margin: "2px"}}>
+                        <span style={tagStyle}>{tag.value}</span>
+                        </div>;
+                });
+
         return (
@@ -88,3 +100,3 @@ <div className="tile"
             style={{
-                margin: ""+this.props.margin+"px",
+                margin: this.props.margin,
                 WebkitUserSelect: "none",
@@ -107,2 +119,16 @@ position: "relative",
 
+                <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}
+            </div>
+
                 <div className="tile-overlay"
@@ -126,3 +152,3 @@ key={"tile-overlay-"+this.props.index}
             }
-            key={"tile-viewport-"+this.props.index}
+                key={"tile-viewport-"+this.props.index}
             onClick={this.props.onClick ?
@@ -136,17 +162,35 @@ (e) => this.props.onClick(this.props.index, e) : null}>
                 </div>
-        )
+        );
     }
-}
+};
 
-Image.propTypes = {item: PropTypes.object,
-                   index: PropTypes.number,
-                   margin: PropTypes.number,
-                   height: PropTypes.number,
-                   isSelectable: PropTypes.bool,
-                   onClick: PropTypes.func,
-                   onImageSelected: PropTypes.func};
+Image.propTypes = {
+    item: PropTypes.object,
+    index: PropTypes.number,
+    margin: PropTypes.number,
+    height: PropTypes.number,
+    isSelectable: PropTypes.bool,
+    onClick: PropTypes.func,
+    onImageSelected: PropTypes.func
+};
 
-Image.defaultProps = {isSelectable: true,
-                      hover: false};
+Image.defaultProps = {
+    isSelectable: true,
+    hover: false
+};
 
+const 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"
+};
+
 export default Image;

No alert changes

Improved metrics

Total package byte prevSize

439221

increased by1.4%

Lines of code

3383

increased by3.33%

Number of lines in readme file

171

increased by0.59%

No dependency changes