react-image-zoom - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/react-image-zoom.js

@@ -84,6 +84,10 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	    function ReactImageZoom() {
+	    function ReactImageZoom(props) {
 	        _classCallCheck(this, ReactImageZoom);
 
-	        return _possibleConstructorReturn(this, (ReactImageZoom.__proto__ || Object.getPrototypeOf(ReactImageZoom)).apply(this, arguments));
+	        var _this = _possibleConstructorReturn(this, (ReactImageZoom.__proto__ || Object.getPrototypeOf(ReactImageZoom)).call(this, props));
+
+	        _this.container = undefined;
+	        _this.getRef = _this.getRef.bind(_this);
+	        return _this;
 	    }
@@ -94,3 +98,3 @@
 	        value: function componentDidMount() {
-	            this.imageZoom = new _jsImageZoom2.default(this.refs.container, this.props);
+	            this.imageZoom = new _jsImageZoom2.default(this.container, this.props);
 	        }
@@ -107,10 +111,25 @@ }, {
 	            if (this.props.img !== nextProps.img) {
-	                this.imageZoom.kill();
-	                this.imageZoom = new _jsImageZoom2.default(this.refs.container, nextProps);
+	                this.kill();
+	                this.imageZoom = new _jsImageZoom2.default(this.container, nextProps);
 	            }
 	        }
 	    }, {
+	        key: 'setup',
+	        value: function setup() {
+	            this.imageZoom.setup();
+	        }
+	    }, {
+	        key: 'kill',
+	        value: function kill() {
+	            this.imageZoom.kill();
+	        }
+	    }, {
+	        key: 'getRef',
+	        value: function getRef(ref) {
+	            this.container = ref;
+	        }
+	    }, {
 	        key: 'render',
 	        value: function render() {
-	            return _react2.default.createElement('div', { ref: 'container' });
+	            return _react2.default.createElement('div', { ref: this.getRef });
 	        }
@@ -117,0 +136,0 @@ }]);

dist/react-image-zoom.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("js-image-zoom"),require("react")):"function"==typeof define&&define.amd?define("ReactImageZoom",["js-image-zoom","react"],t):"object"==typeof exports?exports.ReactImageZoom=t(require("js-image-zoom"),require("react")):e.ReactImageZoom=t(e.ImageZoom,e.React)}(this,function(e,t){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),p=o(2),s=r(p),c=o(1),f=r(c),l=function(e){function t(){return n(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),a(t,[{key:"componentDidMount",value:function(){this.imageZoom=new f.default(this.refs.container,this.props)}},{key:"componentWillUnmount",value:function(){this.imageZoom.kill(),this.imageZoom=void 0}},{key:"componentWillReceiveProps",value:function(e){this.props.img!==e.img&&(this.imageZoom.kill(),this.imageZoom=new f.default(this.refs.container,e))}},{key:"render",value:function(){return s.default.createElement("div",{ref:"container"})}}]),t}(s.default.Component);l.propTypes={img:p.PropTypes.string.isRequired,height:p.PropTypes.number.isRequired,width:p.PropTypes.number.isRequired,zoomWidth:p.PropTypes.number,scale:p.PropTypes.number,offset:p.PropTypes.object,zoomStyle:p.PropTypes.string},t.default=l,e.exports=t.default},function(t,o){t.exports=e},function(e,o){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("js-image-zoom"),require("react")):"function"==typeof define&&define.amd?define("ReactImageZoom",["js-image-zoom","react"],t):"object"==typeof exports?exports.ReactImageZoom=t(require("js-image-zoom"),require("react")):e.ReactImageZoom=t(e.ImageZoom,e.React)}(this,function(e,t){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),s=o(2),c=n(s),f=o(1),p=n(f),l=function(e){function t(e){r(this,t);var o=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.container=void 0,o.getRef=o.getRef.bind(o),o}return u(t,e),a(t,[{key:"componentDidMount",value:function(){this.imageZoom=new p.default(this.container,this.props)}},{key:"componentWillUnmount",value:function(){this.imageZoom.kill(),this.imageZoom=void 0}},{key:"componentWillReceiveProps",value:function(e){this.props.img!==e.img&&(this.kill(),this.imageZoom=new p.default(this.container,e))}},{key:"setup",value:function(){this.imageZoom.setup()}},{key:"kill",value:function(){this.imageZoom.kill()}},{key:"getRef",value:function(e){this.container=e}},{key:"render",value:function(){return c.default.createElement("div",{ref:this.getRef})}}]),t}(c.default.Component);l.propTypes={img:s.PropTypes.string.isRequired,height:s.PropTypes.number.isRequired,width:s.PropTypes.number.isRequired,zoomWidth:s.PropTypes.number,scale:s.PropTypes.number,offset:s.PropTypes.object,zoomStyle:s.PropTypes.string},t.default=l,e.exports=t.default},function(t,o){t.exports=e},function(e,o){e.exports=t}])});

example/index.js

@@ -5,2 +5,14 @@ import React, { Component } from 'react';
 
+class ImageZoomSettings extends Component {
+    render() {
+        return (
+            <div className='image-zoom-settings'>
+            </div>
+        );
+    }
+}
+
+
+
+
 class ReactImageZoomExample extends Component {
@@ -12,3 +24,3 @@ render() {
                 <h2>{`props: ${JSON.stringify(props)}`}</h2>
-                <ReactImageZoom {...props} />;
+                <ReactImageZoom {...props} />
             </div>
@@ -15,0 +27,0 @@ )

index.js

@@ -28,6 +28,10 @@ 'use strict';
 
-    function ReactImageZoom() {
+    function ReactImageZoom(props) {
         _classCallCheck(this, ReactImageZoom);
 
-        return _possibleConstructorReturn(this, (ReactImageZoom.__proto__ || Object.getPrototypeOf(ReactImageZoom)).apply(this, arguments));
+        var _this = _possibleConstructorReturn(this, (ReactImageZoom.__proto__ || Object.getPrototypeOf(ReactImageZoom)).call(this, props));
+
+        _this.container = undefined;
+        _this.getRef = _this.getRef.bind(_this);
+        return _this;
     }
@@ -38,3 +42,3 @@
         value: function componentDidMount() {
-            this.imageZoom = new _jsImageZoom2.default(this.refs.container, this.props);
+            this.imageZoom = new _jsImageZoom2.default(this.container, this.props);
         }
@@ -51,10 +55,25 @@ }, {
             if (this.props.img !== nextProps.img) {
-                this.imageZoom.kill();
-                this.imageZoom = new _jsImageZoom2.default(this.refs.container, nextProps);
+                this.kill();
+                this.imageZoom = new _jsImageZoom2.default(this.container, nextProps);
             }
         }
     }, {
+        key: 'setup',
+        value: function setup() {
+            this.imageZoom.setup();
+        }
+    }, {
+        key: 'kill',
+        value: function kill() {
+            this.imageZoom.kill();
+        }
+    }, {
+        key: 'getRef',
+        value: function getRef(ref) {
+            this.container = ref;
+        }
+    }, {
         key: 'render',
         value: function render() {
-            return _react2.default.createElement('div', { ref: 'container' });
+            return _react2.default.createElement('div', { ref: this.getRef });
         }
@@ -61,0 +80,0 @@ }]);

package.json

 {
   "name": "react-image-zoom",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "react based image zoomer on mouse hover",
@@ -35,5 +35,7 @@ "homepage": "https://github.com/malaman/react-image-zoom",
     "eslint-plugin-react": "^4.2.3",
+    "jest": "^18.1.0",
     "mocha": "^2.4.5",
-    "react": "^15.2.0",
-    "react-dom": "^15.2.0",
+    "react": "^15.4.0",
+    "react-dom": "^15.4.0",
+    "react-test-renderer": "^15.4.2",
     "sinon": "^1.17.3",
@@ -51,3 +53,4 @@ "uglify-js": "^2.6.2",
     "lint": "eslint ./src",
-    "lint-dev": "eslint --fix ./src"
+    "lint-dev": "eslint --fix ./src",
+    "test": "jest test"
   },
@@ -54,0 +57,0 @@ "bugs": {

README.md

 # react-image-zoom
 
+ [![NPM Download Stats](https://nodei.co/npm/react-image-zoom.png?downloads=true)](https://www.npmjs.com/package/react-image-zoom)
+ 
 ##Overview
@@ -4,0 +6,0 @@

src/react-image-zoom.js

@@ -15,4 +15,10 @@ import React, {PropTypes} from 'react';
 
+    constructor(props) {
+        super(props);
+        this.container = undefined;
+        this.getRef = this.getRef.bind(this);
+    }
+
     componentDidMount() {
-        this.imageZoom = new ImageZoom(this.refs.container, this.props);
+        this.imageZoom = new ImageZoom(this.container, this.props);
     }
@@ -27,9 +33,22 @@
         if (this.props.img !== nextProps.img) {
-            this.imageZoom.kill();
-            this.imageZoom = new ImageZoom(this.refs.container, nextProps);
+            this.kill();
+            this.imageZoom = new ImageZoom(this.container, nextProps);
         }
     }
 
+    setup() {
+        this.imageZoom.setup();
+    }
+
+    kill() {
+        this.imageZoom.kill();
+    }
+
+    getRef(ref) {
+        this.container = ref;
+    }
+
+
     render() {
-        return <div ref='container' />;
+        return <div ref={this.getRef} />;
     }
@@ -36,0 +55,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

768761

increased by35.74%

Number of package files

20

increased by33.33%

Lines of code

1325

increased by8.08%

Number of lines in readme file

43

increased by4.88%

Worsened metrics

Dev dependency count

28

increased by7.69%

No dependency changes