react-sizeme - npm Package Compare versions

Comparing version 2.6.8 to 2.6.9

dist/react-sizeme.js

@@ -224,3 +224,4 @@ 'use strict';
       width: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
-      height: PropTypes.number // eslint-disable-line react/no-unused-prop-types
+      height: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
+      position: PropTypes.object
     }),
@@ -227,0 +228,0 @@ disablePlaceholder: PropTypes.bool,

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

package.json

 {
   "name": "react-sizeme",
-  "version": "2.6.8",
+  "version": "2.6.9",
   "description": "Make your React Components aware of their dimensions and position.",
@@ -54,3 +54,3 @@ "license": "MIT",
     "babel-core": "^6.26.3",
-    "babel-eslint": "8.2.3",
+    "babel-eslint": "10.0.3",
     "babel-jest": "^23.0.1",
@@ -70,8 +70,9 @@ "babel-plugin-external-helpers": "^6.22.0",
     "enzyme-to-json": "^3.4.2",
-    "eslint": "^4.7.2",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.9.0",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "^2.1.2",
     "gzip-size": "^4.0.0",
@@ -127,2 +128,3 @@ "husky": "^0.14.3",
       "import/no-extraneous-dependencies": 0,
+      "max-classes-per-file": 0,
       "no-nested-ternary": 0,
@@ -136,5 +138,9 @@ "no-underscore-dangle": 0,
       ],
+      "react/destructuring-assignment": 0,
       "react/forbid-prop-types": 0,
       "react/jsx-filename-extension": 0,
-      "react/sort-comp": 0
+      "react/jsx-props-no-spreading": 0,
+      "react/sort-comp": 0,
+      "react/state-in-constructor": 0,
+      "react/static-property-placement": 0
     }
@@ -141,0 +147,0 @@ },

react-sizeme.d.ts

@@ -34,2 +34,4 @@ /* eslint-disable */
   ) => ComponentType<Omit<P, 'size'>>
+
+  export let noPlaceholders: boolean
 }
@@ -36,0 +38,0 @@ declare function sizeMe(

No alert changes

Improved metrics

Total package byte prevSize

85867

increased by0.51%

Lines of code

568

increased by0.35%

Worsened metrics

Dev dependency count

47

increased by2.17%

No dependency changes