react-sizeme - npm Package Compare versions

Comparing version 2.4.1 to 2.4.2

dist/react-sizeme.js

@@ -14,3 +14,3 @@ 'use strict';
 
-var instance = void 0;
+var instances = {};
 
@@ -22,4 +22,4 @@ // Lazily require to not cause bug
 
-  if (!instance) {
-    instance = createResizeDetector({
+  if (!instances[strategy]) {
+    instances[strategy] = createResizeDetector({
       strategy: strategy
@@ -29,3 +29,3 @@ });
 
-  return instance;
+  return instances[strategy];
 }
@@ -275,2 +275,4 @@
 
+  var detector = resizeDetector(resizeDetectorStrategy);
+
   return function WrapComponent(WrappedComponent) {
@@ -374,3 +376,3 @@ var SizeMeRenderWrapper = renderWrapper(WrappedComponent);
           if (this.domEl) {
-            resizeDetector(resizeDetectorStrategy).removeAllListeners(this.domEl);
+            detector.uninstall(this.domEl);
             this.domEl = null;
@@ -390,3 +392,3 @@ }
             if (this.domEl) {
-              resizeDetector(resizeDetectorStrategy).removeAllListeners(this.domEl);
+              detector.uninstall(this.domEl);
               this.domEl = null;
@@ -398,7 +400,7 @@ }
           if (this.domEl) {
-            resizeDetector(resizeDetectorStrategy).removeAllListeners(this.domEl);
+            detector.uninstall(this.domEl);
           }
 
           this.domEl = found;
-          resizeDetector(resizeDetectorStrategy).listenTo(this.domEl, this.checkIfSizeChanged);
+          detector.listenTo(this.domEl, this.checkIfSizeChanged);
         }
@@ -405,0 +407,0 @@ }, {

dist/react-sizeme.min.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var createResizeDetector=_interopDefault(require("element-resize-detector")),React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttle=_interopDefault(require("lodash.throttle")),debounce=_interopDefault(require("lodash.debounce")),instance=void 0;function resizeDetector(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"scroll";return instance||(instance=createResizeDetector({strategy:e})),instance}var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},inherits=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)},objectWithoutProperties=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},possibleConstructorReturn=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},defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(e){function t(){return classCallCheck(this,t),possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return inherits(t,e),createClass(t,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),t}(React.Component);function Placeholder(e){var t=e.className,r=e.style,o={};return t||r?(t&&(o.className=t),r&&(o.style=r)):o.style={width:"100%",height:"100%"},React__default.createElement("div",o)}ReferenceWrapper.displayName="SizeMeReferenceWrapper",ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(e){function t(t){var r=t.explicitRef,o=t.className,n=t.style,i=t.size,a=t.disablePlaceholder,l=(t.onSize,objectWithoutProperties(t,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==i||null==i.width&&null==i.height&&null==i.position)&&!a,c={className:o,style:n};null!=i&&(c.size=i);var u=s?React__default.createElement(Placeholder,{className:o,style:n}):React__default.createElement(e,_extends({},c,l));return React__default.createElement(ReferenceWrapper,{ref:r},u)}return t.displayName="SizeMeRenderer("+getDisplayName(e)+")",t.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},t};function sizeMe(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,r=void 0===t?defaultConfig.monitorWidth:t,o=e.monitorHeight,n=void 0===o?defaultConfig.monitorHeight:o,i=e.monitorPosition,a=void 0===i?defaultConfig.monitorPosition:i,l=e.refreshRate,s=void 0===l?defaultConfig.refreshRate:l,c=e.refreshMode,u=void 0===c?defaultConfig.refreshMode:c,h=e.noPlaceholder,p=void 0===h?defaultConfig.noPlaceholder:h,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(r||n||a,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(s>=16,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===u||"debounce"===u,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===u?throttle:debounce;return function(e){var t=renderWrapper(e),o=function(e){function o(){var e,t,i;classCallCheck(this,o);for(var l=arguments.length,c=Array(l),u=0;u<l;u++)c[u]=arguments[u];return t=i=possibleConstructorReturn(this,(e=o.__proto__||Object.getPrototypeOf(o)).call.apply(e,[this].concat(c))),i.state={width:void 0,height:void 0,position:void 0},i.determineStrategy=function(e){e.onSize?(i.callbackState||(i.callbackState=_extends({},i.state)),i.strategy="callback"):i.strategy="render"},i.strategisedSetState=function(e){"callback"===i.strategy?(i.callbackState=e,i.props.onSize(e)):i.setState(e)},i.strategisedGetState=function(){return"callback"===i.strategy?i.callbackState:i.state},i.refCallback=function(e){i.element=e},i.hasSizeChanged=function(e,t){var o=e,i=t,l=o.position||{},s=i.position||{};return n&&o.height!==i.height||a&&(l.top!==s.top||l.left!==s.left||l.bottom!==s.bottom||l.right!==s.right)||r&&o.width!==i.width},i.checkIfSizeChanged=y(function(e){var t=e.getBoundingClientRect(),o=t.width,l=t.height,s=t.right,c=t.left,u=t.top,h=t.bottom,p={width:r?o:null,height:n?l:null,position:a?{right:s,left:c,top:u,bottom:h}:null};i.hasSizeChanged(i.strategisedGetState(),p)&&i.strategisedSetState(p)},s),possibleConstructorReturn(i,t)}return inherits(o,e),createClass(o,[{key:"componentDidMount",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillReceiveProps",value:function(e){this.determineStrategy(e)}},{key:"componentDidUpdate",value:function(){this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.domEl&&(resizeDetector(f).removeAllListeners(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?(this.domEl&&resizeDetector(f).removeAllListeners(this.domEl),this.domEl=e,resizeDetector(f).listenTo(this.domEl,this.checkIfSizeChanged)):this.domEl&&(resizeDetector(f).removeAllListeners(this.domEl),this.domEl=null)}},{key:"render",value:function(){var e=sizeMe.enableSSRBehaviour||sizeMe.noPlaceholders||p||"callback"===this.strategy,r=_extends({},this.state);return React__default.createElement(t,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:r,disablePlaceholder:e},this.props))}}]),o}(React__default.Component);return o.displayName="SizeMe("+getDisplayName(e)+")",o.propTypes={onSize:PropTypes.func},o.WrappedComponent=e,o}}sizeMe.enableSSRBehaviour=!1,sizeMe.noPlaceholders=!1,module.exports=sizeMe;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var createResizeDetector=_interopDefault(require("element-resize-detector")),React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttle=_interopDefault(require("lodash.throttle")),debounce=_interopDefault(require("lodash.debounce")),instances={};function resizeDetector(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},inherits=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)},objectWithoutProperties=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},possibleConstructorReturn=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},defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(e){function t(){return classCallCheck(this,t),possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return inherits(t,e),createClass(t,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),t}(React.Component);function Placeholder(e){var t=e.className,r=e.style,o={};return t||r?(t&&(o.className=t),r&&(o.style=r)):o.style={width:"100%",height:"100%"},React__default.createElement("div",o)}ReferenceWrapper.displayName="SizeMeReferenceWrapper",ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(e){function t(t){var r=t.explicitRef,o=t.className,n=t.style,i=t.size,a=t.disablePlaceholder,l=(t.onSize,objectWithoutProperties(t,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==i||null==i.width&&null==i.height&&null==i.position)&&!a,c={className:o,style:n};null!=i&&(c.size=i);var u=s?React__default.createElement(Placeholder,{className:o,style:n}):React__default.createElement(e,_extends({},c,l));return React__default.createElement(ReferenceWrapper,{ref:r},u)}return t.displayName="SizeMeRenderer("+getDisplayName(e)+")",t.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},t};function sizeMe(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,r=void 0===t?defaultConfig.monitorWidth:t,o=e.monitorHeight,n=void 0===o?defaultConfig.monitorHeight:o,i=e.monitorPosition,a=void 0===i?defaultConfig.monitorPosition:i,l=e.refreshRate,s=void 0===l?defaultConfig.refreshRate:l,c=e.refreshMode,u=void 0===c?defaultConfig.refreshMode:c,h=e.noPlaceholder,p=void 0===h?defaultConfig.noPlaceholder:h,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(r||n||a,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(s>=16,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===u||"debounce"===u,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===u?throttle:debounce,m=resizeDetector(f);return function(e){var t=renderWrapper(e),o=function(e){function o(){var e,t,i;classCallCheck(this,o);for(var l=arguments.length,c=Array(l),u=0;u<l;u++)c[u]=arguments[u];return t=i=possibleConstructorReturn(this,(e=o.__proto__||Object.getPrototypeOf(o)).call.apply(e,[this].concat(c))),i.state={width:void 0,height:void 0,position:void 0},i.determineStrategy=function(e){e.onSize?(i.callbackState||(i.callbackState=_extends({},i.state)),i.strategy="callback"):i.strategy="render"},i.strategisedSetState=function(e){"callback"===i.strategy?(i.callbackState=e,i.props.onSize(e)):i.setState(e)},i.strategisedGetState=function(){return"callback"===i.strategy?i.callbackState:i.state},i.refCallback=function(e){i.element=e},i.hasSizeChanged=function(e,t){var o=e,i=t,l=o.position||{},s=i.position||{};return n&&o.height!==i.height||a&&(l.top!==s.top||l.left!==s.left||l.bottom!==s.bottom||l.right!==s.right)||r&&o.width!==i.width},i.checkIfSizeChanged=y(function(e){var t=e.getBoundingClientRect(),o=t.width,l=t.height,s=t.right,c=t.left,u=t.top,h=t.bottom,p={width:r?o:null,height:n?l:null,position:a?{right:s,left:c,top:u,bottom:h}:null};i.hasSizeChanged(i.strategisedGetState(),p)&&i.strategisedSetState(p)},s),possibleConstructorReturn(i,t)}return inherits(o,e),createClass(o,[{key:"componentDidMount",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillReceiveProps",value:function(e){this.determineStrategy(e)}},{key:"componentDidUpdate",value:function(){this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.domEl&&(m.uninstall(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?(this.domEl&&m.uninstall(this.domEl),this.domEl=e,m.listenTo(this.domEl,this.checkIfSizeChanged)):this.domEl&&(m.uninstall(this.domEl),this.domEl=null)}},{key:"render",value:function(){var e=sizeMe.enableSSRBehaviour||sizeMe.noPlaceholders||p||"callback"===this.strategy,r=_extends({},this.state);return React__default.createElement(t,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:r,disablePlaceholder:e},this.props))}}]),o}(React__default.Component);return o.displayName="SizeMe("+getDisplayName(e)+")",o.propTypes={onSize:PropTypes.func},o.WrappedComponent=e,o}}sizeMe.enableSSRBehaviour=!1,sizeMe.noPlaceholders=!1,module.exports=sizeMe;
 //# sourceMappingURL=react-sizeme.min.js.map

package.json

 {
   "name": "react-sizeme",
-  "version": "2.4.1",
-  "description": "Make your React Components aware of their dimensions and position.",
+  "version": "2.4.2",
+  "description":
+    "Make your React Components aware of their dimensions and position.",
   "license": "MIT",
@@ -18,3 +19,4 @@ "main": "dist/react-sizeme.js",
     "clean": "rimraf ./dist && rimraf ./coverage",
-    "example:web": "echo 'Make sure to `cd example/web && yarn install`' && cd example/web && yarn run start",
+    "example:web":
+      "echo 'Make sure to `cd example/web && yarn install`' && cd example/web && yarn run start",
     "lint": "eslint src",
@@ -21,0 +23,0 @@ "precommit": "lint-staged && npm run test",

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

Worsened metrics

Total package byte prevSize

78496

decreased by-0.41%

No dependency changes