react-smooth - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

CHANGELOG.md

@@ -37,4 +37,4 @@ 0.1.17 / 2016-12-02
 ### 0.1.8/0.1.9 / 2016-05-05
-===
-- feat: add onAniamtionStart prop
+==================
+* feat: add onAniamtionStart prop
 
@@ -41,0 +41,0 @@ ### 0.1.7 / 2016-04-21

demo/GroupAnimation/app.js

 import React, { Component } from 'react';
 import ReactDom from 'react-dom';
-import update from 'react/lib/update';
 import { AnimateGroup, configSpring } from 'react-smooth';
@@ -18,7 +17,7 @@
   handleDel(index) {
-    this.setState(update(this.state, {
-      list: {
-        $splice: [[index, 1]],
-      },
-    }));
+    const { list } = this.state;
+
+    this.setState({
+      list: [...list.slice(0, index), ...list.slice(index + 1, list.length)],
+    });
   }
@@ -25,0 +24,0 @@

demo/webpack.config.js

@@ -22,5 +22,2 @@ 'use strict';
   },
-  webpackServer: {
-    hot: true,
-  },
   module: {
@@ -27,0 +24,0 @@ loaders: [

es6/Animate.js

@@ -23,5 +23,5 @@ import _isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
+
 import createAnimateManager from './AnimateManager';
 import pureRender from './PureRender';
-
 import { configEasing } from './easing';
@@ -28,0 +28,0 @@ import configUpdate from './configUpdate';

es6/AnimateGroup.js

@@ -12,3 +12,3 @@ 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; }; }();
 import React, { Component, Children } from 'react';
-import { TransitionGroup as ReactTransitionGroup } from 'react-transition-group';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
 import PropTypes from 'prop-types';
@@ -27,37 +27,29 @@ import AnimateGroupChild from './AnimateGroupChild';
   _createClass(AnimateGroup, [{
-    key: 'wrapChild',
-    value: function wrapChild(child) {
+    key: 'render',
+    value: function render() {
       var _props = this.props,
+          component = _props.component,
+          children = _props.children,
           appear = _props.appear,
-          leave = _props.leave,
-          enter = _props.enter;
+          enter = _props.enter,
+          leave = _props.leave;
 
 
       return React.createElement(
-        AnimateGroupChild,
-        {
-          appear: appear,
-          leave: leave,
-          enter: enter
-        },
-        child
+        TransitionGroup,
+        { component: component },
+        Children.map(children, function (child, index) {
+          return React.createElement(
+            AnimateGroupChild,
+            {
+              appearOptions: appear,
+              enterOptions: enter,
+              leaveOptions: leave,
+              key: 'child-' + index
+            },
+            child
+          );
+        })
       );
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          component = _props2.component,
-          children = _props2.children;
-
-
-      return React.createElement(
-        ReactTransitionGroup,
-        {
-          component: component,
-          childFactory: this.wrapChild.bind(this)
-        },
-        children
-      );
-    }
   }]);
@@ -68,4 +60,5 @@
   appear: PropTypes.object,
+  enter: PropTypes.object,
   leave: PropTypes.object,
-  enter: PropTypes.object,
+
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
@@ -72,0 +65,0 @@ component: PropTypes.any

es6/AnimateGroupChild.js

@@ -0,1 +1,3 @@
+import _isNumber from 'lodash/isNumber';
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -7,2 +9,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -15,5 +19,26 @@
 import React, { Component, Children } from 'react';
+import Transition from 'react-transition-group/Transition';
 import PropTypes from 'prop-types';
+
 import Animate from './Animate';
 
+var parseDurationOfSingleTransition = function parseDurationOfSingleTransition() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var steps = options.steps,
+      duration = options.duration;
+
+
+  if (steps && steps.length) {
+    return steps.reduce(function (result, entry) {
+      return result + (_isNumber(entry.duration) && entry.duration > 0 ? entry.duration : 0);
+    }, 0);
+  }
+
+  if (_isNumber(duration)) {
+    return duration;
+  }
+
+  return 0;
+};
+
 var AnimateGroupChild = (_temp2 = _class = function (_Component) {
@@ -35,2 +60,11 @@ _inherits(AnimateGroupChild, _Component);
       isActive: false
+    }, _this.handleEnter = function (node, isAppearing) {
+      var _this$props = _this.props,
+          appearOptions = _this$props.appearOptions,
+          enterOptions = _this$props.enterOptions;
+
+
+      _this.handleStyleActive(isAppearing ? appearOptions : enterOptions);
+    }, _this.handleExit = function () {
+      _this.handleStyleActive(_this.props.leaveOptions);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -41,8 +75,7 @@ }
     key: 'handleStyleActive',
-    value: function handleStyleActive(style, done) {
+    value: function handleStyleActive(style) {
       if (style) {
         var onAnimationEnd = style.onAnimationEnd ? function () {
           style.onAnimationEnd();
-          done();
-        } : done;
+        } : null;
 
@@ -53,28 +86,41 @@ this.setState(_extends({}, style, {
         }));
-      } else {
-        done();
       }
     }
   }, {
-    key: 'componentWillAppear',
-    value: function componentWillAppear(done) {
-      this.handleStyleActive(this.props.appear, done);
+    key: 'parseTimeout',
+    value: function parseTimeout() {
+      var _props = this.props,
+          appearOptions = _props.appearOptions,
+          enterOptions = _props.enterOptions,
+          leaveOptions = _props.leaveOptions;
+
+
+      return parseDurationOfSingleTransition(appearOptions) + parseDurationOfSingleTransition(enterOptions) + parseDurationOfSingleTransition(leaveOptions);
     }
   }, {
-    key: 'componentWillEnter',
-    value: function componentWillEnter(done) {
-      this.handleStyleActive(this.props.enter, done);
-    }
-  }, {
-    key: 'componentWillLeave',
-    value: function componentWillLeave(done) {
-      this.handleStyleActive(this.props.leave, done);
-    }
-  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
+      var _props2 = this.props,
+          children = _props2.children,
+          appearOptions = _props2.appearOptions,
+          enterOptions = _props2.enterOptions,
+          leaveOptions = _props2.leaveOptions,
+          props = _objectWithoutProperties(_props2, ['children', 'appearOptions', 'enterOptions', 'leaveOptions']);
+
       return React.createElement(
-        Animate,
-        this.state,
-        Children.only(this.props.children)
+        Transition,
+        _extends({}, props, {
+          onEnter: this.handleEnter,
+          onExit: this.handleExit,
+          timeout: this.parseTimeout()
+        }),
+        function (transitionState) {
+          return React.createElement(
+            Animate,
+            _this2.state,
+            Children.only(children)
+          );
+        }
       );
@@ -86,5 +132,5 @@ }
 }(Component), _class.propTypes = {
-  appear: PropTypes.object,
-  leave: PropTypes.object,
-  enter: PropTypes.object,
+  appearOptions: PropTypes.object,
+  enterOptions: PropTypes.object,
+  leaveOptions: PropTypes.object,
   children: PropTypes.element
@@ -91,0 +137,0 @@ }, _temp2);

es6/configUpdate.js

@@ -12,5 +12,5 @@ import _filter from 'lodash/filter';
 import raf, { cancel as caf } from 'raf';
+
 import { getIntersectionKeys, mapObject } from './util';
 
-
 var alpha = function alpha(begin, end, k) {
@@ -17,0 +17,0 @@ return begin + (end - begin) * k;

lib/AnimateGroup.js

@@ -15,4 +15,6 @@ 'use strict';
 
-var _reactTransitionGroup = require('react-transition-group');
+var _TransitionGroup = require('react-transition-group/TransitionGroup');
 
+var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);
+
 var _propTypes = require('prop-types');
@@ -44,37 +46,29 @@
   _createClass(AnimateGroup, [{
-    key: 'wrapChild',
-    value: function wrapChild(child) {
+    key: 'render',
+    value: function render() {
       var _props = this.props,
+          component = _props.component,
+          children = _props.children,
           appear = _props.appear,
-          leave = _props.leave,
-          enter = _props.enter;
+          enter = _props.enter,
+          leave = _props.leave;
 
 
       return _react2.default.createElement(
-        _AnimateGroupChild2.default,
-        {
-          appear: appear,
-          leave: leave,
-          enter: enter
-        },
-        child
+        _TransitionGroup2.default,
+        { component: component },
+        _react.Children.map(children, function (child, index) {
+          return _react2.default.createElement(
+            _AnimateGroupChild2.default,
+            {
+              appearOptions: appear,
+              enterOptions: enter,
+              leaveOptions: leave,
+              key: 'child-' + index
+            },
+            child
+          );
+        })
       );
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props2 = this.props,
-          component = _props2.component,
-          children = _props2.children;
-
-
-      return _react2.default.createElement(
-        _reactTransitionGroup.TransitionGroup,
-        {
-          component: component,
-          childFactory: this.wrapChild.bind(this)
-        },
-        children
-      );
-    }
   }]);
@@ -85,4 +79,5 @@
   appear: _propTypes2.default.object,
+  enter: _propTypes2.default.object,
   leave: _propTypes2.default.object,
-  enter: _propTypes2.default.object,
+
   children: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.element]),
@@ -89,0 +84,0 @@ component: _propTypes2.default.any

lib/AnimateGroupChild.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _isNumber2 = require('lodash/isNumber');
+
+var _isNumber3 = _interopRequireDefault(_isNumber2);
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -18,2 +22,6 @@
 
+var _Transition = require('react-transition-group/Transition');
+
+var _Transition2 = _interopRequireDefault(_Transition);
+
 var _propTypes = require('prop-types');
@@ -29,2 +37,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -36,2 +46,21 @@
 
+var parseDurationOfSingleTransition = function parseDurationOfSingleTransition() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var steps = options.steps,
+      duration = options.duration;
+
+
+  if (steps && steps.length) {
+    return steps.reduce(function (result, entry) {
+      return result + ((0, _isNumber3.default)(entry.duration) && entry.duration > 0 ? entry.duration : 0);
+    }, 0);
+  }
+
+  if ((0, _isNumber3.default)(duration)) {
+    return duration;
+  }
+
+  return 0;
+};
+
 var AnimateGroupChild = (_temp2 = _class = function (_Component) {
@@ -53,2 +82,11 @@ _inherits(AnimateGroupChild, _Component);
       isActive: false
+    }, _this.handleEnter = function (node, isAppearing) {
+      var _this$props = _this.props,
+          appearOptions = _this$props.appearOptions,
+          enterOptions = _this$props.enterOptions;
+
+
+      _this.handleStyleActive(isAppearing ? appearOptions : enterOptions);
+    }, _this.handleExit = function () {
+      _this.handleStyleActive(_this.props.leaveOptions);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -59,8 +97,7 @@ }
     key: 'handleStyleActive',
-    value: function handleStyleActive(style, done) {
+    value: function handleStyleActive(style) {
       if (style) {
         var onAnimationEnd = style.onAnimationEnd ? function () {
           style.onAnimationEnd();
-          done();
-        } : done;
+        } : null;
 
@@ -71,28 +108,41 @@ this.setState(_extends({}, style, {
         }));
-      } else {
-        done();
       }
     }
   }, {
-    key: 'componentWillAppear',
-    value: function componentWillAppear(done) {
-      this.handleStyleActive(this.props.appear, done);
+    key: 'parseTimeout',
+    value: function parseTimeout() {
+      var _props = this.props,
+          appearOptions = _props.appearOptions,
+          enterOptions = _props.enterOptions,
+          leaveOptions = _props.leaveOptions;
+
+
+      return parseDurationOfSingleTransition(appearOptions) + parseDurationOfSingleTransition(enterOptions) + parseDurationOfSingleTransition(leaveOptions);
     }
   }, {
-    key: 'componentWillEnter',
-    value: function componentWillEnter(done) {
-      this.handleStyleActive(this.props.enter, done);
-    }
-  }, {
-    key: 'componentWillLeave',
-    value: function componentWillLeave(done) {
-      this.handleStyleActive(this.props.leave, done);
-    }
-  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
+      var _props2 = this.props,
+          children = _props2.children,
+          appearOptions = _props2.appearOptions,
+          enterOptions = _props2.enterOptions,
+          leaveOptions = _props2.leaveOptions,
+          props = _objectWithoutProperties(_props2, ['children', 'appearOptions', 'enterOptions', 'leaveOptions']);
+
       return _react2.default.createElement(
-        _Animate2.default,
-        this.state,
-        _react.Children.only(this.props.children)
+        _Transition2.default,
+        _extends({}, props, {
+          onEnter: this.handleEnter,
+          onExit: this.handleExit,
+          timeout: this.parseTimeout()
+        }),
+        function (transitionState) {
+          return _react2.default.createElement(
+            _Animate2.default,
+            _this2.state,
+            _react.Children.only(children)
+          );
+        }
       );
@@ -104,7 +154,7 @@ }
 }(_react.Component), _class.propTypes = {
-  appear: _propTypes2.default.object,
-  leave: _propTypes2.default.object,
-  enter: _propTypes2.default.object,
+  appearOptions: _propTypes2.default.object,
+  enterOptions: _propTypes2.default.object,
+  leaveOptions: _propTypes2.default.object,
   children: _propTypes2.default.element
 }, _temp2);
 exports.default = AnimateGroupChild;

package.json

 {
   "name": "react-smooth",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "react animation library",
@@ -46,47 +46,51 @@ "main": "lib/index",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "lodash": "^4.16.4",
-    "prop-types": "^15.5.8",
+    "lodash": "~4.17.4",
+    "prop-types": "^15.6.0",
     "raf": "^3.2.0",
-    "react-transition-group": "^1.1.1"
+    "react-transition-group": "^2.2.1"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.0",
-    "babel-core": "^6.10.0",
-    "babel-eslint": "^6.1.0",
-    "babel-loader": "^6.2.4",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
     "babel-plugin-lodash": "^3.2.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-export-extensions": "^6.8.0",
-    "babel-polyfill": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.0",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.7.2",
-    "chai": "^3.5.0",
+    "chai": "^4.1.2",
+    "chai-enzyme": "^0.8.0",
     "chai-spies": "^0.7.1",
-    "cross-env": "^3.1.4",
-    "eslint": "^2.9.0",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.7.0",
-    "eslint-plugin-jsx-a11y": "^1.5.0",
-    "eslint-plugin-react": "^5.2.0",
-    "karma": "^1.1.0",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.0",
+    "cross-env": "^5.0.5",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "karma": "^1.7.1",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^2.5.0",
+    "karma-webpack": "^2.0.4",
+    "mocha": "^4.0.1",
     "pre-commit": "^1.1.3",
-    "react": "^15.0.0",
-    "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "react": "^16.0.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.0.0",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
   },
   "license": "MIT"
 }

src/Animate.js

 import React, { Component, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 import createAnimateManager from './AnimateManager';
 import pureRender from './PureRender';
-import _ from 'lodash';
 import { configEasing } from './easing';
@@ -223,9 +223,7 @@ import configUpdate from './configUpdate';
 
-    return this.manager.start(
-      [
-        onAnimationStart,
-        ...steps.reduce(addStyle, [initialStyle, Math.max(initialTime, begin)]),
-        props.onAnimationEnd,
-      ]
-    );
+    return this.manager.start([
+      onAnimationStart,
+      ...steps.reduce(addStyle, [initialStyle, Math.max(initialTime, begin)]),
+      props.onAnimationEnd,
+    ]);
   }
@@ -297,3 +295,3 @@
       onAnimationReStart,
-      ...others,
+      ...others
     } = this.props;
@@ -300,0 +298,0 @@ const count = Children.count(children);

src/AnimateGroup.js

 import React, { Component, Children } from 'react';
-import { TransitionGroup as ReactTransitionGroup } from 'react-transition-group';
+import TransitionGroup from 'react-transition-group/TransitionGroup';
 import PropTypes from 'prop-types';
@@ -9,4 +9,5 @@ import AnimateGroupChild from './AnimateGroupChild';
     appear: PropTypes.object,
+    enter: PropTypes.object,
     leave: PropTypes.object,
-    enter: PropTypes.object,
+
     children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
@@ -20,26 +21,20 @@ component: PropTypes.any,
 
-  wrapChild(child) {
-    const { appear, leave, enter } = this.props;
-
-    return (
-      <AnimateGroupChild
-        appear={appear}
-        leave={leave}
-        enter={enter}
-      >
-        {child}
-      </AnimateGroupChild>
-    );
-  }
-
   render() {
-    const { component, children } = this.props;
+    const { component, children, appear, enter, leave } = this.props;
 
     return (
-      <ReactTransitionGroup
-        component={component}
-        childFactory={::this.wrapChild}
-      >
-        {children}
-      </ReactTransitionGroup>
+      <TransitionGroup component={component}>
+        {
+          Children.map(children, (child, index) => ((
+            <AnimateGroupChild
+              appearOptions={appear}
+              enterOptions={enter}
+              leaveOptions={leave}
+              key={`child-${index}`}
+            >
+              {child}
+            </AnimateGroupChild>
+          )))
+        }
+      </TransitionGroup>
     );
@@ -46,0 +41,0 @@ }

src/AnimateGroupChild.js

 import React, { Component, Children } from 'react';
+import Transition from 'react-transition-group/Transition';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 import Animate from './Animate';
 
+
+const parseDurationOfSingleTransition = (options = {}) => {
+  const { steps, duration } = options;
+
+  if (steps && steps.length) {
+    return steps.reduce((result, entry) => (
+      result + (_.isNumber(entry.duration) && entry.duration > 0 ? entry.duration : 0)
+    ), 0);
+  }
+
+  if (_.isNumber(duration)) {
+    return duration;
+  }
+
+  return 0;
+};
+
 class AnimateGroupChild extends Component {
   static propTypes = {
-    appear: PropTypes.object,
-    leave: PropTypes.object,
-    enter: PropTypes.object,
+    appearOptions: PropTypes.object,
+    enterOptions: PropTypes.object,
+    leaveOptions: PropTypes.object,
     children: PropTypes.element,
@@ -17,3 +36,3 @@ };
 
-  handleStyleActive(style, done) {
+  handleStyleActive(style) {
     if (style) {
@@ -23,5 +42,4 @@ const onAnimationEnd = style.onAnimationEnd ?
           style.onAnimationEnd();
-          done();
         } :
-        done;
+        null;
 
@@ -33,24 +51,39 @@ this.setState({
       });
-    } else {
-      done();
     }
   }
 
-  componentWillAppear(done) {
-    this.handleStyleActive(this.props.appear, done);
+  handleEnter = (node, isAppearing) => {
+    const { appearOptions, enterOptions } = this.props;
+
+    this.handleStyleActive(isAppearing ? appearOptions : enterOptions);
   }
 
-  componentWillEnter(done) {
-    this.handleStyleActive(this.props.enter, done);
+  handleExit = () => {
+    this.handleStyleActive(this.props.leaveOptions);
   }
 
-  componentWillLeave(done) {
-    this.handleStyleActive(this.props.leave, done);
+  parseTimeout() {
+    const { appearOptions, enterOptions, leaveOptions } = this.props;
+
+    return parseDurationOfSingleTransition(appearOptions) +
+      parseDurationOfSingleTransition(enterOptions) +
+      parseDurationOfSingleTransition(leaveOptions);
   }
 
   render() {
+    const { children, appearOptions, enterOptions, leaveOptions, ...props } = this.props;
+
     return (
-      <Animate {...this.state}>
-        {Children.only(this.props.children)}
-      </Animate>
+      <Transition
+        {...props}
+        onEnter={this.handleEnter}
+        onExit={this.handleExit}
+        timeout={this.parseTimeout()}
+      >
+        {transitionState => ((
+          <Animate {...this.state}>
+            {Children.only(children)}
+          </Animate>
+        ))}
+      </Transition>
     );
@@ -57,0 +90,0 @@ }

src/configUpdate.js

 import raf, { cancel as caf } from 'raf';
+import { filter } from 'lodash';
 import {
@@ -6,3 +7,2 @@ getIntersectionKeys,
 } from './util';
-import { filter } from 'lodash';
 
@@ -72,3 +72,3 @@ const alpha = (begin, end, k) => begin + (end - begin) * k;
   // stepper timing function like spring
-  const stepperUpdate = (now) => {
+  const stepperUpdate = now => {
     if (!preTime) {
@@ -96,3 +96,3 @@ preTime = now;
   // t => val timing function like cubic-bezier
-  const timingUpdate = (now) => {
+  const timingUpdate = now => {
     if (!beginTime) {
@@ -99,0 +99,0 @@ beginTime = now;

src/easing.js

@@ -58,6 +58,5 @@ import { warn } from './util';
 
-  warn([x1, x2, y1, y2].every(num =>
-    typeof num === 'number' && num >= 0 && num <= 1),
+  warn([x1, x2, y1, y2].every(num => (typeof num === 'number' && num >= 0 && num <= 1)),
     '[configBezier]: arguments should be x1, y1, x2, y2 of [0, 1] instead received %s',
-    args
+    args,
   );
@@ -135,6 +134,8 @@
       default:
-        warn(false,
+        warn(
+          false,
           '[configEasing]: first argument should be one of \'ease\', \'ease-in\', ' +
           '\'ease-out\', \'ease-in-out\', \'linear\' and \'spring\', instead  received %s',
-          args);
+          args,
+        );
     }
@@ -141,0 +142,0 @@ }

src/util.js

@@ -102,7 +102,3 @@ import { intersection } from 'lodash';
 
-  return (...composeArgs) =>
-    tailsFn.reduce((res, fn) =>
-      fn(res),
-      firstFn(...composeArgs)
-  );
+  return (...composeArgs) => (tailsFn.reduce((res, fn) => (fn(res)), firstFn(...composeArgs)));
 };
@@ -125,6 +121,4 @@
       if (format === undefined) {
-        console.warn(
-          'Minified exception occurred; use the non-minified dev environment ' +
-          'for the full error message and additional helpful warnings.'
-        );
+        console.warn('Minified exception occurred; use the non-minified dev environment ' +
+          'for the full error message and additional helpful warnings.');
       } else {
@@ -131,0 +125,0 @@ const args = [a, b, c, d, e, f];

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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 v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1158116

increased by204.86%

Lines of code

26062

increased by181.81%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

37

increased by12.12%

Number of low supply chain risk alerts

5

increased by25%

Number of medium supply chain risk alerts

6

increased by200%

Dependency changes

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-transition-group@2.9.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedchain-function@1.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedreact-transition-group@1.2.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwarning@3.0.0(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedlodash@~4.17.4

• Updatedprop-types@^15.6.0

• Updatedreact-transition-group@^2.2.1