react-slidedown - npm Package Compare versions

Comparing version 1.4.0 to 2.0.0

lib/slidedown.js

@@ -5,30 +5,29 @@ "use strict";
 var react_1 = tslib_1.__importDefault(require("react"));
-var react_lifecycles_compat_1 = require("react-lifecycles-compat");
 var TransitionGroup_1 = tslib_1.__importDefault(require("./TransitionGroup/TransitionGroup"));
 var SlideDownContent = (function (_super) {
     tslib_1.__extends(SlideDownContent, _super);
-    function SlideDownContent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleRef = function (element) {
-            _this.element = element;
-            _this.callbacks = [];
-        };
+    function SlideDownContent(props) {
+        var _this = _super.call(this, props) || this;
         _this.handleTransitionEnd = function (evt) {
-            if ((evt.target === _this.element) && (evt.propertyName === 'height')) {
+            if ((evt.target === _this.outerRef.current) && (evt.propertyName === 'height')) {
                 var callback = _this.callbacks.shift();
                 callback && callback();
                 if (_this.callbacks.length === 0) {
-                    _this.element.classList.remove('transitioning');
-                    _this.element.style.transitionProperty = 'none';
-                    _this.element.style.height = _this.props.closed ? '0px' : 'auto';
-                    if (_this.props.closed)
-                        _this.element.classList.add('closed');
+                    _this.outerRef.current.classList.remove('transitioning');
+                    _this.outerRef.current.style.transitionProperty = 'none';
+                    _this.outerRef.current.style.height = _this.props.closed ? '0px' : 'auto';
+                    if (_this.props.closed) {
+                        _this.outerRef.current.classList.add('closed');
+                    }
                 }
             }
         };
+        _this.outerRef = props.forwardedRef || react_1.default.createRef();
+        _this.callbacks = [];
         return _this;
     }
     SlideDownContent.prototype.componentDidMount = function () {
-        if (this.props.closed)
-            this.element.classList.add('closed');
+        if (this.props.closed) {
+            this.outerRef.current.classList.add('closed');
+        }
     };
@@ -41,3 +40,3 @@ SlideDownContent.prototype.componentWillAppear = function (callback) {
         else {
-            this.element.style.height = this.props.closed ? '0px' : 'auto';
+            this.outerRef.current.style.height = this.props.closed ? '0px' : 'auto';
             callback();
@@ -48,3 +47,3 @@ }
         this.callbacks.push(callback);
-        var prevHeight = this.element.getBoundingClientRect().height + 'px';
+        var prevHeight = this.outerRef.current.getBoundingClientRect().height + 'px';
         this.startTransition(prevHeight);
@@ -54,11 +53,11 @@ };
         this.callbacks.push(callback);
-        this.element.classList.add('transitioning');
-        this.element.style.height = getComputedStyle(this.element).height;
-        this.element.offsetHeight;
-        this.element.style.transitionProperty = 'height';
-        this.element.style.height = '0px';
+        this.outerRef.current.classList.add('transitioning');
+        this.outerRef.current.style.height = getComputedStyle(this.outerRef.current).height;
+        this.outerRef.current.offsetHeight;
+        this.outerRef.current.style.transitionProperty = 'height';
+        this.outerRef.current.style.height = '0px';
     };
     SlideDownContent.prototype.getSnapshotBeforeUpdate = function () {
         if (this.callbacks.length === 0) {
-            return this.element.getBoundingClientRect().height + 'px';
+            return this.outerRef.current.getBoundingClientRect().height + 'px';
         }
@@ -73,3 +72,3 @@ else {
         if (this.callbacks.length === 0) {
-            var prevHeight = snapshot || getComputedStyle(this.element).height;
+            var prevHeight = snapshot || getComputedStyle(this.outerRef.current).height;
             this.startTransition(prevHeight);
@@ -81,12 +80,12 @@ }
         if (!this.props.closed) {
-            this.element.classList.remove('closed');
-            this.element.style.height = 'auto';
-            endHeight = getComputedStyle(this.element).height;
+            this.outerRef.current.classList.remove('closed');
+            this.outerRef.current.style.height = 'auto';
+            endHeight = getComputedStyle(this.outerRef.current).height;
         }
         if (parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
-            this.element.classList.add('transitioning');
-            this.element.style.height = prevHeight;
-            this.element.offsetHeight;
-            this.element.style.transitionProperty = 'height';
-            this.element.style.height = endHeight;
+            this.outerRef.current.classList.add('transitioning');
+            this.outerRef.current.style.height = prevHeight;
+            this.outerRef.current.offsetHeight;
+            this.outerRef.current.style.transitionProperty = 'height';
+            this.outerRef.current.style.height = endHeight;
         }
@@ -97,3 +96,3 @@ };
             'react-slidedown ' + this.props.className : 'react-slidedown';
-        return (react_1.default.createElement("div", { className: className, ref: this.handleRef, onTransitionEnd: this.handleTransitionEnd }, this.props.children));
+        return (react_1.default.createElement("div", { className: className, ref: this.outerRef, onTransitionEnd: this.handleTransitionEnd }, this.props.children));
     };
@@ -110,9 +109,9 @@ SlideDownContent.defaultProps = {
 }
-var SlideDownContentCompat = react_lifecycles_compat_1.polyfill(SlideDownContent);
-function SlideDown(props) {
+function SlideDownComponent(props) {
     var children = props.children, attrs = tslib_1.__rest(props, ["children"]);
     var hasContent = (children && react_1.default.Children.count(children) !== 0);
-    return (react_1.default.createElement(TransitionGroup_1.default, { component: SlideDownWrapper }, hasContent && react_1.default.createElement(SlideDownContentCompat, tslib_1.__assign({ key: 'content' }, attrs), children)));
+    return (react_1.default.createElement(TransitionGroup_1.default, { component: SlideDownWrapper }, hasContent && react_1.default.createElement(SlideDownContent, tslib_1.__assign({ key: 'content' }, attrs), children)));
 }
-exports.SlideDown = SlideDown;
+exports.SlideDown = react_1.default.forwardRef(function (props, ref) { return (react_1.default.createElement(SlideDownComponent, tslib_1.__assign({}, props, { forwardedRef: ref }))); });
+exports.default = exports.SlideDown;
 //# sourceMappingURL=slidedown.js.map

lib/TransitionGroup/TransitionGroup.js

@@ -7,3 +7,2 @@ "use strict";
 var chain_function_1 = tslib_1.__importDefault(require("chain-function"));
-var react_lifecycles_compat_1 = require("react-lifecycles-compat");
 var ChildMapping_1 = require("./ChildMapping");
@@ -181,3 +180,3 @@ var propTypes = {
 TransitionGroup.defaultProps = defaultProps;
-exports.default = react_lifecycles_compat_1.polyfill(TransitionGroup);
+exports.default = TransitionGroup;
 //# sourceMappingURL=TransitionGroup.js.map

package.json

 {
   "name": "react-slidedown",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Component for animating height during mount/unmount using a CSS transition",
@@ -45,8 +45,7 @@ "main": "lib/slidedown.js",
     "prop-types": "^15.6.2",
-    "react-lifecycles-compat": "^3.0.4",
     "tslib": "^1.9.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
@@ -53,0 +52,0 @@ "files": [

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30708

1.46%

Dependency count

5

-16.67%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Lines of code

298

-0.67%

Dependency changes

• - Removed

  react-lifecycles-compat@^3.0.4

• - Removed

  react-lifecycles-compat@3.0.4
  (transitive)