Merge pull request #1 from vivid-planet/allow-srcSet

Allow src set

index.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 
 export interface ImageProps {
     src: string;
+    srcSet?: string;
     width: number;
     height: number;
     className?: string;

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vivid-planet/react-image",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Image component with loading animation for react",
   "main": "./lib/index.js",
   "typings": "./index.d.ts",
   "scripts": {
     "scss": "node-sass --output-style expanded --recursive scss/default.scss dist/react-image.css",
-    "build": "babel src --presets=es2015,react --out-dir lib",
+    "build": "babel src --presets=es2015,react --plugins transform-object-rest-spread --out-dir lib",
     "clean": "rm -rf lib && rm -rf dist",
     "prepublish": "npm run clean && npm run build && npm run scss"
   },
@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "node-sass": "^4.9.2"

src/Image.js

@@ -27,7 +27,7 @@ class Image extends Component {
 
     render() {
         const { loading } = this.state;
-        const { className, src, width, height, alt, title, onClick } = this.props;
+        const { className, ...imgProps } = this.props;
 
         const classNames = ['kwfUp-reactImage'];
         if (loading) classNames.push('kwfUp-reactImage--loading');
@@ -37,11 +37,11 @@ class Image extends Component {
             <div
                 className={classNames.join(' ')}
                 style={{
-                    paddingBottom: `${100 * (height / width)}%`
+                    paddingBottom: `${100 * (imgProps.height / imgProps.width)}%`
                 }}
             >
                 <img
-                    {...{src, width, height, alt, title, onClick}}
+                    {...imgProps}
                     onLoad={this._handleImageLoaded}
                 />
             </div>
@@ -51,6 +51,7 @@ class Image extends Component {
 
 Image.propTypes = {
     src: PropTypes.string.isRequired,
+    srcSet: PropTypes.string,
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
     className: PropTypes.string,