react-sizeme - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

dist/react-sizeme.js

@@ -486,4 +486,2 @@ 'use strict';
     value: function render() {
-      var _this2 = this;
-
       var SizeAware = this.SizeAware;
@@ -494,5 +492,3 @@
         SizeAware,
-        { onSize: function onSize(size) {
-            return _this2.setState({ size: size });
-          } },
+        { onSize: this.onSize },
         render({ size: this.state.size })
@@ -515,6 +511,6 @@ );
 var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  var _this2 = this;
 
   this.createComponent = function (config) {
-    _this3.SizeAware = withSize(config)(function (_ref) {
+    _this2.SizeAware = withSize(config)(function (_ref) {
       var children = _ref.children;
@@ -524,2 +520,6 @@ return children;
   };
+
+  this.onSize = function (size) {
+    return _this2.setState({ size: size });
+  };
 };
@@ -526,0 +526,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")),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},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"])),l=(null==o||null==o.width&&null==o.height&&null==o.position)&&!n,s={className:r,style:i};null!=o&&(s.size=o);var c=l?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},s,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,p=void 0===i?defaultConfig.monitorPosition:i,o=e.refreshRate,a=void 0===o?defaultConfig.refreshRate:o,n=e.refreshMode,l=void 0===n?defaultConfig.refreshMode:n,s=e.noPlaceholder,c=void 0===s?defaultConfig.noPlaceholder:s,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"===l||"debounce"===l,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===l?throttle: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)))).state={width:void 0,height:void 0,position:void 0},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 u&&r.height!==i.height||p&&(o.top!==n.top||o.left!==n.left||o.bottom!==n.bottom||o.right!==n.right)||h&&r.width!==i.width},c.checkIfSizeChanged=y(function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,o=t.right,n=t.left,a=t.top,l=t.bottom,s={width:h?r:null,height:u?i:null,position:p?{right:o,left:n,top:a,bottom:l}:null};c.hasSizeChanged(c.strategisedGetState(),s)&&c.strategisedSetState(s)},a),possibleConstructorReturn(c,t)}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode(!0)}},{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&&(this.detector.uninstall(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(e){var t=this.element&&ReactDOM.findDOMNode(this.element);t?(!e&&this.domEl&&this.detector.removeAllListeners(this.domEl),this.domEl=t,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):!e&&this.domEl&&(this.detector.removeAllListeners(this.domEl),this.domEl=null)}},{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:"componentWillReceiveProps",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(i)}},{key:"render",value:function(){var t=this,e=this.SizeAware,r=this.props.children||this.props.render;return React__default.createElement(e,{onSize:function(e){return t.setState({size:e})}},r({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})}};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")),throttle=_interopDefault(require("lodash.throttle")),debounce=_interopDefault(require("lodash.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},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"])),l=(null==o||null==o.width&&null==o.height&&null==o.position)&&!n,s={className:r,style:i};null!=o&&(s.size=o);var c=l?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},s,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,p=void 0===i?defaultConfig.monitorPosition:i,o=e.refreshRate,a=void 0===o?defaultConfig.refreshRate:o,n=e.refreshMode,l=void 0===n?defaultConfig.refreshMode:n,s=e.noPlaceholder,c=void 0===s?defaultConfig.noPlaceholder:s,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"===l||"debounce"===l,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===l?throttle: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)))).state={width:void 0,height:void 0,position:void 0},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 u&&r.height!==i.height||p&&(o.top!==n.top||o.left!==n.left||o.bottom!==n.bottom||o.right!==n.right)||h&&r.width!==i.width},c.checkIfSizeChanged=y(function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,o=t.right,n=t.left,a=t.top,l=t.bottom,s={width:h?r:null,height:u?i:null,position:p?{right:o,left:n,top:a,bottom:l}:null};c.hasSizeChanged(c.strategisedGetState(),s)&&c.strategisedSetState(s)},a),possibleConstructorReturn(c,t)}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode(!0)}},{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&&(this.detector.uninstall(this.domEl),this.domEl=null)}},{key:"handleDOMNode",value:function(e){var t=this.element&&ReactDOM.findDOMNode(this.element);t?(!e&&this.domEl&&this.detector.removeAllListeners(this.domEl),this.domEl=t,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):!e&&this.domEl&&(this.detector.removeAllListeners(this.domEl),this.domEl=null)}},{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:"componentWillReceiveProps",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(i)}},{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.5.1",
+  "version": "2.5.2",
   "description": "Make your React Components aware of their dimensions and position.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -24,3 +24,7 @@ <p align='center'>
 function MyApp() {
-  return <SizeMe>{({ size }) => <div>My width is {size.width}px</div>}</SizeMe>
+  return (
+    <SizeMe>
+      {({ size }) => <div>My width is {size.width}px</div>}
+    </SizeMe>
+  )
 }
@@ -57,3 +61,3 @@ ```
 
-Give your Components the ability to have render logic based on their height/width/position. Responsive design on the Component level. This allows you to create highly reusable components that don't care about where they will be rendered.
+Give your Components the ability to have render logic based on their height and/or width. Responsive design on the Component level. This allows you to create highly reusable components that can adapt to wherever they are rendered.
 
@@ -60,0 +64,0 @@ Check out a working demo here: https://react-sizeme.now.sh

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

82675

increased by0.13%

Lines of code

530

increased by0.19%

Number of lines in readme file

290

increased by1.4%

No dependency changes