react-measure - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

bower.json

 {
   "name": "react-measure",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/souporserious/react-measure",
@@ -5,0 +5,0 @@ "authors": [

dist/react-measure.js

@@ -122,4 +122,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	      // remove component and portal since we no longer need it
-	      _react2['default'].unmountComponentAtNode(_this._portal);
+	      // remove portal since we no longer need it
 	      _this._closePortal();
@@ -170,2 +169,3 @@ };
 	    value: function _closePortal() {
+	      _react2['default'].unmountComponentAtNode(this._portal);
 	      this._portal.parentNode.removeChild(this._portal);
@@ -176,5 +176,7 @@ }
 	    value: function _cloneComponent() {
+	      var forceAutoHeight = this.props.forceAutoHeight;
+
 	      var onMount = this._cloneMounted;
 	      var clone = (0, _react.cloneElement)(this.props.children);
-	      var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount }, clone);
+	      var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount, forceAutoHeight: forceAutoHeight }, clone);
 
@@ -214,2 +216,3 @@ // create a portal to append clone to
 	      clone: _react.PropTypes.bool,
+	      forceAutoHeight: _react.PropTypes.bool,
 	      whitelist: _react.PropTypes.array,
@@ -224,2 +227,3 @@ blacklist: _react.PropTypes.array,
 	      clone: false,
+	      forceAutoHeight: false,
 	      blacklist: [],
@@ -287,2 +291,10 @@ onChange: function onChange() {
 
+	      if (this.props.forceAutoHeight) {
+	        var family = node.getElementsByTagName('*');
+
+	        for (var i = family.length; i--;) {
+	          family[i].style.height = 'auto';
+	        }
+	      }
+
 	      // fire a callback to let Measure know our dimensions
@@ -289,0 +301,0 @@ this.props.onMount((0, _getNodeDimensions2['default'])(node, true));

dist/react-measure.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){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="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},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("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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(3),c=n(p),f=o(4),d=n(f),Measure=function(e){function Measure(){var e=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(t){return e.props.blacklist.indexOf(t)<0}),this._portal=null,this._lastDimensions={},this._cloneMounted=function(t){e._update(t),s["default"].unmountComponentAtNode(e._portal),e._closePortal()}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){this._node=s["default"].findDOMNode(this),this.props.clone?this._cloneComponent():this._update(d["default"](this._node))}},{key:"componentDidUpdate",value:function(){this.props.clone&&this._node.parentNode?this._cloneComponent():this._update(d["default"](this._node))}},{key:"_openPortal",value:function(){var e=document.createElement("div");e.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ",this._portal=e,this._node.parentNode.insertBefore(e,this._node.nextSibling)}},{key:"_closePortal",value:function(){this._portal.parentNode.removeChild(this._portal)}},{key:"_cloneComponent",value:function(){var e=this._cloneMounted,t=a.cloneElement(this.props.children),o=s["default"].createElement(c["default"],{onMount:e},t);this._openPortal(),s["default"].render(o,this._portal)}},{key:"_update",value:function(e){var t=this;this._properties.forEach(function(o){return e[o]!==t._lastDimensions[o]?(t.props.onChange(e),void(t._lastDimensions=e)):void 0})}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{clone:a.PropTypes.bool,whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{clone:!1,blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},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("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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(4),c=n(p),f=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=s["default"].findDOMNode(this);this.props.onMount(c["default"](e,!0))}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=f,e.exports=t["default"]},function(e,t){"use strict";function o(e){var t=void 0===arguments[1]?!1:arguments[1];t&&(e.style.width="auto",e.style.height="auto",e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)");var o=e.getBoundingClientRect();return{width:o.width,height:o.height,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){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="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},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("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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(3),c=n(p),f=o(4),d=n(f),Measure=function(e){function Measure(){var e=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(t){return e.props.blacklist.indexOf(t)<0}),this._portal=null,this._lastDimensions={},this._cloneMounted=function(t){e._update(t),e._closePortal()}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){this._node=s["default"].findDOMNode(this),this.props.clone?this._cloneComponent():this._update(d["default"](this._node))}},{key:"componentDidUpdate",value:function(){this.props.clone&&this._node.parentNode?this._cloneComponent():this._update(d["default"](this._node))}},{key:"_openPortal",value:function(){var e=document.createElement("div");e.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ",this._portal=e,this._node.parentNode.insertBefore(e,this._node.nextSibling)}},{key:"_closePortal",value:function(){s["default"].unmountComponentAtNode(this._portal),this._portal.parentNode.removeChild(this._portal)}},{key:"_cloneComponent",value:function(){var e=this.props.forceAutoHeight,t=this._cloneMounted,o=a.cloneElement(this.props.children),n=s["default"].createElement(c["default"],{onMount:t,forceAutoHeight:e},o);this._openPortal(),s["default"].render(n,this._portal)}},{key:"_update",value:function(e){var t=this;this._properties.forEach(function(o){return e[o]!==t._lastDimensions[o]?(t.props.onChange(e),void(t._lastDimensions=e)):void 0})}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{clone:a.PropTypes.bool,forceAutoHeight:a.PropTypes.bool,whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{clone:!1,forceAutoHeight:!1,blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},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("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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(4),c=n(p),f=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=s["default"].findDOMNode(this);if(this.props.forceAutoHeight)for(var t=e.getElementsByTagName("*"),o=t.length;o--;)t[o].style.height="auto";this.props.onMount(c["default"](e,!0))}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=f,e.exports=t["default"]},function(e,t){"use strict";function o(e){var t=void 0===arguments[1]?!1:arguments[1];t&&(e.style.width="auto",e.style.height="auto",e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)");var o=e.getBoundingClientRect();return{width:o.width,height:o.height,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]}])});

example/index.jsx

@@ -1,7 +0,76 @@
-import React, { Component, Children, PropTypes } from 'react';
-import { Spring } from 'react-motion';
-import Measure from '../src/react-measure';
+import React, { Component, Children, PropTypes } from 'react'
+import { Spring } from 'react-motion'
+import Measure from '../src/react-measure'
+import Slideable from './Slideable'
 
 import './main.scss';
 
+class SlideableDemo extends Component {
+  constructor() {
+    super();
+    this._handleToggle = this._handleToggle.bind(this);
+    this.state = {toggle: true}
+  }
+  
+  _handleToggle() {
+    this.setState({toggle: !this.state.toggle});
+  }
+
+  render() {
+    return(
+      <div>
+        <button onClick={this._handleToggle}>Toggle</button>
+        <Slideable
+          toggle={this.state.toggle}
+          style={{
+            background: '#b4da55'
+          }}
+        >
+          <div
+            style={{
+              padding: '32px 28px'
+            }}
+          >
+            <h3>Sam L Jackson</h3>
+            <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
+          </div>
+        </Slideable>
+      
+        <Slideable
+          forceAutoHeight={true}
+          toggle={!this.state.toggle}
+          style={{
+            background: '#DA8355'
+          }}
+        >
+          <div
+            style={{
+              padding: '6px 28px'
+            }}
+          >
+            <h3>Sam L Jackson</h3>
+            <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
+            <Slideable
+              toggle={!this.state.toggle}
+              style={{
+                background: '#DA5555'
+              }}
+            >
+              <div
+                style={{
+                  padding: '6px 28px'
+                }}
+              >
+                <h3>Sam L Jackson</h3>
+                <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
+              </div>
+            </Slideable>
+          </div>
+        </Slideable>
+      </div>
+    );
+  }
+}
+
+
 class AccordionContent extends Component {
@@ -104,2 +173,3 @@ state = {
         />
+        <SlideableDemo />
       </div>
@@ -106,0 +176,0 @@ );

lib/Measure.js

@@ -49,4 +49,3 @@ 'use strict';
 
-      // remove component and portal since we no longer need it
-      _react2['default'].unmountComponentAtNode(_this._portal);
+      // remove portal since we no longer need it
       _this._closePortal();
@@ -95,2 +94,3 @@ };
     value: function _closePortal() {
+      _react2['default'].unmountComponentAtNode(this._portal);
       this._portal.parentNode.removeChild(this._portal);
@@ -101,5 +101,7 @@ }
     value: function _cloneComponent() {
+      var forceAutoHeight = this.props.forceAutoHeight;
+
       var onMount = this._cloneMounted;
       var clone = (0, _react.cloneElement)(this.props.children);
-      var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount }, clone);
+      var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount, forceAutoHeight: forceAutoHeight }, clone);
 
@@ -139,2 +141,3 @@ // create a portal to append clone to
       clone: _react.PropTypes.bool,
+      forceAutoHeight: _react.PropTypes.bool,
       whitelist: _react.PropTypes.array,
@@ -149,2 +152,3 @@ blacklist: _react.PropTypes.array,
       clone: false,
+      forceAutoHeight: false,
       blacklist: [],
@@ -151,0 +155,0 @@ onChange: function onChange() {

lib/MeasureChild.js

@@ -39,2 +39,10 @@ 'use strict';
 
+      if (this.props.forceAutoHeight) {
+        var family = node.getElementsByTagName('*');
+
+        for (var i = family.length; i--;) {
+          family[i].style.height = 'auto';
+        }
+      }
+
       // fire a callback to let Measure know our dimensions
@@ -41,0 +49,0 @@ this.props.onMount((0, _getNodeDimensions2['default'])(node, true));

package.json

 {
   "name": "react-measure",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Compute measurements of React components.",
@@ -5,0 +5,0 @@ "main": "lib/react-measure.js",

README.md

@@ -1,2 +0,2 @@
-## React Measure 0.1.2
+## React Measure 0.1.3
 
@@ -11,3 +11,3 @@ Compute measurements of React components.
 
-## Example using ES6 & Babel Stage 0
+## Example Usage
 
@@ -28,2 +28,3 @@ ```javascript
         clone={true}
+        forceAutoHeight={true}
         whitelist={['width', 'height']}
@@ -66,5 +67,10 @@ blacklist={['top', 'left']}
 ## CHANGELOG
+### 0.1.3
+Added `forceAutoHeight` prop to help with proper height calculation when children heights are animating
+
 ### 0.1.2
 Clone prop now exposed to allow optional cloning of component
 
+Defaults to false which could potentially break components relying on cloned calculations
+
 ### 0.1.1
@@ -71,0 +77,0 @@ Set width/height to auto on clone no matter what to get a true dimension

src/Measure.jsx

@@ -8,2 +8,3 @@ import React, { Component, Children, PropTypes, cloneElement } from 'react'
     clone: PropTypes.bool,
+    forceAutoHeight: PropTypes.bool,
     whitelist: PropTypes.array,
@@ -15,2 +16,3 @@ blacklist: PropTypes.array,
     clone: false,
+    forceAutoHeight: false,
     blacklist: [],
@@ -62,3 +64,4 @@ onChange: () => null
   _closePortal() {
-    this._portal.parentNode.removeChild(this._portal);
+    React.unmountComponentAtNode(this._portal)
+    this._portal.parentNode.removeChild(this._portal)
   }
@@ -69,4 +72,3 @@
 
-    // remove component and portal since we no longer need it
-    React.unmountComponentAtNode(this._portal)
+    // remove portal since we no longer need it
     this._closePortal()
@@ -76,5 +78,6 @@ }
   _cloneComponent() {
+    const { forceAutoHeight } = this.props
     const onMount = this._cloneMounted
     const clone = cloneElement(this.props.children)
-    const child = React.createElement(MeasureChild, {onMount}, clone)
+    const child = React.createElement(MeasureChild, {onMount, forceAutoHeight}, clone)
 
@@ -81,0 +84,0 @@ // create a portal to append clone to

src/MeasureChild.jsx

@@ -7,3 +7,11 @@ import React, { Component } from 'react'
     const node = React.findDOMNode(this)
+    
+    if(this.props.forceAutoHeight) {
+      const family = node.getElementsByTagName('*')
 
+      for(let i = family.length; i--;) {
+        family[i].style.height = 'auto'
+      }
+    }
+
     // fire a callback to let Measure know our dimensions
@@ -10,0 +18,0 @@ this.props.onMount(getNodeDimensions(node, true))

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

48692

increased by12.66%

Number of package files

21

increased by5%

Lines of code

923

increased by19.56%

Number of lines in readme file

83

increased by7.79%

No dependency changes