Support id, className props

minhtranite · Jul 19, 2016 · 05602e5 · 05602e5
1 parent b7f7b49
commit 05602e5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -134,6 +134,8 @@ imageLoadComplete(instance, index, item);
 | items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
 | options | object | {} | false | http://photoswipe.com/documentation/options.html |
 | onClose | function |  | false | Callback after PhotoSwipe close |
+| id | string |  | false |  |
+| className | string | `pswp` |  |
 | beforeChange | function |  | false | Photoswipe event listener |
 | afterChange | function |  | false | Photoswipe event listener |
 | imageLoadComplete | function |  | false | Photoswipe event listener |
@@ -159,6 +161,8 @@ imageLoadComplete(instance, index, item);
 | items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
 | options | object | {} | false | http://photoswipe.com/documentation/options.html |
 | thumbnailContent | function | `<img src={item.src} width='100' height='100'/>` | false | Thumbnail content |
+| id | string |  | false |  |
+| className | string | `pswp-gallery` |  | 
 | beforeChange | function |  | false | Photoswipe event listener |
 | afterChange | function |  | false | Photoswipe event listener |
 | imageLoadComplete | function |  | false | Photoswipe event listener |

diff --git a/dist/react-photoswipe.js b/dist/react-photoswipe.js
diff --git a/lib/PhotoSwipe.js b/lib/PhotoSwipe.js
@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 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 _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
@@ -152,28 +150,17 @@ var PhotoSwipe = (function (_React$Component) {
     key: 'render',
     value: function render() {
       var _props = this.props;
-      var isOpen = _props.isOpen;
-      var items = _props.items;
-      var options = _props.options;
-      var onClose = _props.onClose;
+      var id = _props.id;
       var className = _props.className;
 
-      var other = _objectWithoutProperties(_props, ['isOpen', 'items', 'options', 'onClose', 'className']);
-
       className = (0, _classnames2['default'])(['pswp', className]).trim();
-      var otherProps = {};
-      for (var propName in other) {
-        if (other.hasOwnProperty(propName) && _events2['default'].indexOf(propName) === -1) {
-          otherProps[propName] = other[propName];
-        }
-      }
       return _react2['default'].createElement(
         'div',
-        _extends({}, otherProps, {
+        { id: id,
           className: className,
           tabIndex: '-1',
           role: 'dialog',
-          'aria-hidden': 'true' }),
+          'aria-hidden': 'true' },
         _react2['default'].createElement('div', { className: 'pswp__bg' }),
         _react2['default'].createElement(
           'div',
@@ -240,6 +227,7 @@ var PhotoSwipe = (function (_React$Component) {
       items: _react2['default'].PropTypes.array.isRequired,
       options: _react2['default'].PropTypes.object,
       onClose: _react2['default'].PropTypes.func,
+      id: _react2['default'].PropTypes.string,
       className: _react2['default'].PropTypes.string
     },
     enumerable: true

diff --git a/lib/PhotoSwipeGallery.js b/lib/PhotoSwipeGallery.js
@@ -30,6 +30,10 @@ var _PhotoSwipeJs = require('./PhotoSwipe.js');
 
 var _PhotoSwipeJs2 = _interopRequireDefault(_PhotoSwipeJs);
 
+var _lodashPick = require('lodash.pick');
+
+var _lodashPick2 = _interopRequireDefault(_lodashPick);
+
 var _events = require('./events');
 
 var _events2 = _interopRequireDefault(_events);
@@ -86,31 +90,22 @@ var PhotoSwipeGallery = (function (_React$Component) {
       var _this2 = this;
 
       var _props = this.props;
+      var id = _props.id;
       var className = _props.className;
       var items = _props.items;
       var thumbnailContent = _props.thumbnailContent;
 
-      var other = _objectWithoutProperties(_props, ['className', 'items', 'thumbnailContent']);
+      var other = _objectWithoutProperties(_props, ['id', 'className', 'items', 'thumbnailContent']);
 
+      className = (0, _classnames2['default'])(['pswp-gallery', className]).trim();
+      var eventProps = (0, _lodashPick2['default'])(other, _events2['default']);
       var _state = this.state;
       var isOpen = _state.isOpen;
       var options = _state.options;
 
-      className = (0, _classnames2['default'])(['pswp-gallery', className]).trim();
-      var otherProps = {};
-      var eventProps = {};
-      for (var propName in other) {
-        if (other.hasOwnProperty(propName)) {
-          if (_events2['default'].indexOf(propName) === -1) {
-            otherProps[propName] = other[propName];
-          } else {
-            eventProps[propName] = other[propName];
-          }
-        }
-      }
       return _react2['default'].createElement(
         'div',
-        _extends({}, otherProps, { className: className }),
+        { id: id, className: className },
         _react2['default'].createElement(
           'div',
           { className: 'pswp-thumbnails' },
@@ -137,6 +132,7 @@ var PhotoSwipeGallery = (function (_React$Component) {
       items: _react2['default'].PropTypes.array.isRequired,
       options: _react2['default'].PropTypes.object,
       thumbnailContent: _react2['default'].PropTypes.func,
+      id: _react2['default'].PropTypes.string,
       className: _react2['default'].PropTypes.string
     },
     enumerable: true

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-photoswipe",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.",
   "main": "lib/index.js",
   "scripts": {
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.3",
+    "lodash.pick": "^4.2.1",
     "photoswipe": "^4.1.0"
   },
   "devDependencies": {

diff --git a/src/PhotoSwipe.js b/src/PhotoSwipe.js
@@ -11,6 +11,7 @@ class PhotoSwipe extends React.Component {
     items: React.PropTypes.array.isRequired,
     options: React.PropTypes.object,
     onClose: React.PropTypes.func,
+    id: React.PropTypes.string,
     className: React.PropTypes.string
   };
   static defaultProps = {
@@ -101,16 +102,10 @@ class PhotoSwipe extends React.Component {
   };
 
   render() {
-    let {isOpen, items, options, onClose, className, ...other} = this.props;
+    let {id, className} = this.props;
     className = classnames(['pswp', className]).trim();
-    let otherProps = {};
-    for (let propName in other) {
-      if (other.hasOwnProperty(propName) && events.indexOf(propName) === -1) {
-        otherProps[propName] = other[propName];
-      }
-    }
     return (
-      <div {...otherProps}
+      <div id={id}
         className={className}
         tabIndex="-1"
         role="dialog"

diff --git a/src/PhotoSwipeGallery.js b/src/PhotoSwipeGallery.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PhotoSwipe from './PhotoSwipe.js';
+import pick from 'lodash.pick';
 import events from './events';
 import classnames from 'classnames';
 
@@ -9,6 +10,7 @@ class PhotoSwipeGallery extends React.Component {
     items: React.PropTypes.array.isRequired,
     options: React.PropTypes.object,
     thumbnailContent: React.PropTypes.func,
+    id: React.PropTypes.string,
     className: React.PropTypes.string
   };
 
@@ -52,22 +54,12 @@ class PhotoSwipeGallery extends React.Component {
   };
 
   render() {
-    let {className, items, thumbnailContent, ...other} = this.props;
-    let {isOpen, options} = this.state;
+    let {id, className, items, thumbnailContent, ...other} = this.props;
     className = classnames(['pswp-gallery', className]).trim();
-    let otherProps = {};
-    let eventProps = {};
-    for (let propName in other) {
-      if (other.hasOwnProperty(propName)) {
-        if (events.indexOf(propName) === -1) {
-          otherProps[propName] = other[propName];
-        } else {
-          eventProps[propName] = other[propName];
-        }
-      }
-    }
+    let eventProps = pick(other, events);
+    let {isOpen, options} = this.state;
     return (
-      <div {...otherProps} className={className}>
+      <div id={id} className={className}>
         <div className="pswp-thumbnails">
           {items.map((item, index) => {
             return (