@vx/responsive - npm Package Compare versions

Comparing version 0.0.165 to 0.0.172

build/components/ParentSize.js

@@ -46,2 +46,3 @@ 'use strict';
     _this.setTarget = _this.setTarget.bind(_this);
+    _this.animationFrameID = null;
     return _this;
@@ -56,2 +57,19 @@ }
       this.ro = new _resizeObserverPolyfill2.default(function (entries, observer) {
+        var _loop = function _loop(entry) {
+          var _entry$contentRect = entry.contentRect,
+              left = _entry$contentRect.left,
+              top = _entry$contentRect.top,
+              width = _entry$contentRect.width,
+              height = _entry$contentRect.height;
+
+          _this2.animationFrameID = window.requestAnimationFrame(function () {
+            _this2.resize({
+              width: width,
+              height: height,
+              top: top,
+              left: left
+            });
+          });
+        };
+
         var _iteratorNormalCompletion = true;
@@ -64,14 +82,4 @@ var _didIteratorError = false;
             var entry = _step.value;
-            var _entry$contentRect = entry.contentRect,
-                left = _entry$contentRect.left,
-                top = _entry$contentRect.top,
-                width = _entry$contentRect.width,
-                height = _entry$contentRect.height;
 
-            _this2.resize({
-              width: width,
-              height: height,
-              top: top,
-              left: left
-            });
+            _loop(entry);
           }
@@ -98,2 +106,3 @@ } catch (err) {
     value: function componentWillUnmount() {
+      window.cancelAnimationFrame(this.animationFrameID);
       this.ro.disconnect();
@@ -100,0 +109,0 @@ }

dist/vx-responsive.es.js

@@ -585,2 +585,3 @@ import React from 'react';
     _this.setTarget = _this.setTarget.bind(_this);
+    _this.animationFrameID = null;
     return _this;
@@ -595,2 +596,19 @@ }
       this.ro = new ResizeObserver(function (entries, observer) {
+        var _loop = function _loop(entry) {
+          var _entry$contentRect = entry.contentRect,
+              left = _entry$contentRect.left,
+              top = _entry$contentRect.top,
+              width = _entry$contentRect.width,
+              height = _entry$contentRect.height;
+
+          _this2.animationFrameID = window.requestAnimationFrame(function () {
+            _this2.resize({
+              width: width,
+              height: height,
+              top: top,
+              left: left
+            });
+          });
+        };
+
         var _iteratorNormalCompletion = true;
@@ -603,14 +621,4 @@ var _didIteratorError = false;
             var entry = _step.value;
-            var _entry$contentRect = entry.contentRect,
-                left = _entry$contentRect.left,
-                top = _entry$contentRect.top,
-                width = _entry$contentRect.width,
-                height = _entry$contentRect.height;
 
-            _this2.resize({
-              width: width,
-              height: height,
-              top: top,
-              left: left
-            });
+            _loop(entry);
           }
@@ -637,2 +645,3 @@ } catch (err) {
     value: function componentWillUnmount() {
+      window.cancelAnimationFrame(this.animationFrameID);
       this.ro.disconnect();
@@ -639,0 +648,0 @@ }

dist/vx-responsive.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","resize-observer-polyfill"],t):t(e.vx=e.vx||{},e.React,e.PropTypes,null)}(this,function(e,l,t,i){"use strict";l=l&&l.hasOwnProperty("default")?l.default:l,t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i;var w=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},r="object"==typeof n&&n&&n.Object===Object&&n,o="object"==typeof self&&self&&self.Object===Object&&self,u=r||o||Function("return this")(),g=function(){return u.Date.now()},a=u.Symbol,s=Object.prototype,c=s.hasOwnProperty,f=s.toString,d=a?a.toStringTag:void 0;var h=function(e){var t=c.call(e,d),n=e[d];try{e[d]=void 0}catch(e){}var i=f.call(e);return t?e[d]=n:delete e[d],i},p=Object.prototype.toString;var v=function(e){return p.call(e)},y=a?a.toStringTag:void 0;var b=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":y&&y in Object(e)?h(e):v(e)};var m=function(e){return null!=e&&"object"==typeof e};var z=function(e){return"symbol"==typeof e||m(e)&&"[object Symbol]"==b(e)},O=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,T=/^0b[01]+$/i,P=/^0o[0-7]+$/i,_=parseInt;var R=function(e){if("number"==typeof e)return e;if(z(e))return NaN;if(w(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=w(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(O,"");var n=T.test(e);return n||P.test(e)?_(e.slice(2),n?2:8):j.test(e)?NaN:+e},S=Math.max,k=Math.min;var x=function(i,r,e){var o,u,a,s,c,l,f=0,d=!1,h=!1,t=!0;if("function"!=typeof i)throw new TypeError("Expected a function");function p(e){var t=o,n=u;return o=u=void 0,f=e,s=i.apply(n,t)}function v(e){var t=e-l;return void 0===l||r<=t||t<0||h&&a<=e-f}function y(){var e,t,n=g();if(v(n))return b(n);c=setTimeout(y,(t=r-((e=n)-l),h?k(t,a-(e-f)):t))}function b(e){return c=void 0,t&&o?p(e):(o=u=void 0,s)}function n(){var e,t=g(),n=v(t);if(o=arguments,u=this,l=t,n){if(void 0===c)return f=e=l,c=setTimeout(y,r),d?p(e):s;if(h)return c=setTimeout(y,r),p(l)}return void 0===c&&(c=setTimeout(y,r)),s}return r=R(r)||0,w(e)&&(d=!!e.leading,a=(h="maxWait"in e)?S(R(e.maxWait)||0,r):a,t="trailing"in e?!!e.trailing:t),n.cancel=function(){void 0!==c&&clearTimeout(c),o=l=u=c=void(f=0)},n.flush=function(){return void 0===c?s:b(g())},n},E=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},W=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}(),H=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},D=function(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)},M=function(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},N=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={width:0,height:0,top:0,left:0},t.resize=x(t.resize.bind(t),e.debounceTime),t.setTarget=t.setTarget.bind(t),t}return D(n,e),W(n,[{key:"componentDidMount",value:function(){var d=this;this.ro=new i(function(e,t){var n=!0,i=!1,r=void 0;try{for(var o,u=e[Symbol.iterator]();!(n=(o=u.next()).done);n=!0){var a=o.value.contentRect,s=a.left,c=a.top,l=a.width,f=a.height;d.resize({width:l,height:f,top:c,left:s})}}catch(e){i=!0,r=e}finally{try{!n&&u.return&&u.return()}finally{if(i)throw r}}}),this.ro.observe(this.target)}},{key:"componentWillUnmount",value:function(){this.ro.disconnect()}},{key:"resize",value:function(e){var t=e.width,n=e.height,i=e.top,r=e.left;this.setState(function(){return{width:t,height:n,top:i,left:r}})}},{key:"setTarget",value:function(e){this.target=e}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.children;return l.createElement("div",{style:{width:"100%",height:"100%"},ref:this.setTarget,className:t},n(H({},this.state,{ref:this.target,resize:this.resize})))}}]),n}(l.Component);N.defaultProps={debounceTime:300},N.propTypes={className:t.string,children:t.func.isRequired,debounceTime:t.number},e.ScaleSVG=function(e){var t=e.children,n=e.width,i=e.height,r=e.xOrigin,o=void 0===r?0:r,u=e.yOrigin,a=void 0===u?0:u,s=e.preserveAspectRatio,c=void 0===s?"xMinYMin meet":s;return l.createElement("div",{style:{display:"inline-block",position:"relative",width:"100%",verticalAlign:"top",overflow:"hidden"}},l.createElement("svg",{preserveAspectRatio:c,viewBox:o+" "+a+" "+n+" "+i},t))},e.ParentSize=N,e.withParentSize=function(r){var e=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={parentWidth:null,parentHeight:null},t.handleResize=x(t.resize.bind(t),e.windowResizeDebounceTime).bind(t),t}return D(n,e),W(n,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize,!1),this.resize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"resize",value:function(e){if(this.container){var n=this.container.getBoundingClientRect();this.setState(function(e,t){return{parentWidth:n.width,parentHeight:n.height}})}}},{key:"render",value:function(){var t=this,e=this.state,n=e.parentWidth,i=e.parentHeight;return l.createElement("div",{style:{width:"100%",height:"100%"},ref:function(e){t.container=e}},null!==n&&null!==i&&l.createElement(r,H({parentWidth:n,parentHeight:i},this.props)))}}]),n}(l.Component);return e.defaultProps={windowResizeDebounceTime:300},e},e.withScreenSize=function(i){var e=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={screenWidth:null,screenHeight:null},t.handleResize=x(t.resize.bind(t),e.windowResizeDebounceTime).bind(t),t}return D(n,e),W(n,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize,!1),this.resize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"resize",value:function(e){this.setState(function(e,t){return{screenWidth:window.innerWidth,screenHeight:window.innerHeight}})}},{key:"render",value:function(){var e=this.state,t=e.screenWidth,n=e.screenHeight;return t||n?l.createElement(i,H({screenWidth:t,screenHeight:n},this.props)):null}}]),n}(l.Component);return e.defaultProps={windowResizeDebounceTime:300},e},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","resize-observer-polyfill"],t):t(e.vx=e.vx||{},e.React,e.PropTypes,null)}(this,function(e,l,t,i){"use strict";l=l&&l.hasOwnProperty("default")?l.default:l,t=t&&t.hasOwnProperty("default")?t.default:t,i=i&&i.hasOwnProperty("default")?i.default:i;var m=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},r="object"==typeof n&&n&&n.Object===Object&&n,o="object"==typeof self&&self&&self.Object===Object&&self,a=r||o||Function("return this")(),w=function(){return a.Date.now()},u=a.Symbol,s=Object.prototype,c=s.hasOwnProperty,f=s.toString,d=u?u.toStringTag:void 0;var h=function(e){var t=c.call(e,d),n=e[d];try{e[d]=void 0}catch(e){}var i=f.call(e);return t?e[d]=n:delete e[d],i},p=Object.prototype.toString;var v=function(e){return p.call(e)},y=u?u.toStringTag:void 0;var b=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":y&&y in Object(e)?h(e):v(e)};var g=function(e){return null!=e&&"object"==typeof e};var z=function(e){return"symbol"==typeof e||g(e)&&"[object Symbol]"==b(e)},O=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,T=/^0b[01]+$/i,P=/^0o[0-7]+$/i,_=parseInt;var R=function(e){if("number"==typeof e)return e;if(z(e))return NaN;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(O,"");var n=T.test(e);return n||P.test(e)?_(e.slice(2),n?2:8):j.test(e)?NaN:+e},S=Math.max,k=Math.min;var x=function(i,r,e){var o,a,u,s,c,l,f=0,d=!1,h=!1,t=!0;if("function"!=typeof i)throw new TypeError("Expected a function");function p(e){var t=o,n=a;return o=a=void 0,f=e,s=i.apply(n,t)}function v(e){var t=e-l;return void 0===l||r<=t||t<0||h&&u<=e-f}function y(){var e,t,n=w();if(v(n))return b(n);c=setTimeout(y,(t=r-((e=n)-l),h?k(t,u-(e-f)):t))}function b(e){return c=void 0,t&&o?p(e):(o=a=void 0,s)}function n(){var e,t=w(),n=v(t);if(o=arguments,a=this,l=t,n){if(void 0===c)return f=e=l,c=setTimeout(y,r),d?p(e):s;if(h)return c=setTimeout(y,r),p(l)}return void 0===c&&(c=setTimeout(y,r)),s}return r=R(r)||0,m(e)&&(d=!!e.leading,u=(h="maxWait"in e)?S(R(e.maxWait)||0,r):u,t="trailing"in e?!!e.trailing:t),n.cancel=function(){void 0!==c&&clearTimeout(c),o=l=a=c=void(f=0)},n.flush=function(){return void 0===c?s:b(w())},n},E=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},W=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}(),D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},H=function(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)},M=function(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},N=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={width:0,height:0,top:0,left:0},t.resize=x(t.resize.bind(t),e.debounceTime),t.setTarget=t.setTarget.bind(t),t.animationFrameID=null,t}return H(n,e),W(n,[{key:"componentDidMount",value:function(){var s=this;this.ro=new i(function(e,t){var n=function(e){var t=e.contentRect,n=t.left,i=t.top,r=t.width,o=t.height;s.animationFrameID=window.requestAnimationFrame(function(){s.resize({width:r,height:o,top:i,left:n})})},i=!0,r=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(i=(a=u.next()).done);i=!0){n(a.value)}}catch(e){r=!0,o=e}finally{try{!i&&u.return&&u.return()}finally{if(r)throw o}}}),this.ro.observe(this.target)}},{key:"componentWillUnmount",value:function(){window.cancelAnimationFrame(this.animationFrameID),this.ro.disconnect()}},{key:"resize",value:function(e){var t=e.width,n=e.height,i=e.top,r=e.left;this.setState(function(){return{width:t,height:n,top:i,left:r}})}},{key:"setTarget",value:function(e){this.target=e}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.children;return l.createElement("div",{style:{width:"100%",height:"100%"},ref:this.setTarget,className:t},n(D({},this.state,{ref:this.target,resize:this.resize})))}}]),n}(l.Component);N.defaultProps={debounceTime:300},N.propTypes={className:t.string,children:t.func.isRequired,debounceTime:t.number},e.ScaleSVG=function(e){var t=e.children,n=e.width,i=e.height,r=e.xOrigin,o=void 0===r?0:r,a=e.yOrigin,u=void 0===a?0:a,s=e.preserveAspectRatio,c=void 0===s?"xMinYMin meet":s;return l.createElement("div",{style:{display:"inline-block",position:"relative",width:"100%",verticalAlign:"top",overflow:"hidden"}},l.createElement("svg",{preserveAspectRatio:c,viewBox:o+" "+u+" "+n+" "+i},t))},e.ParentSize=N,e.withParentSize=function(r){var e=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={parentWidth:null,parentHeight:null},t.handleResize=x(t.resize.bind(t),e.windowResizeDebounceTime).bind(t),t}return H(n,e),W(n,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize,!1),this.resize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"resize",value:function(e){if(this.container){var n=this.container.getBoundingClientRect();this.setState(function(e,t){return{parentWidth:n.width,parentHeight:n.height}})}}},{key:"render",value:function(){var t=this,e=this.state,n=e.parentWidth,i=e.parentHeight;return l.createElement("div",{style:{width:"100%",height:"100%"},ref:function(e){t.container=e}},null!==n&&null!==i&&l.createElement(r,D({parentWidth:n,parentHeight:i},this.props)))}}]),n}(l.Component);return e.defaultProps={windowResizeDebounceTime:300},e},e.withScreenSize=function(i){var e=function(e){function n(e){E(this,n);var t=M(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={screenWidth:null,screenHeight:null},t.handleResize=x(t.resize.bind(t),e.windowResizeDebounceTime).bind(t),t}return H(n,e),W(n,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize,!1),this.resize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize,!1)}},{key:"resize",value:function(e){this.setState(function(e,t){return{screenWidth:window.innerWidth,screenHeight:window.innerHeight}})}},{key:"render",value:function(){var e=this.state,t=e.screenWidth,n=e.screenHeight;return t||n?l.createElement(i,D({screenWidth:t,screenHeight:n},this.props)):null}}]),n}(l.Component);return e.defaultProps={windowResizeDebounceTime:300},e},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@vx/responsive",
-  "version": "0.0.165",
+  "version": "0.0.172",
   "description": "vx responsive svg",
@@ -5,0 +5,0 @@ "sideEffects": false,

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

51462

increased by1.33%

Lines of code

1102

increased by1.29%

No dependency changes