react-css-collapse - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

CHANGELOG.md

 # Changelog
 
+# 3.4.0
+> August 31, 2018
+* :tada: **Enhancement** Handle the style changes manually when React can just do this as part of its rendering. Moved the style properties to the state and just uses setState to update them. Changed the test so the actual component styles are checked when they are updated.
+* :tada: **Enhancement** PureComponent is more efficient than Component so changed it to that
+* :tada: **Enhancement** Added a default className — would be nice not to have to pass one if you just want to use the default
+* :bug: **Bugfix** All Component constructors should pass the props through to the super
+
 # 3.3.2
@@ -4,0 +11,0 @@ > July 05, 2018

lib/components/Collapse.js

@@ -29,16 +29,9 @@ 'use strict';
 
-var initialStyle = {
-  willChange: 'height',
-  height: '0px',
-  overflow: 'hidden',
-  visibility: 'hidden'
-};
+var Collapse = function (_PureComponent) {
+  _inherits(Collapse, _PureComponent);
 
-var Collapse = function (_Component) {
-  _inherits(Collapse, _Component);
-
-  function Collapse() {
+  function Collapse(props) {
     _classCallCheck(this, Collapse);
 
-    var _this = _possibleConstructorReturn(this, (Collapse.__proto__ || Object.getPrototypeOf(Collapse)).call(this));
+    var _this = _possibleConstructorReturn(this, (Collapse.__proto__ || Object.getPrototypeOf(Collapse)).call(this, props));
 
@@ -48,2 +41,9 @@ _this.onTransitionEnd = _this.onTransitionEnd.bind(_this);
     _this.setCollapsed = _this.setCollapsed.bind(_this);
+
+    _this.state = {
+      willChange: 'height',
+      height: '0',
+      overflow: 'hidden',
+      visibility: 'hidden'
+    };
     return _this;
@@ -71,4 +71,6 @@ }
         // have the element transition to the height of its inner content
-        this.setContentStyleProperty('height', this.content.scrollHeight + 'px');
-        this.setContentStyleProperty('visibility', 'visible');
+        this.setState({
+          height: this.content.scrollHeight + 'px',
+          visibility: 'visible'
+        });
       }
@@ -80,3 +82,3 @@
         // aren't transitioning out of 'auto'
-        this.setContentStyleProperty('height', this.content.scrollHeight + 'px');
+        this.setState({ height: this.content.scrollHeight + 'px' });
         _util2.default.requestAnimationFrame(function () {
@@ -86,5 +88,7 @@ // "pausing" the JavaScript execution to let the rendering threads catch up
           setTimeout(function () {
-            _this2.setContentStyleProperty('height', '0px');
-            _this2.setContentStyleProperty('overflow', 'hidden');
-          }, 0);
+            _this2.setState({
+              height: '0',
+              overflow: 'hidden'
+            });
+          });
         });
@@ -113,12 +117,5 @@ }
   }, {
-    key: 'setContentStyleProperty',
-    value: function setContentStyleProperty(property, value) {
-      if (this.content) {
-        this.content.style[property] = value;
-      }
-    }
-  }, {
     key: 'setCollapsed',
     value: function setCollapsed() {
-      this.setContentStyleProperty('visibility', 'hidden');
+      this.setState({ visibility: 'hidden' });
     }
@@ -128,5 +125,7 @@ }, {
     value: function setExpanded() {
-      this.setContentStyleProperty('height', 'auto');
-      this.setContentStyleProperty('overflow', 'visible');
-      this.setContentStyleProperty('visibility', 'visible');
+      this.setState({
+        height: 'auto',
+        overflow: 'visible',
+        visibility: 'visible'
+      });
     }
@@ -144,3 +143,3 @@ }, {
           },
-          style: initialStyle,
+          style: this.state,
           className: this.props.className,
@@ -155,7 +154,9 @@ onTransitionEnd: this.onTransitionEnd
   return Collapse;
-}(_react.Component);
+}(_react.PureComponent);
 
+Collapse.displayName = 'Collapse';
+
 Collapse.defaultProps = {
   isOpen: false,
-  className: null,
+  className: 'react-css-collapse-transition',
   children: null,
@@ -162,0 +163,0 @@ onRest: null

package.json

 {
   "name": "react-css-collapse",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Component-wrapper for collapse animation with css for elements with variable and dynamic height",
-  "authors": [
-    "Torleif Halseth",
-    "Håkon Nilsen",
-    "Eirik Årdal",
-    "Daniel Selvik",
-    "Tony Hopland",
-    "Matt Shwery"
+  "author": {
+    "name": "Torleif Halseth",
+    "email": "[e-mail]"
+  },
+  "contributors": [
+    {
+      "name": "Tony Hopland"
+    },
+    {
+      "name": "Daniel Selvik"
+    },
+    {
+      "name": "Matt Shwery"
+    },
+    {
+      "name": "Nawal Deshi Rahim"
+    }
   ],
@@ -13,0 +23,0 @@ "license": "MIT",

README.md

@@ -48,3 +48,3 @@ # react-css-collapse
 
-You can specify a className with your desired style and animation
+You can specify a className with your desired style and animation. By default `react-css-collapse-transition` will be added to the component.
 
@@ -51,0 +51,0 @@ ```scss

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38799

increased by0.71%

Number of low maintenance alerts

1

decreased by-50%

No dependency changes