react-with-animation - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/bundle.js

@@ -36,6 +36,6 @@ 'use strict';
 
-        function ComponentWithAnimation() {
+        function ComponentWithAnimation(props) {
             _classCallCheck(this, ComponentWithAnimation);
 
-            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this));
+            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this, props));
 
@@ -47,2 +47,6 @@ _this.state = {
             _this.startAnimation = _this.startAnimation.bind(_this);
+            _this.computeStyle = _this.computeStyle.bind(_this);
+            _this.setAnimationState = _this.setAnimationState.bind(_this);
+            _this.shouldRecomputeStyle = _this.shouldRecomputeStyle.bind(_this);
+            _this.computeStyle(props.style, _this.state.isAnimating, props.animationDuration);
             return _this;
@@ -64,2 +68,20 @@ }
         }, {
+            key: 'componentWillReceiveProps',
+            value: function componentWillReceiveProps(nextProps) {
+                var _props = this.props,
+                    style = _props.style,
+                    animationDuration = _props.animationDuration;
+                var isAnimating = this.state.isAnimating;
+
+                if (this.shouldRecomputeStyle(this.props, nextProps)) {
+                    this.computeStyle(nextProps.style, isAnimating, nextProps.animationDuration);
+                }
+            }
+        }, {
+            key: 'setAnimationState',
+            value: function setAnimationState(isAnimating) {
+                this.computeStyle(this.props.style, isAnimating, this.props.animationDuration);
+                this.setState({ isAnimating: isAnimating });
+            }
+        }, {
             key: 'startAnimation',
@@ -76,19 +98,38 @@ value: function startAnimation() {
 
-                this.setState({ isAnimating: true });
+                this.setAnimationState(true);
 
                 this.timeoutFunc = setTimeout(function () {
-                    _this2.setState({ isAnimating: false });
+                    _this2.setAnimationState(false);
                 }, animationDuration);
             }
         }, {
+            key: 'computeStyle',
+            value: function computeStyle(style, isAnimating, animationDuration) {
+                this.style = _extends({}, style, {
+                    animationDuration: isAnimating ? animationDuration + 'ms' : null
+                });
+            }
+        }, {
+            key: 'shouldRecomputeStyle',
+            value: function shouldRecomputeStyle(currentProps, nextProps) {
+                if (nextProps.animationDuration !== currentProps.animationDuration) {
+                    return true;
+                }
+
+                if (nextProps.style !== currentProps.style) {
+                    return true;
+                }
+
+                return false;
+            }
+        }, {
             key: 'render',
             value: function render() {
                 var isAnimating = this.state.isAnimating;
-                var _props = this.props,
-                    animationClasses = _props.animationClasses,
-                    animationDuration = _props.animationDuration,
-                    children = _props.children,
-                    wrappedRef = _props.wrappedRef,
-                    className = _props.className,
-                    style = _props.style;
+                var _props2 = this.props,
+                    animationClasses = _props2.animationClasses,
+                    animationDuration = _props2.animationDuration,
+                    children = _props2.children,
+                    wrappedRef = _props2.wrappedRef,
+                    className = _props2.className;
 
@@ -98,5 +139,3 @@ var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
                 var componentProps = _extends({}, this.props, {
-                    style: _extends({}, style, {
-                        animationDuration: isAnimating ? animationDuration + 'ms' : null
-                    }),
+                    style: this.style,
                     className: classes,
@@ -103,0 +142,0 @@ ref: wrappedRef

dist/module.js

@@ -29,6 +29,6 @@ import PropTypes from 'prop-types';
 
-        function ComponentWithAnimation() {
+        function ComponentWithAnimation(props) {
             _classCallCheck(this, ComponentWithAnimation);
 
-            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this));
+            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this, props));
 
@@ -40,2 +40,6 @@ _this.state = {
             _this.startAnimation = _this.startAnimation.bind(_this);
+            _this.computeStyle = _this.computeStyle.bind(_this);
+            _this.setAnimationState = _this.setAnimationState.bind(_this);
+            _this.shouldRecomputeStyle = _this.shouldRecomputeStyle.bind(_this);
+            _this.computeStyle(props.style, _this.state.isAnimating, props.animationDuration);
             return _this;
@@ -57,2 +61,20 @@ }
         }, {
+            key: 'componentWillReceiveProps',
+            value: function componentWillReceiveProps(nextProps) {
+                var _props = this.props,
+                    style = _props.style,
+                    animationDuration = _props.animationDuration;
+                var isAnimating = this.state.isAnimating;
+
+                if (this.shouldRecomputeStyle(this.props, nextProps)) {
+                    this.computeStyle(nextProps.style, isAnimating, nextProps.animationDuration);
+                }
+            }
+        }, {
+            key: 'setAnimationState',
+            value: function setAnimationState(isAnimating) {
+                this.computeStyle(this.props.style, isAnimating, this.props.animationDuration);
+                this.setState({ isAnimating: isAnimating });
+            }
+        }, {
             key: 'startAnimation',
@@ -69,19 +91,38 @@ value: function startAnimation() {
 
-                this.setState({ isAnimating: true });
+                this.setAnimationState(true);
 
                 this.timeoutFunc = setTimeout(function () {
-                    _this2.setState({ isAnimating: false });
+                    _this2.setAnimationState(false);
                 }, animationDuration);
             }
         }, {
+            key: 'computeStyle',
+            value: function computeStyle(style, isAnimating, animationDuration) {
+                this.style = _extends({}, style, {
+                    animationDuration: isAnimating ? animationDuration + 'ms' : null
+                });
+            }
+        }, {
+            key: 'shouldRecomputeStyle',
+            value: function shouldRecomputeStyle(currentProps, nextProps) {
+                if (nextProps.animationDuration !== currentProps.animationDuration) {
+                    return true;
+                }
+
+                if (nextProps.style !== currentProps.style) {
+                    return true;
+                }
+
+                return false;
+            }
+        }, {
             key: 'render',
             value: function render() {
                 var isAnimating = this.state.isAnimating;
-                var _props = this.props,
-                    animationClasses = _props.animationClasses,
-                    animationDuration = _props.animationDuration,
-                    children = _props.children,
-                    wrappedRef = _props.wrappedRef,
-                    className = _props.className,
-                    style = _props.style;
+                var _props2 = this.props,
+                    animationClasses = _props2.animationClasses,
+                    animationDuration = _props2.animationDuration,
+                    children = _props2.children,
+                    wrappedRef = _props2.wrappedRef,
+                    className = _props2.className;
 
@@ -91,5 +132,3 @@ var classes = [].concat(className ? [className] : []).concat(isAnimating && animationClasses ? [animationClasses] : []).join(' ');
                 var componentProps = _extends({}, this.props, {
-                    style: _extends({}, style, {
-                        animationDuration: isAnimating ? animationDuration + 'ms' : null
-                    }),
+                    style: this.style,
                     className: classes,
@@ -96,0 +135,0 @@ ref: wrappedRef

package.json

 {
     "name": "react-with-animation",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "A higher-order-component (HOC) to manage short-lived CSS animations in react",
@@ -37,3 +37,3 @@ "main": "dist/bundle.js",
     "peerDependencies": {
-        "react": "^15.3.0 || 16.2.0"
+        "react": "^15.3.0 || ^16.2.0"
     },
@@ -40,0 +40,0 @@ "dependencies": {

src/hoc/index.js

@@ -17,4 +17,4 @@ import PropTypes from 'prop-types';
     class ComponentWithAnimation extends Component {
-        constructor() {
-            super();
+        constructor(props) {
+            super(props);
             this.state = {
@@ -25,2 +25,6 @@ isAnimating: false,
             this.startAnimation = this.startAnimation.bind(this);
+            this.computeStyle = this.computeStyle.bind(this);
+            this.setAnimationState = this.setAnimationState.bind(this);
+            this.shouldRecomputeStyle = this.shouldRecomputeStyle.bind(this);
+            this.computeStyle(props.style, this.state.isAnimating, props.animationDuration);
         }
@@ -38,2 +42,15 @@
 
+        componentWillReceiveProps(nextProps) {
+            const { style, animationDuration } = this.props;
+            const { isAnimating } = this.state;
+            if (this.shouldRecomputeStyle(this.props, nextProps)) {
+                this.computeStyle(nextProps.style, isAnimating, nextProps.animationDuration);
+            }
+        }
+
+        setAnimationState(isAnimating) {
+            this.computeStyle(this.props.style, isAnimating, this.props.animationDuration);
+            this.setState({ isAnimating: isAnimating });
+        }
+
         startAnimation() {
@@ -46,12 +63,32 @@ if (this.state.isAnimating) {
 
-            this.setState({ isAnimating: true });
+            this.setAnimationState(true);
 
             this.timeoutFunc = setTimeout(() => {
-                this.setState({ isAnimating: false });
+                this.setAnimationState(false);
             }, animationDuration);
         }
 
+        computeStyle(style, isAnimating, animationDuration) {
+            this.style = {
+                ...style,
+                animationDuration: isAnimating ? `${animationDuration}ms` : null,
+            };
+        }
+
+        shouldRecomputeStyle(currentProps, nextProps) {
+            if (nextProps.animationDuration !== currentProps.animationDuration) {
+                return true;
+            }
+
+            if (nextProps.style !== currentProps.style) {
+                return true;
+            }
+
+            return false;
+        }
+
+
         render() {
             const { isAnimating } = this.state;
-            const { animationClasses, animationDuration, children, wrappedRef, className, style } = this.props;
+            const { animationClasses, animationDuration, children, wrappedRef, className } = this.props;
             const classes = []
@@ -64,6 +101,3 @@ .concat(className ? [className] : [])
                 ...this.props,
-                style: {
-                    ...style,
-                    animationDuration: isAnimating ? `${animationDuration}ms` : null,
-                },
+                style: this.style,
                 className: classes,
@@ -70,0 +104,0 @@ ref: wrappedRef,

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

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

28977

increased by19.11%

Lines of code

435

increased by29.46%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes