react-slidedown - npm Package Compare versions

Comparing version 2.0.9 to 2.4.0

lib/slidedown.d.ts

@@ -5,6 +5,6 @@ import React from 'react';
     className?: string;
+    closed?: boolean;
     transitionOnAppear?: boolean;
-    closed?: boolean;
 }
 export declare const SlideDown: React.ComponentType<SlideDownProps & React.ClassAttributes<HTMLDivElement>>;
 export default SlideDown;

lib/slidedown.js

@@ -5,3 +5,2 @@ "use strict";
 var react_1 = tslib_1.__importDefault(require("react"));
-var TransitionGroup_1 = tslib_1.__importDefault(require("./TransitionGroup/TransitionGroup"));
 var SlideDownContent = (function (_super) {
@@ -29,49 +28,44 @@ tslib_1.__extends(SlideDownContent, _super);
             if ((evt.target === _this.outerRef) && (evt.propertyName === 'height')) {
-                var callback = _this.callbacks.shift();
-                callback && callback();
-                if (_this.callbacks.length === 0) {
-                    _this.outerRef.classList.remove('transitioning');
-                    _this.outerRef.style.transitionProperty = 'none';
-                    _this.outerRef.style.height = _this.props.closed ? '0px' : 'auto';
-                    if (_this.props.closed) {
-                        _this.outerRef.classList.add('closed');
-                    }
+                if (_this.state.childrenLeaving) {
+                    _this.setState({ children: null, childrenLeaving: false }, function () { return _this.endTransition(); });
                 }
+                else {
+                    _this.endTransition();
+                }
             }
         };
-        _this.callbacks = [];
+        _this.state = {
+            children: props.children,
+            childrenLeaving: false
+        };
         return _this;
     }
     SlideDownContent.prototype.componentDidMount = function () {
-        if (this.props.closed) {
+        if (this.props.closed || !this.props.children) {
             this.outerRef.classList.add('closed');
+            this.outerRef.style.height = '0px';
         }
-    };
-    SlideDownContent.prototype.componentWillAppear = function (callback) {
-        if (this.props.transitionOnAppear) {
-            this.callbacks.push(callback);
+        else if (this.props.transitionOnAppear) {
             this.startTransition('0px');
         }
         else {
-            this.outerRef.style.height = this.props.closed ? '0px' : 'auto';
-            callback();
+            this.outerRef.style.height = 'auto';
         }
     };
-    SlideDownContent.prototype.componentWillEnter = function (callback) {
-        this.callbacks.push(callback);
-        var prevHeight = this.outerRef.getBoundingClientRect().height + 'px';
-        this.startTransition(prevHeight);
+    SlideDownContent.prototype.getSnapshotBeforeUpdate = function () {
+        return this.outerRef.getBoundingClientRect().height + 'px';
     };
-    SlideDownContent.prototype.componentWillLeave = function (callback) {
-        this.callbacks.push(callback);
-        this.outerRef.classList.add('transitioning');
-        this.outerRef.style.height = getComputedStyle(this.outerRef).height;
-        this.outerRef.offsetHeight;
-        this.outerRef.style.transitionProperty = 'height';
-        this.outerRef.style.height = '0px';
-    };
-    SlideDownContent.prototype.getSnapshotBeforeUpdate = function () {
-        if (this.callbacks.length === 0) {
-            return this.outerRef.getBoundingClientRect().height + 'px';
+    SlideDownContent.getDerivedStateFromProps = function (props, state) {
+        if (props.children) {
+            return {
+                children: props.children,
+                childrenLeaving: false
+            };
         }
+        else if (state.children) {
+            return {
+                children: state.children,
+                childrenLeaving: true
+            };
+        }
         else {
@@ -82,12 +76,8 @@ return null;
     SlideDownContent.prototype.componentDidUpdate = function (_prevProps, _prevState, snapshot) {
-        var callback = this.callbacks.shift();
-        callback && callback();
-        if (this.callbacks.length === 0) {
-            var prevHeight = snapshot || getComputedStyle(this.outerRef).height;
-            this.startTransition(prevHeight);
-        }
+        var prevHeight = snapshot;
+        this.startTransition(prevHeight);
     };
     SlideDownContent.prototype.startTransition = function (prevHeight) {
         var endHeight = '0px';
-        if (!this.props.closed) {
+        if (!this.props.closed && !this.state.childrenLeaving && this.state.children) {
             this.outerRef.classList.remove('closed');
@@ -105,6 +95,14 @@ this.outerRef.style.height = 'auto';
     };
+    SlideDownContent.prototype.endTransition = function () {
+        this.outerRef.classList.remove('transitioning');
+        this.outerRef.style.transitionProperty = 'none';
+        this.outerRef.style.height = this.props.closed ? '0px' : 'auto';
+        if (this.props.closed || !this.state.children) {
+            this.outerRef.classList.add('closed');
+        }
+    };
     SlideDownContent.prototype.render = function () {
         var className = this.props.className ?
             '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.handleRef, onTransitionEnd: this.handleTransitionEnd }, this.state.children));
     };
@@ -117,12 +115,4 @@ SlideDownContent.defaultProps = {
 }(react_1.default.Component));
-function TransitionGroupWrapper(props) {
-    var childrenArray = react_1.default.Children.toArray(props.children);
-    return childrenArray[0] || null;
-}
-exports.SlideDown = react_1.default.forwardRef(function (props, ref) {
-    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: TransitionGroupWrapper }, hasContent && react_1.default.createElement(SlideDownContent, tslib_1.__assign({ key: 'content' }, attrs, { forwardedRef: ref }), children)));
-});
+exports.SlideDown = react_1.default.forwardRef(function (props, ref) { return (react_1.default.createElement(SlideDownContent, tslib_1.__assign({}, props, { forwardedRef: ref }))); });
 exports.default = exports.SlideDown;
 //# sourceMappingURL=slidedown.js.map

package.json

 {
   "name": "react-slidedown",
-  "version": "2.0.9",
+  "version": "2.4.0",
   "description": "Component for animating height during mount/unmount using a CSS transition",
@@ -47,3 +47,2 @@ "main": "lib/slidedown.js",
   "dependencies": {
-    "chain-function": "^1.0.1",
     "tslib": "^1.9.0"
@@ -59,4 +58,3 @@ },
     "lib/**/*.css",
-    "lib/**/*.d.ts",
-    "lib/**/LICENSE"
+    "lib/**/*.d.ts"
   ],
@@ -63,0 +61,0 @@ "repository": "frankwallis/react-slidedown",

README.md

@@ -0,0 +0,0 @@ react-slidedown

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

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

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

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Number of low license alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

14203

decreased by-60.13%

Number of package files

6

decreased by-53.85%

Lines of code

132

decreased by-66.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedchain-function@^1.0.1

• - Removedchain-function@1.0.1(transitive)