react-transition-group - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CSSTransitionGroup.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
-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; }; }();
-
 var _react = require('react');
@@ -52,4 +48,2 @@
   function CSSTransitionGroup() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -63,3 +57,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CSSTransitionGroup.__proto__ || Object.getPrototypeOf(CSSTransitionGroup)).call.apply(_ref, [this].concat(args))), _this), _this._wrapChild = function (child) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this._wrapChild = function (child) {
       return _react2.default.createElement(_CSSTransitionGroupChild2.default, {
@@ -82,8 +76,5 @@ name: _this.props.transitionName,
 
-  _createClass(CSSTransitionGroup, [{
-    key: 'render',
-    value: function render() {
-      return _react2.default.createElement(_TransitionGroup2.default, Object.assign({}, this.props, { childFactory: this._wrapChild }));
-    }
-  }]);
+  CSSTransitionGroup.prototype.render = function render() {
+    return _react2.default.createElement(_TransitionGroup2.default, Object.assign({}, this.props, { childFactory: this._wrapChild }));
+  };
 
@@ -90,0 +81,0 @@ return CSSTransitionGroup;

CSSTransitionGroupChild.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
 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; };
 
-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; }; }();
-
 var _addClass = require('dom-helpers/class/addClass');
@@ -81,4 +77,2 @@
   function CSSTransitionGroupChild() {
-    var _ref;
-
     var _temp, _this, _ret;
@@ -92,3 +86,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CSSTransitionGroupChild.__proto__ || Object.getPrototypeOf(CSSTransitionGroupChild)).call.apply(_ref, [this].concat(args))), _this), _this.componentWillAppear = function (done) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.componentWillAppear = function (done) {
       if (_this.props.appear) {
@@ -114,120 +108,112 @@ _this.transition('appear', done, _this.props.appearTimeout);
 
-  _createClass(CSSTransitionGroupChild, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.classNameAndNodeQueue = [];
-      this.transitionTimeouts = [];
+  CSSTransitionGroupChild.prototype.componentWillMount = function componentWillMount() {
+    this.classNameAndNodeQueue = [];
+    this.transitionTimeouts = [];
+  };
+
+  CSSTransitionGroupChild.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.unmounted = true;
+
+    if (this.timeout) {
+      clearTimeout(this.timeout);
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unmounted = true;
+    this.transitionTimeouts.forEach(function (timeout) {
+      clearTimeout(timeout);
+    });
 
-      if (this.timeout) {
-        clearTimeout(this.timeout);
+    this.classNameAndNodeQueue.length = 0;
+  };
+
+  CSSTransitionGroupChild.prototype.transition = function transition(animationType, finishCallback, timeout) {
+    var node = (0, _reactDom.findDOMNode)(this);
+
+    if (!node) {
+      if (finishCallback) {
+        finishCallback();
       }
-      this.transitionTimeouts.forEach(function (timeout) {
-        clearTimeout(timeout);
-      });
-
-      this.classNameAndNodeQueue.length = 0;
+      return;
     }
-  }, {
-    key: 'transition',
-    value: function transition(animationType, finishCallback, timeout) {
-      var node = (0, _reactDom.findDOMNode)(this);
 
-      if (!node) {
-        if (finishCallback) {
-          finishCallback();
-        }
+    var className = this.props.name[animationType] || this.props.name + '-' + animationType;
+    var activeClassName = this.props.name[animationType + 'Active'] || className + '-active';
+    var timer = null;
+    var removeListeners = void 0;
+
+    (0, _addClass2.default)(node, className);
+
+    // Need to do this to actually trigger a transition.
+    this.queueClassAndNode(activeClassName, node);
+
+    // Clean-up the animation after the specified delay
+    var finish = function finish(e) {
+      if (e && e.target !== node) {
         return;
       }
 
-      var className = this.props.name[animationType] || this.props.name + '-' + animationType;
-      var activeClassName = this.props.name[animationType + 'Active'] || className + '-active';
-      var timer = null;
-      var removeListeners = void 0;
+      clearTimeout(timer);
+      if (removeListeners) removeListeners();
 
-      (0, _addClass2.default)(node, className);
+      (0, _removeClass2.default)(node, className);
+      (0, _removeClass2.default)(node, activeClassName);
 
-      // Need to do this to actually trigger a transition.
-      this.queueClassAndNode(activeClassName, node);
+      if (removeListeners) removeListeners();
 
-      // Clean-up the animation after the specified delay
-      var finish = function finish(e) {
-        if (e && e.target !== node) {
-          return;
-        }
+      // Usually this optional callback is used for informing an owner of
+      // a leave animation and telling it to remove the child.
+      if (finishCallback) {
+        finishCallback();
+      }
+    };
 
-        clearTimeout(timer);
-        if (removeListeners) removeListeners();
+    if (timeout) {
+      timer = setTimeout(finish, timeout);
+      this.transitionTimeouts.push(timer);
+    } else if (_properties.transitionEnd) {
+      removeListeners = addEndListener(node, finish);
+    }
+  };
 
-        (0, _removeClass2.default)(node, className);
-        (0, _removeClass2.default)(node, activeClassName);
+  CSSTransitionGroupChild.prototype.queueClassAndNode = function queueClassAndNode(className, node) {
+    var _this2 = this;
 
-        if (removeListeners) removeListeners();
+    this.classNameAndNodeQueue.push({
+      className: className,
+      node: node
+    });
 
-        // Usually this optional callback is used for informing an owner of
-        // a leave animation and telling it to remove the child.
-        if (finishCallback) {
-          finishCallback();
-        }
-      };
-
-      if (timeout) {
-        timer = setTimeout(finish, timeout);
-        this.transitionTimeouts.push(timer);
-      } else if (_properties.transitionEnd) {
-        removeListeners = addEndListener(node, finish);
-      }
+    if (!this.rafHandle) {
+      this.rafHandle = (0, _requestAnimationFrame2.default)(function () {
+        return _this2.flushClassNameAndNodeQueue();
+      });
     }
-  }, {
-    key: 'queueClassAndNode',
-    value: function queueClassAndNode(className, node) {
-      var _this2 = this;
+  };
 
-      this.classNameAndNodeQueue.push({
-        className: className,
-        node: node
+  CSSTransitionGroupChild.prototype.flushClassNameAndNodeQueue = function flushClassNameAndNodeQueue() {
+    if (!this.unmounted) {
+      this.classNameAndNodeQueue.forEach(function (obj) {
+        // This is for to force a repaint,
+        // which is necessary in order to transition styles when adding a class name.
+        /* eslint-disable no-unused-expressions */
+        obj.node.scrollTop;
+        /* eslint-enable no-unused-expressions */
+        (0, _addClass2.default)(obj.node, obj.className);
       });
-
-      if (!this.rafHandle) {
-        this.rafHandle = (0, _requestAnimationFrame2.default)(function () {
-          return _this2.flushClassNameAndNodeQueue();
-        });
-      }
     }
-  }, {
-    key: 'flushClassNameAndNodeQueue',
-    value: function flushClassNameAndNodeQueue() {
-      if (!this.unmounted) {
-        this.classNameAndNodeQueue.forEach(function (obj) {
-          // This is for to force a repaint,
-          // which is necessary in order to transition styles when adding a class name.
-          /* eslint-disable no-unused-expressions */
-          obj.node.scrollTop;
-          /* eslint-enable no-unused-expressions */
-          (0, _addClass2.default)(obj.node, obj.className);
-        });
-      }
-      this.classNameAndNodeQueue.length = 0;
-      this.rafHandle = null;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var props = _extends({}, this.props);
-      delete props.name;
-      delete props.appear;
-      delete props.enter;
-      delete props.leave;
-      delete props.appearTimeout;
-      delete props.enterTimeout;
-      delete props.leaveTimeout;
-      delete props.children;
-      return _react2.default.cloneElement(_react2.default.Children.only(this.props.children), props);
-    }
-  }]);
+    this.classNameAndNodeQueue.length = 0;
+    this.rafHandle = null;
+  };
 
+  CSSTransitionGroupChild.prototype.render = function render() {
+    var props = _extends({}, this.props);
+    delete props.name;
+    delete props.appear;
+    delete props.enter;
+    delete props.leave;
+    delete props.appearTimeout;
+    delete props.enterTimeout;
+    delete props.leaveTimeout;
+    delete props.children;
+    return _react2.default.cloneElement(_react2.default.Children.only(this.props.children), props);
+  };
+
   return CSSTransitionGroupChild;
@@ -234,0 +220,0 @@ }(_react2.default.Component);

package.json

 {
   "name": "react-transition-group",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A react component toolset for managing animations",
@@ -27,3 +27,3 @@ "main": "index.js",
     "testRegex": "-test\\.js",
-    "testPathDirs": [
+    "roots": [
       "<rootDir>/test"
@@ -30,0 +30,0 @@ ],

TransitionGroup.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
-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; }; }();
-
 var _chainFunction = require('chain-function');
@@ -50,3 +46,3 @@
 
-    var _this = _possibleConstructorReturn(this, (TransitionGroup.__proto__ || Object.getPrototypeOf(TransitionGroup)).call(this, props, context));
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
 
@@ -154,105 +150,98 @@ _this.performAppear = function (key) {
 
-  _createClass(TransitionGroup, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.currentlyTransitioningKeys = {};
-      this.keysToEnter = [];
-      this.keysToLeave = [];
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var initialChildMapping = this.state.children;
-      for (var key in initialChildMapping) {
-        if (initialChildMapping[key]) {
-          this.performAppear(key);
-        }
+  TransitionGroup.prototype.componentWillMount = function componentWillMount() {
+    this.currentlyTransitioningKeys = {};
+    this.keysToEnter = [];
+    this.keysToLeave = [];
+  };
+
+  TransitionGroup.prototype.componentDidMount = function componentDidMount() {
+    var initialChildMapping = this.state.children;
+    for (var key in initialChildMapping) {
+      if (initialChildMapping[key]) {
+        this.performAppear(key);
       }
     }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextChildMapping = (0, _ChildMapping.getChildMapping)(nextProps.children);
-      var prevChildMapping = this.state.children;
+  };
 
-      this.setState({
-        children: (0, _ChildMapping.mergeChildMappings)(prevChildMapping, nextChildMapping)
-      });
+  TransitionGroup.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var nextChildMapping = (0, _ChildMapping.getChildMapping)(nextProps.children);
+    var prevChildMapping = this.state.children;
 
-      for (var key in nextChildMapping) {
-        var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
-        if (nextChildMapping[key] && !hasPrev && !this.currentlyTransitioningKeys[key]) {
-          this.keysToEnter.push(key);
-        }
-      }
+    this.setState({
+      children: (0, _ChildMapping.mergeChildMappings)(prevChildMapping, nextChildMapping)
+    });
 
-      for (var _key in prevChildMapping) {
-        var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(_key);
-        if (prevChildMapping[_key] && !hasNext && !this.currentlyTransitioningKeys[_key]) {
-          this.keysToLeave.push(_key);
-        }
+    for (var key in nextChildMapping) {
+      var hasPrev = prevChildMapping && prevChildMapping.hasOwnProperty(key);
+      if (nextChildMapping[key] && !hasPrev && !this.currentlyTransitioningKeys[key]) {
+        this.keysToEnter.push(key);
       }
-
-      // If we want to someday check for reordering, we could do it here.
     }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      var keysToEnter = this.keysToEnter;
-      this.keysToEnter = [];
-      keysToEnter.forEach(this.performEnter);
 
-      var keysToLeave = this.keysToLeave;
-      this.keysToLeave = [];
-      keysToLeave.forEach(this.performLeave);
+    for (var _key in prevChildMapping) {
+      var hasNext = nextChildMapping && nextChildMapping.hasOwnProperty(_key);
+      if (prevChildMapping[_key] && !hasNext && !this.currentlyTransitioningKeys[_key]) {
+        this.keysToLeave.push(_key);
+      }
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
 
-      // TODO: we could get rid of the need for the wrapper node
-      // by cloning a single child
-      var childrenToRender = [];
+    // If we want to someday check for reordering, we could do it here.
+  };
 
-      var _loop = function _loop(key) {
-        var child = _this2.state.children[key];
-        if (child) {
-          var isCallbackRef = typeof child.ref !== 'string';
-          process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(isCallbackRef, 'string refs are not supported on children of TransitionGroup and will be ignored. ' + 'Please use a callback ref instead: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute') : void 0;
+  TransitionGroup.prototype.componentDidUpdate = function componentDidUpdate() {
+    var keysToEnter = this.keysToEnter;
+    this.keysToEnter = [];
+    keysToEnter.forEach(this.performEnter);
 
-          // You may need to apply reactive updates to a child as it is leaving.
-          // The normal React way to do it won't work since the child will have
-          // already been removed. In case you need this behavior you can provide
-          // a childFactory function to wrap every child, even the ones that are
-          // leaving.
-          childrenToRender.push(_react2.default.cloneElement(_this2.props.childFactory(child), {
-            key: key,
-            ref: (0, _chainFunction2.default)(isCallbackRef ? child.ref : null, function (r) {
-              _this2.childRefs[key] = r;
-            })
-          }));
-        }
-      };
+    var keysToLeave = this.keysToLeave;
+    this.keysToLeave = [];
+    keysToLeave.forEach(this.performLeave);
+  };
 
-      for (var key in this.state.children) {
-        _loop(key);
+  TransitionGroup.prototype.render = function render() {
+    var _this2 = this;
+
+    // TODO: we could get rid of the need for the wrapper node
+    // by cloning a single child
+    var childrenToRender = [];
+
+    var _loop = function _loop(key) {
+      var child = _this2.state.children[key];
+      if (child) {
+        var isCallbackRef = typeof child.ref !== 'string';
+        process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(isCallbackRef, 'string refs are not supported on children of TransitionGroup and will be ignored. ' + 'Please use a callback ref instead: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute') : void 0;
+
+        // You may need to apply reactive updates to a child as it is leaving.
+        // The normal React way to do it won't work since the child will have
+        // already been removed. In case you need this behavior you can provide
+        // a childFactory function to wrap every child, even the ones that are
+        // leaving.
+        childrenToRender.push(_react2.default.cloneElement(_this2.props.childFactory(child), {
+          key: key,
+          ref: (0, _chainFunction2.default)(isCallbackRef ? child.ref : null, function (r) {
+            _this2.childRefs[key] = r;
+          })
+        }));
       }
+    };
 
-      // Do not forward TransitionGroup props to primitive DOM nodes
-      var props = Object.assign({}, this.props);
-      delete props.transitionLeave;
-      delete props.transitionName;
-      delete props.transitionAppear;
-      delete props.transitionEnter;
-      delete props.childFactory;
-      delete props.transitionLeaveTimeout;
-      delete props.transitionEnterTimeout;
-      delete props.transitionAppearTimeout;
-      delete props.component;
-
-      return _react2.default.createElement(this.props.component, props, childrenToRender);
+    for (var key in this.state.children) {
+      _loop(key);
     }
-  }]);
 
+    // Do not forward TransitionGroup props to primitive DOM nodes
+    var props = Object.assign({}, this.props);
+    delete props.transitionLeave;
+    delete props.transitionName;
+    delete props.transitionAppear;
+    delete props.transitionEnter;
+    delete props.childFactory;
+    delete props.transitionLeaveTimeout;
+    delete props.transitionEnterTimeout;
+    delete props.transitionAppearTimeout;
+    delete props.component;
+
+    return _react2.default.createElement(this.props.component, props, childrenToRender);
+  };
+
   return TransitionGroup;
@@ -259,0 +248,0 @@ }(_react2.default.Component);

utils/ChildMapping.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.getChildMapping = getChildMapping;
@@ -7,0 +5,0 @@ exports.mergeChildMappings = mergeChildMappings;

utils/PropTypes.js

 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.nameShape = undefined;
@@ -7,0 +5,0 @@ exports.transitionTimeout = transitionTimeout;

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify 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

Improved metrics

Total package byte prevSize

41996

increased by46.31%

Number of package files

8

increased by14.29%

Worsened metrics

Lines of code

551

decreased by-7.55%

Number of low quality alerts

1

increased byInfinity%

No dependency changes