react-with-animation - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

dist/bundle.js

@@ -10,3 +10,11 @@ 'use strict';
 
-const propTypes = {
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var propTypes = {
     animationClasses: PropTypes.string.isRequired,
@@ -17,3 +25,3 @@ animationDuration: PropTypes.number,
 
-const defaultProps = {
+var defaultProps = {
     animateOnFirstRender: false,
@@ -24,55 +32,79 @@ animationDuration: 3000
 function withAnimation(WrappedComponent) {
-    class ComponentWithAnimation extends React.Component {
-        constructor() {
-            super();
-            this.state = {
+    var ComponentWithAnimation = function (_React$Component) {
+        _inherits(ComponentWithAnimation, _React$Component);
+
+        function ComponentWithAnimation() {
+            _classCallCheck(this, ComponentWithAnimation);
+
+            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this));
+
+            _this.state = {
                 isAnimating: false
             };
-            this.timeoutFunc = null;
-            this.startAnimation = this.startAnimation.bind(this);
+            _this.timeoutFunc = null;
+            _this.startAnimation = _this.startAnimation.bind(_this);
+            return _this;
         }
 
-        componentWillUnmount() {
-            clearTimeout(this.timeoutFunc);
-        }
+        _createClass(ComponentWithAnimation, [{
+            key: 'componentWillUnmount',
+            value: function componentWillUnmount() {
+                clearTimeout(this.timeoutFunc);
+            }
+        }, {
+            key: 'componentWillMount',
+            value: function componentWillMount() {
+                if (this.props.animateOnFirstRender) {
+                    this.startAnimation();
+                }
+            }
+        }, {
+            key: 'startAnimation',
+            value: function startAnimation() {
+                var _this2 = this;
 
-        componentWillMount() {
-            if (this.props.animateOnFirstRender) {
-                this.startAnimation();
+                if (this.state.isAnimating) {
+                    return;
+                }
+                var animationDuration = this.props.animationDuration;
+
+                clearTimeout(this.timeoutFunc);
+
+                this.setState({ isAnimating: true });
+
+                this.timeoutFunc = setTimeout(function () {
+                    _this2.setState({ isAnimating: false });
+                }, animationDuration);
             }
-        }
+        }, {
+            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;
 
-        startAnimation() {
-            if (this.state.isAnimating) {
-                return;
+                var classes = (className ? className : '') + ' ' + (isAnimating && animationClasses ? animationClasses : '');
+                var componentProps = _extends({}, this.props, {
+                    style: _extends({}, style, {
+                        animationDuration: isAnimating ? animationDuration + 'ms' : null
+                    }),
+                    className: classes,
+                    ref: wrappedRef
+                });
+                return React.createElement(
+                    WrappedComponent,
+                    componentProps,
+                    children
+                );
             }
-            const { animationDuration } = this.props;
-            clearTimeout(this.timeoutFunc);
+        }]);
 
-            this.setState({ isAnimating: true });
+        return ComponentWithAnimation;
+    }(React.Component);
 
-            this.timeoutFunc = setTimeout(() => {
-                this.setState({ isAnimating: false });
-            }, animationDuration);
-        }
-
-        render() {
-            const { isAnimating } = this.state;
-            const { animationClasses, animationDuration, children, wrappedRef, className, style } = this.props;
-            const classes = `${className ? className : ''} ${isAnimating && animationClasses ? animationClasses : ''}`;
-            const componentProps = _extends({}, this.props, {
-                style: _extends({}, style, {
-                    animationDuration: isAnimating ? `${animationDuration}ms` : null
-                }),
-                className: classes,
-                ref: wrappedRef
-            });
-            return React.createElement(
-                WrappedComponent,
-                componentProps,
-                children
-            );
-        }
-    }
-
     ComponentWithAnimation.propTypes = propTypes;
@@ -79,0 +111,0 @@ ComponentWithAnimation.defaultProps = defaultProps;

dist/module.js

@@ -6,3 +6,11 @@ import PropTypes from 'prop-types';
 
-const propTypes = {
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var propTypes = {
     animationClasses: PropTypes.string.isRequired,
@@ -13,3 +21,3 @@ animationDuration: PropTypes.number,
 
-const defaultProps = {
+var defaultProps = {
     animateOnFirstRender: false,
@@ -20,55 +28,79 @@ animationDuration: 3000
 function withAnimation(WrappedComponent) {
-    class ComponentWithAnimation extends React.Component {
-        constructor() {
-            super();
-            this.state = {
+    var ComponentWithAnimation = function (_React$Component) {
+        _inherits(ComponentWithAnimation, _React$Component);
+
+        function ComponentWithAnimation() {
+            _classCallCheck(this, ComponentWithAnimation);
+
+            var _this = _possibleConstructorReturn(this, (ComponentWithAnimation.__proto__ || Object.getPrototypeOf(ComponentWithAnimation)).call(this));
+
+            _this.state = {
                 isAnimating: false
             };
-            this.timeoutFunc = null;
-            this.startAnimation = this.startAnimation.bind(this);
+            _this.timeoutFunc = null;
+            _this.startAnimation = _this.startAnimation.bind(_this);
+            return _this;
         }
 
-        componentWillUnmount() {
-            clearTimeout(this.timeoutFunc);
-        }
+        _createClass(ComponentWithAnimation, [{
+            key: 'componentWillUnmount',
+            value: function componentWillUnmount() {
+                clearTimeout(this.timeoutFunc);
+            }
+        }, {
+            key: 'componentWillMount',
+            value: function componentWillMount() {
+                if (this.props.animateOnFirstRender) {
+                    this.startAnimation();
+                }
+            }
+        }, {
+            key: 'startAnimation',
+            value: function startAnimation() {
+                var _this2 = this;
 
-        componentWillMount() {
-            if (this.props.animateOnFirstRender) {
-                this.startAnimation();
+                if (this.state.isAnimating) {
+                    return;
+                }
+                var animationDuration = this.props.animationDuration;
+
+                clearTimeout(this.timeoutFunc);
+
+                this.setState({ isAnimating: true });
+
+                this.timeoutFunc = setTimeout(function () {
+                    _this2.setState({ isAnimating: false });
+                }, animationDuration);
             }
-        }
+        }, {
+            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;
 
-        startAnimation() {
-            if (this.state.isAnimating) {
-                return;
+                var classes = (className ? className : '') + ' ' + (isAnimating && animationClasses ? animationClasses : '');
+                var componentProps = _extends({}, this.props, {
+                    style: _extends({}, style, {
+                        animationDuration: isAnimating ? animationDuration + 'ms' : null
+                    }),
+                    className: classes,
+                    ref: wrappedRef
+                });
+                return React.createElement(
+                    WrappedComponent,
+                    componentProps,
+                    children
+                );
             }
-            const { animationDuration } = this.props;
-            clearTimeout(this.timeoutFunc);
+        }]);
 
-            this.setState({ isAnimating: true });
+        return ComponentWithAnimation;
+    }(React.Component);
 
-            this.timeoutFunc = setTimeout(() => {
-                this.setState({ isAnimating: false });
-            }, animationDuration);
-        }
-
-        render() {
-            const { isAnimating } = this.state;
-            const { animationClasses, animationDuration, children, wrappedRef, className, style } = this.props;
-            const classes = `${className ? className : ''} ${isAnimating && animationClasses ? animationClasses : ''}`;
-            const componentProps = _extends({}, this.props, {
-                style: _extends({}, style, {
-                    animationDuration: isAnimating ? `${animationDuration}ms` : null
-                }),
-                className: classes,
-                ref: wrappedRef
-            });
-            return React.createElement(
-                WrappedComponent,
-                componentProps,
-                children
-            );
-        }
-    }
-
     ComponentWithAnimation.propTypes = propTypes;
@@ -75,0 +107,0 @@ ComponentWithAnimation.defaultProps = defaultProps;

package.json

 {
   "name": "react-with-animation",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A higher-order-component (HOC) to manage short-lived CSS animations in react",
@@ -29,5 +29,6 @@ "main": "dist/bundle.js",
     "babel-core": "^6.26.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-stage-1": "^6.24.1",
     "rollup": "^0.53.2",
@@ -34,0 +35,0 @@ "rollup-plugin-babel": "^3.0.3"

rollup.config.js

@@ -21,6 +21,15 @@ import babel from 'rollup-plugin-babel';
             exclude: ['node_modules/**'],
-            presets: ['babel-preset-react'],
             plugins: ['transform-object-rest-spread'],
+            presets: [
+                'react',
+                [
+                    'env',
+                    {
+                        modules: false,
+                    },
+                ],
+                'stage-1',
+            ],
         }),
     ],
 };

No alert changes

Improved metrics

Total package byte prevSize

18101

increased by42.48%

Lines of code

339

increased by21.94%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes