react-transition-group - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CSSTransition.js

@@ -39,2 +39,13 @@ 'use strict';
 
+var addClass = function addClass(node, classes) {
+  return classes && classes.split(' ').forEach(function (c) {
+    return (0, _addClass2.default)(node, c);
+  });
+};
+var removeClass = function removeClass(node, classes) {
+  return classes && classes.split(' ').forEach(function (c) {
+    return (0, _removeClass2.default)(node, c);
+  });
+};
+
 var propTypes = _extends({}, _Transition2.default.propTypes, {
@@ -205,3 +216,3 @@
       _this.removeClasses(node, 'exit');
-      (0, _addClass2.default)(node, className);
+      addClass(node, className);
 
@@ -232,3 +243,3 @@ if (_this.props.onEnter) {
       _this.removeClasses(node, 'enter');
-      (0, _addClass2.default)(node, className);
+      addClass(node, className);
 
@@ -270,4 +281,4 @@ if (_this.props.onExit) {
 
-    className && (0, _removeClass2.default)(node, className);
-    activeClassName && (0, _removeClass2.default)(node, activeClassName);
+    className && removeClass(node, className);
+    activeClassName && removeClass(node, activeClassName);
   };
@@ -281,3 +292,3 @@
     /* eslint-enable no-unused-expressions */
-    (0, _addClass2.default)(node, className);
+    addClass(node, className);
   };
@@ -284,0 +295,0 @@

dist/react-transition-group.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactTransitionGroup=e(require("react"),require("react-dom")):t.ReactTransitionGroup=e(t.React,t.ReactDOM)}(this,function(t,e){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=12)}([function(t,e,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;t.exports=n(11)()},function(e,n){e.exports=t},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(){}e.__esModule=!0,e.EXITING=e.ENTERED=e.ENTERING=e.EXITED=e.UNMOUNTED=void 0;var c=n(0),l=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(c),p=n(1),f=r(p),d=n(14),h=r(d),E=(n(3),e.UNMOUNTED="unmounted"),m=e.EXITED="exited",x=e.ENTERING="entering",y=e.ENTERED="entered",v=e.EXITING="exiting",b=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r)),s=r.transitionGroup,u=s&&!s.isMounting?n.enter:n.appear,c=void 0;return o.nextStatus=null,n.in?u?(c=m,o.nextStatus=x):c=y:c=n.unmountOnExit||n.mountOnEnter?E:m,o.state={status:c},o.nextCallback=null,o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:null}},e.prototype.componentDidMount=function(){this.updateStatus(!0)},e.prototype.componentWillReceiveProps=function(t){var e=this.state.status;t.in?(e===E&&this.setState({status:m}),e!==x&&e!==y&&(this.nextStatus=x)):e!==x&&e!==y||(this.nextStatus=v)},e.prototype.componentDidUpdate=function(){this.updateStatus()},e.prototype.componentWillUnmount=function(){this.cancelNextCallback()},e.prototype.getTimeouts=function(){var t=this.props.timeout,e=void 0,n=void 0,r=void 0;return e=n=r=t,"number"!=typeof t&&(e=t.exit,n=t.enter,r=t.appear),{exit:e,enter:n,appear:r}},e.prototype.updateStatus=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(null!==this.nextStatus){this.cancelNextCallback();var e=h.default.findDOMNode(this);this.nextStatus===x?this.performEnter(e,t):this.performExit(e),this.nextStatus=null}else this.props.unmountOnExit&&this.state.status===m&&this.setState({status:E})},e.prototype.performEnter=function(t,e){var n=this,r=this.props.enter,o=this.context.transitionGroup?this.context.transitionGroup.isMounting:e,i=this.getTimeouts();if(!e&&!r)return void this.safeSetState({status:y},function(){n.props.onEntered(t)});this.props.onEnter(t,o),this.safeSetState({status:x},function(){n.props.onEntering(t,o),n.onTransitionEnd(t,i.enter,function(){n.safeSetState({status:y},function(){n.props.onEntered(t,o)})})})},e.prototype.performExit=function(t){var e=this,n=this.props.exit,r=this.getTimeouts();if(!n)return void this.safeSetState({status:m},function(){e.props.onExited(t)});this.props.onExit(t),this.safeSetState({status:v},function(){e.props.onExiting(t),e.onTransitionEnd(t,r.exit,function(){e.safeSetState({status:m},function(){e.props.onExited(t)})})})},e.prototype.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},e.prototype.safeSetState=function(t,e){this.setState(t,this.setNextCallback(e))},e.prototype.setNextCallback=function(t){var e=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,e.nextCallback=null,t(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},e.prototype.onTransitionEnd=function(t,e,n){this.setNextCallback(n),t?(this.props.addEndListener&&this.props.addEndListener(t,this.nextCallback),setTimeout(this.nextCallback,e)):setTimeout(this.nextCallback,0)},e.prototype.render=function(){var t=this.state.status;if(t===E)return null;var n=this.props,r=n.children,i=o(n,["children"]);if(Object.keys(e.propTypes).forEach(function(t){return delete i[t]}),"function"==typeof r)return r(t,i);var a=f.default.Children.only(r);return f.default.cloneElement(a,i)},e}(f.default.Component);b.contextTypes={transitionGroup:l.object},b.childContextTypes={transitionGroup:function(){}},b.propTypes={},b.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:u,onEntering:u,onEntered:u,onExit:u,onExiting:u,onExited:u},b.UNMOUNTED=0,b.EXITED=1,b.ENTERING=2,b.ENTERED=3,b.EXITING=4,e.default=b},function(t,e,n){"use strict";function r(t){var e="transition"+t+"Timeout",n="transition"+t;return function(t){if(t[n]){if(null==t[e])return new Error(e+" wasn't supplied to CSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");if("number"!=typeof t[e])return new Error(e+" must be a number (in milliseconds)")}return null}}e.__esModule=!0,e.classNamesShape=e.timeoutsShape=void 0,e.transitionTimeout=r;var o=n(0),i=function(t){return t&&t.__esModule?t:{default:t}}(o);e.timeoutsShape=i.default.oneOfType([i.default.number,i.default.shape({enter:i.default.number,exit:i.default.number}).isRequired]).isRequired,e.classNamesShape=i.default.oneOfType([i.default.string,i.default.shape({enter:i.default.string,exit:i.default.string,active:i.default.string}),i.default.shape({enter:i.default.string,enterActive:i.default.string,exit:i.default.string,exitActive:i.default.string})])},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},u=n(0),c=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(u),l=n(6),p=r(l),f=n(8),d=r(f),h=n(1),E=r(h),m=n(2),x=r(m),y=n(3),v=(s({},x.default.propTypes,{classNames:y.classNamesShape,onEnter:c.func,onEntering:c.func,onEntered:c.func,onExit:c.func,onExiting:c.func,onExited:c.func}),function(t){function e(){var n,r,a;o(this,e);for(var s=arguments.length,u=Array(s),c=0;c<s;c++)u[c]=arguments[c];return n=r=i(this,t.call.apply(t,[this].concat(u))),r.onEnter=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.className;r.removeClasses(t,"exit"),(0,p.default)(t,o),r.props.onEnter&&r.props.onEnter(t)},r.onEntering=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.activeClassName;r.reflowAndAddClass(t,o),r.props.onEntering&&r.props.onEntering(t)},r.onEntered=function(t,e){r.removeClasses(t,e?"appear":"enter"),r.props.onEntered&&r.props.onEntered(t)},r.onExit=function(t){var e=r.getClassNames("exit"),n=e.className;r.removeClasses(t,"appear"),r.removeClasses(t,"enter"),(0,p.default)(t,n),r.props.onExit&&r.props.onExit(t)},r.onExiting=function(t){var e=r.getClassNames("exit"),n=e.activeClassName;r.reflowAndAddClass(t,n),r.props.onExiting&&r.props.onExiting(t)},r.onExited=function(t){r.removeClasses(t,"exit"),r.props.onExited&&r.props.onExited(t)},r.getClassNames=function(t){var e=r.props.classNames,n="string"!=typeof e?e[t]:e+"-"+t;return{className:n,activeClassName:"string"!=typeof e?e[t+"Active"]:n+"-active"}},a=n,i(r,a)}return a(e,t),e.prototype.removeClasses=function(t,e){var n=this.getClassNames(e),r=n.className,o=n.activeClassName;r&&(0,d.default)(t,r),o&&(0,d.default)(t,o)},e.prototype.reflowAndAddClass=function(t,e){t.scrollTop,(0,p.default)(t,e)},e.prototype.render=function(){var t=s({},this.props);return delete t.classNames,E.default.createElement(x.default,s({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},e}(E.default.Component));v.propTypes={},e.default=v,t.exports=e.default},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},c=n(0),l=r(c),p=n(1),f=r(p),d=n(13),h=Object.values||function(t){return Object.keys(t).map(function(e){return t[e]})},E=(l.default.any,l.default.node,l.default.bool,l.default.bool,l.default.bool,l.default.func,{component:"div",childFactory:function(t){return t}}),m=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r));return o.handleExited=function(t,e,n){var r=(0,d.getChildMapping)(o.props.children);t in r||(n&&n(e),o.setState(function(e){var n=u({},e.children);return delete n[t],{children:n}}))},o.state={children:(0,d.getChildMapping)(n.children,function(t){var e=function(e){o.handleExited(t.key,e,t.props.onExited)};return(0,p.cloneElement)(t,{onExited:e,in:!0,appear:o.getProp(t,"appear"),enter:o.getProp(t,"enter"),exit:o.getProp(t,"exit")})})},o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:{isMounting:!this.appeared}}},e.prototype.getProp=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props;return null!=n[e]?n[e]:t.props[e]},e.prototype.componentDidMount=function(){this.appeared=!0},e.prototype.componentWillReceiveProps=function(t){var e=this,n=this.state.children,r=(0,d.getChildMapping)(t.children),o=(0,d.mergeChildMappings)(n,r);Object.keys(o).forEach(function(i){var a=o[i];if((0,p.isValidElement)(a)){var s=function(t){e.handleExited(a.key,t,a.props.onExited)},u=i in n,c=i in r,l=n[i],f=(0,p.isValidElement)(l)&&!l.props.in;!c||u&&!f?c||!u||f?c&&u&&(0,p.isValidElement)(l)&&(o[i]=(0,p.cloneElement)(a,{onExited:s,in:l.props.in,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})):o[i]=(0,p.cloneElement)(a,{in:!1}):o[i]=(0,p.cloneElement)(a,{onExited:s,in:!0,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})}}),this.setState({children:o})},e.prototype.render=function(){var t=this.props,e=t.component,n=t.childFactory,r=o(t,["component","childFactory"]),i=this.state.children;return delete r.appear,delete r.enter,delete r.exit,f.default.createElement(e,r,h(i).map(n))},e}(f.default.Component);m.childContextTypes={transitionGroup:l.default.object.isRequired},m.propTypes={},m.defaultProps=E,e.default=m,t.exports=e.default},function(t,e,n){"use strict";function r(t,e){t.classList?t.classList.add(e):(0,i.default)(t)||(t.className=t.className+" "+e)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var o=n(7),i=function(t){return t&&t.__esModule?t:{default:t}}(o);t.exports=e.default},function(t,e,n){"use strict";function r(t,e){return t.classList?!!e&&t.classList.contains(e):-1!==(" "+t.className+" ").indexOf(" "+e+" ")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r,t.exports=e.default},function(t,e,n){"use strict";t.exports=function(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s)"+e+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}},function(t,e,n){"use strict";function r(t){return function(){return t}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t},t.exports=o},function(t,e,n){"use strict";function r(t,e,n,r,i,a,s,u){if(o(e),!t){var c;if(void 0===e)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,i,a,s,u],p=0;c=new Error(e.replace(/%s/g,function(){return l[p++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(t){};t.exports=r},function(t,e,n){"use strict";var r=n(9),o=n(10);t.exports=function(){function t(){o(!1)}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var o=n(4),i=r(o),a=n(5),s=r(a),u=n(2),c=r(u);t.exports={Transition:c.default,TransitionGroup:s.default,CSSTransition:i.default}},function(t,e,n){"use strict";function r(t,e){var n=function(t){return e&&(0,i.isValidElement)(t)?e(t):t},r=Object.create(null);return t&&i.Children.map(t,function(t){return t}).forEach(function(t){r[t.key]=n(t)}),r}function o(t,e){function n(n){return n in e?e[n]:t[n]}t=t||{},e=e||{};var r=Object.create(null),o=[];for(var i in t)i in e?o.length&&(r[i]=o,o=[]):o.push(i);var a=void 0,s={};for(var u in e){if(r[u])for(a=0;a<r[u].length;a++){var c=r[u][a];s[r[u][a]]=n(c)}s[u]=n(u)}for(a=0;a<o.length;a++)s[o[a]]=n(o[a]);return s}e.__esModule=!0,e.getChildMapping=r,e.mergeChildMappings=o;var i=n(1)},function(t,n){t.exports=e}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],e):"object"==typeof exports?exports.ReactTransitionGroup=e(require("react"),require("react-dom")):t.ReactTransitionGroup=e(t.React,t.ReactDOM)}(this,function(t,e){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=12)}([function(t,e,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;t.exports=n(11)()},function(e,n){e.exports=t},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function u(){}e.__esModule=!0,e.EXITING=e.ENTERED=e.ENTERING=e.EXITED=e.UNMOUNTED=void 0;var l=n(0),c=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(l),p=n(1),f=r(p),d=n(14),h=r(d),E=(n(3),e.UNMOUNTED="unmounted"),x=e.EXITED="exited",m=e.ENTERING="entering",y=e.ENTERED="entered",v=e.EXITING="exiting",b=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r)),s=r.transitionGroup,u=s&&!s.isMounting?n.enter:n.appear,l=void 0;return o.nextStatus=null,n.in?u?(l=x,o.nextStatus=m):l=y:l=n.unmountOnExit||n.mountOnEnter?E:x,o.state={status:l},o.nextCallback=null,o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:null}},e.prototype.componentDidMount=function(){this.updateStatus(!0)},e.prototype.componentWillReceiveProps=function(t){var e=this.state.status;t.in?(e===E&&this.setState({status:x}),e!==m&&e!==y&&(this.nextStatus=m)):e!==m&&e!==y||(this.nextStatus=v)},e.prototype.componentDidUpdate=function(){this.updateStatus()},e.prototype.componentWillUnmount=function(){this.cancelNextCallback()},e.prototype.getTimeouts=function(){var t=this.props.timeout,e=void 0,n=void 0,r=void 0;return e=n=r=t,null!=t&&"number"!=typeof t&&(e=t.exit,n=t.enter,r=t.appear),{exit:e,enter:n,appear:r}},e.prototype.updateStatus=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(null!==this.nextStatus){this.cancelNextCallback();var e=h.default.findDOMNode(this);this.nextStatus===m?this.performEnter(e,t):this.performExit(e),this.nextStatus=null}else this.props.unmountOnExit&&this.state.status===x&&this.setState({status:E})},e.prototype.performEnter=function(t,e){var n=this,r=this.props.enter,o=this.context.transitionGroup?this.context.transitionGroup.isMounting:e,i=this.getTimeouts();if(!e&&!r)return void this.safeSetState({status:y},function(){n.props.onEntered(t)});this.props.onEnter(t,o),this.safeSetState({status:m},function(){n.props.onEntering(t,o),n.onTransitionEnd(t,i.enter,function(){n.safeSetState({status:y},function(){n.props.onEntered(t,o)})})})},e.prototype.performExit=function(t){var e=this,n=this.props.exit,r=this.getTimeouts();if(!n)return void this.safeSetState({status:x},function(){e.props.onExited(t)});this.props.onExit(t),this.safeSetState({status:v},function(){e.props.onExiting(t),e.onTransitionEnd(t,r.exit,function(){e.safeSetState({status:x},function(){e.props.onExited(t)})})})},e.prototype.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},e.prototype.safeSetState=function(t,e){this.setState(t,this.setNextCallback(e))},e.prototype.setNextCallback=function(t){var e=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,e.nextCallback=null,t(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},e.prototype.onTransitionEnd=function(t,e,n){this.setNextCallback(n),t?(this.props.addEndListener&&this.props.addEndListener(t,this.nextCallback),null!=e&&setTimeout(this.nextCallback,e)):setTimeout(this.nextCallback,0)},e.prototype.render=function(){var t=this.state.status;if(t===E)return null;var e=this.props,n=e.children,r=o(e,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return n(t,r);var i=f.default.Children.only(n);return f.default.cloneElement(i,r)},e}(f.default.Component);b.contextTypes={transitionGroup:c.object},b.childContextTypes={transitionGroup:function(){}},b.propTypes={},b.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:u,onEntering:u,onEntered:u,onExit:u,onExiting:u,onExited:u},b.UNMOUNTED=0,b.EXITED=1,b.ENTERING=2,b.ENTERED=3,b.EXITING=4,e.default=b},function(t,e,n){"use strict";function r(t){var e="transition"+t+"Timeout",n="transition"+t;return function(t){if(t[n]){if(null==t[e])return new Error(e+" wasn't supplied to CSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See https://fb.me/react-animation-transition-group-timeout for more information.");if("number"!=typeof t[e])return new Error(e+" must be a number (in milliseconds)")}return null}}e.__esModule=!0,e.classNamesShape=e.timeoutsShape=void 0,e.transitionTimeout=r;var o=n(0),i=function(t){return t&&t.__esModule?t:{default:t}}(o);e.timeoutsShape=i.default.oneOfType([i.default.number,i.default.shape({enter:i.default.number,exit:i.default.number}).isRequired]),e.classNamesShape=i.default.oneOfType([i.default.string,i.default.shape({enter:i.default.string,exit:i.default.string,active:i.default.string}),i.default.shape({enter:i.default.string,enterActive:i.default.string,exit:i.default.string,exitActive:i.default.string})])},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},u=n(0),l=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(u),c=n(6),p=r(c),f=n(8),d=r(f),h=n(1),E=r(h),x=n(2),m=r(x),y=n(3),v=function(t,e){return e&&e.split(" ").forEach(function(e){return(0,p.default)(t,e)})},b=function(t,e){return e&&e.split(" ").forEach(function(e){return(0,d.default)(t,e)})},g=(s({},m.default.propTypes,{classNames:y.classNamesShape,onEnter:l.func,onEntering:l.func,onEntered:l.func,onExit:l.func,onExiting:l.func,onExited:l.func}),function(t){function e(){var n,r,a;o(this,e);for(var s=arguments.length,u=Array(s),l=0;l<s;l++)u[l]=arguments[l];return n=r=i(this,t.call.apply(t,[this].concat(u))),r.onEnter=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.className;r.removeClasses(t,"exit"),v(t,o),r.props.onEnter&&r.props.onEnter(t)},r.onEntering=function(t,e){var n=r.getClassNames(e?"appear":"enter"),o=n.activeClassName;r.reflowAndAddClass(t,o),r.props.onEntering&&r.props.onEntering(t)},r.onEntered=function(t,e){r.removeClasses(t,e?"appear":"enter"),r.props.onEntered&&r.props.onEntered(t)},r.onExit=function(t){var e=r.getClassNames("exit"),n=e.className;r.removeClasses(t,"appear"),r.removeClasses(t,"enter"),v(t,n),r.props.onExit&&r.props.onExit(t)},r.onExiting=function(t){var e=r.getClassNames("exit"),n=e.activeClassName;r.reflowAndAddClass(t,n),r.props.onExiting&&r.props.onExiting(t)},r.onExited=function(t){r.removeClasses(t,"exit"),r.props.onExited&&r.props.onExited(t)},r.getClassNames=function(t){var e=r.props.classNames,n="string"!=typeof e?e[t]:e+"-"+t;return{className:n,activeClassName:"string"!=typeof e?e[t+"Active"]:n+"-active"}},a=n,i(r,a)}return a(e,t),e.prototype.removeClasses=function(t,e){var n=this.getClassNames(e),r=n.className,o=n.activeClassName;r&&b(t,r),o&&b(t,o)},e.prototype.reflowAndAddClass=function(t,e){t.scrollTop,v(t,e)},e.prototype.render=function(){var t=s({},this.props);return delete t.classNames,E.default.createElement(m.default,s({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},e}(E.default.Component));g.propTypes={},e.default=g,t.exports=e.default},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(t,e){var n={};for(var r in t)e.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0;var u=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},l=n(0),c=r(l),p=n(1),f=r(p),d=n(13),h=Object.values||function(t){return Object.keys(t).map(function(e){return t[e]})},E=(c.default.any,c.default.node,c.default.bool,c.default.bool,c.default.bool,c.default.func,{component:"div",childFactory:function(t){return t}}),x=function(t){function e(n,r){i(this,e);var o=a(this,t.call(this,n,r));return o.handleExited=function(t,e,n){var r=(0,d.getChildMapping)(o.props.children);t in r||(n&&n(e),o.setState(function(e){var n=u({},e.children);return delete n[t],{children:n}}))},o.state={children:(0,d.getChildMapping)(n.children,function(t){var e=function(e){o.handleExited(t.key,e,t.props.onExited)};return(0,p.cloneElement)(t,{onExited:e,in:!0,appear:o.getProp(t,"appear"),enter:o.getProp(t,"enter"),exit:o.getProp(t,"exit")})})},o}return s(e,t),e.prototype.getChildContext=function(){return{transitionGroup:{isMounting:!this.appeared}}},e.prototype.getProp=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.props;return null!=n[e]?n[e]:t.props[e]},e.prototype.componentDidMount=function(){this.appeared=!0},e.prototype.componentWillReceiveProps=function(t){var e=this,n=this.state.children,r=(0,d.getChildMapping)(t.children),o=(0,d.mergeChildMappings)(n,r);Object.keys(o).forEach(function(i){var a=o[i];if((0,p.isValidElement)(a)){var s=function(t){e.handleExited(a.key,t,a.props.onExited)},u=i in n,l=i in r,c=n[i],f=(0,p.isValidElement)(c)&&!c.props.in;!l||u&&!f?l||!u||f?l&&u&&(0,p.isValidElement)(c)&&(o[i]=(0,p.cloneElement)(a,{onExited:s,in:c.props.in,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})):o[i]=(0,p.cloneElement)(a,{in:!1}):o[i]=(0,p.cloneElement)(a,{onExited:s,in:!0,exit:e.getProp(a,"exit",t),enter:e.getProp(a,"enter",t)})}}),this.setState({children:o})},e.prototype.render=function(){var t=this.props,e=t.component,n=t.childFactory,r=o(t,["component","childFactory"]),i=this.state.children;return delete r.appear,delete r.enter,delete r.exit,f.default.createElement(e,r,h(i).map(n))},e}(f.default.Component);x.childContextTypes={transitionGroup:c.default.object.isRequired},x.propTypes={},x.defaultProps=E,e.default=x,t.exports=e.default},function(t,e,n){"use strict";function r(t,e){t.classList?t.classList.add(e):(0,i.default)(t)||(t.className=t.className+" "+e)}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r;var o=n(7),i=function(t){return t&&t.__esModule?t:{default:t}}(o);t.exports=e.default},function(t,e,n){"use strict";function r(t,e){return t.classList?!!e&&t.classList.contains(e):-1!==(" "+t.className+" ").indexOf(" "+e+" ")}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r,t.exports=e.default},function(t,e,n){"use strict";t.exports=function(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s)"+e+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}},function(t,e,n){"use strict";function r(t){return function(){return t}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(t){return t},t.exports=o},function(t,e,n){"use strict";function r(t,e,n,r,i,a,s,u){if(o(e),!t){var l;if(void 0===e)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,s,u],p=0;l=new Error(e.replace(/%s/g,function(){return c[p++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(t){};t.exports=r},function(t,e,n){"use strict";var r=n(9),o=n(10);t.exports=function(){function t(){o(!1)}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var o=n(4),i=r(o),a=n(5),s=r(a),u=n(2),l=r(u);t.exports={Transition:l.default,TransitionGroup:s.default,CSSTransition:i.default}},function(t,e,n){"use strict";function r(t,e){var n=function(t){return e&&(0,i.isValidElement)(t)?e(t):t},r=Object.create(null);return t&&i.Children.map(t,function(t){return t}).forEach(function(t){r[t.key]=n(t)}),r}function o(t,e){function n(n){return n in e?e[n]:t[n]}t=t||{},e=e||{};var r=Object.create(null),o=[];for(var i in t)i in e?o.length&&(r[i]=o,o=[]):o.push(i);var a=void 0,s={};for(var u in e){if(r[u])for(a=0;a<r[u].length;a++){var l=r[u][a];s[r[u][a]]=n(l)}s[u]=n(u)}for(a=0;a<o.length;a++)s[o[a]]=n(o[a]);return s}e.__esModule=!0,e.getChildMapping=r,e.mergeChildMappings=o;var i=n(1)},function(t,n){t.exports=e}])});

package.json

 {
   "name": "react-transition-group",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A react component toolset for managing animations",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,25 +0,27 @@
-**ATTENTION!** To address many issues that have come up over the years, the API in v2.0.0 is different from the original React addon.
+# react-transition-group [![npm][npm-badge]][npm]
 
-**If you are migrating from `react-addons-transition-group` and `react-addons-css-transition-group`, [read the documentation for 1.x branch instead](https://github.com/reactjs/react-transition-group/tree/v1-stable) which is a drop-in replacement and is still actively maintained.**
+> **ATTENTION!** To address many issues that have come up over the years, the API in v2 is different from that in the original React addon.
+>
+> **For a drop-in replacement for `react-addons-transition-group` and `react-addons-css-transition-group`, use the v1 release, which is still actively maintained. Documentation and code for that release are available on the [`v1-stable`](https://github.com/reactjs/react-transition-group/tree/v1-stable) branch.**
+>
+> You can send pull requests with v1 bugfixes against the `v1-stable` branch.
 
-You can also send pull requests with 1.x bugfixes against the `v1-stable` branch.
+A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind.
 
-# react-transition-group
+## Documentation
 
-A set of components for managing component states (including mounting) over time,
-specifically designed with animation in mind.
+- [**Main documentation**](https://reactcommunity.org/react-transition-group/)
+- [Migration guide from v1](/Migration.md)
 
-Check out the documentation at: [https://reactcommunity.org/react-transition-group/](https://reactcommunity.org/react-transition-group/)
+## Examples
 
-And the Migration details from v1: [https://github.com/reactjs/react-transition-group/blob/master/migration.md](https://github.com/reactjs/react-transition-group/blob/master/migration.md)
-
-### Examples
-
 Clone the repo first:
 
-```sh
+```
 [e-mail]:reactjs/react-transition-group.git
 ```
 
-Then run `npm install` (or `yarn install`), and finally `npm run storybook` to
-start a storybook instance you can navigate to in your browser and see some examples
+Then run `npm install` (or `yarn`), and finally `npm run storybook` to start a storybook instance that you can navigate to in your browser to see the examples.
+
+[npm-badge]: https://img.shields.io/npm/v/react-transition-group.svg
+[npm]: https://www.npmjs.org/package/react-transition-group

Transition.js

@@ -79,4 +79,4 @@ 'use strict';
  * As noted the `Transition` component doesn't _do_ anything by itself to its child component.
- * What it does do is track transition states over time so you can adjust you
- * component (such as adding styles of classes) as it changes states.
+ * What it does do is track transition states over time so you can update the
+ * component (such as by adding styles or classes) when it changes states.
  *
@@ -90,7 +90,27 @@ * There are 4 main states a Transition can be in:
  * Transition state is toggled via the `in` prop. When `true` the component begins the
- * "Enter" stage. During this stage, the component will shift from its current transitions state,
+ * "Enter" stage. During this stage, the component will shift from its current transition state,
  * to `'entering'` for the duration of the transition and then to the `'entered'` stage once
- * it's complete. So in the following example: `<Transition in timeout={500} />`,
- * the component will immediately shift to `'entering'` and stay there for 500ms and switch to `'entered'`.
- * When `in` is `false` the same thing happens except the states are `'exiting'` to `'exited'`.
+ * it's complete. Let's take the following example:
+ *
+ * ```jsx
+ * state= { in: false };
+ *
+ * toggleEnterState = () => {
+ *   this.setState({ in: true });
+ * }
+ *
+ * render() {
+ *   return (
+ *     <div>
+ *       <Transition in={this.state.in} timeout={500} />
+ *       <button onClick={this.toggleEnterState}>Click to Enter</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * When the button is clicked the component will shift to the `'entering'` state and
+ * stay there for 500ms (the value of `timeout`) when finally switches to `'entered'`.
+ *
+ * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
  */
@@ -177,3 +197,3 @@
 
-    if (typeof timeout !== 'number') {
+    if (timeout != null && typeof timeout !== 'number') {
       exit = timeout.exit;
@@ -308,3 +328,5 @@ enter = timeout.enter;
       }
-      setTimeout(this.nextCallback, timeout);
+      if (timeout != null) {
+        setTimeout(this.nextCallback, timeout);
+      }
     } else {
@@ -324,7 +346,20 @@ setTimeout(this.nextCallback, 0);
         childProps = _objectWithoutProperties(_props, ['children']);
+    // filter props for Transtition
 
-    Object.keys(Transition.propTypes).forEach(function (key) {
-      return delete childProps[key];
-    });
 
+    delete childProps.in;
+    delete childProps.mountOnEnter;
+    delete childProps.unmountOnExit;
+    delete childProps.appear;
+    delete childProps.enter;
+    delete childProps.exit;
+    delete childProps.timeout;
+    delete childProps.addEndListener;
+    delete childProps.onEnter;
+    delete childProps.onEntering;
+    delete childProps.onEntered;
+    delete childProps.onExit;
+    delete childProps.onExiting;
+    delete childProps.onExited;
+
     if (typeof children === 'function') {
@@ -375,3 +410,3 @@ return children(status, childProps);
    * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
-   * mounted even on exit unless you also specify `unmountOnExit`
+   * mounted, even on "exited", unless you also specify `unmountOnExit`.
    */
@@ -381,4 +416,4 @@ mountOnEnter: PropTypes.bool,
   /**
-   * By default the child component is mounted in the DOM after it enteres the `'exited'` state.
-   * If you'd prefer to completely unmonut the component after it exits, set `unmountOnExit`.
+   * By default the child component stays mounted after it reaches the `'exited'` state.
+   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
    */
@@ -388,5 +423,5 @@ unmountOnExit: PropTypes.bool,
   /**
-   * Normally a component is not transitioned on it's initial mount. If you
-   * want to transition on the first mount set `appear` to `true`, and the
-   * component will enter the component.
+   * Normally a component is not transitioned if it shown when the `<Transition>` component mounts.
+   * If you want to transition on the first mount set `appear` to `true`, and the
+   * component will transition in as soon as the `<Transition>` mounts.
    *
@@ -409,2 +444,3 @@ * > Note: there are no specific "appear" states. `apprear` only an additional `enter` transition.
    * The duration for the transition, in milliseconds.
+   * Required unless `addEventListener` is provided
    *
@@ -423,8 +459,16 @@ * You may specify a single timeout for all transitions like: `timeout={500}`,
    */
-  timeout: _PropTypes.timeoutsShape,
+  timeout: function timeout(props) {
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
 
+    var pt = _PropTypes.timeoutsShape;
+    if (!props.addEndListener) pt = pt.isRequired;
+    return pt.apply(undefined, [props].concat(args));
+  },
+
   /**
    * Add a custom transition end trigger. Called with the transitioning
    * DOM node and a `done` callback. Allows for more fine grained transition end
-   * logic. **Note:** Timeouts are still used as a fallback.
+   * logic. **Note:** Timeouts are still used as a fallback if provided.
    *
@@ -431,0 +475,0 @@ * ```jsx

utils/PropTypes.js

@@ -37,3 +37,3 @@ 'use strict';
   exit: _propTypes2.default.number
-}).isRequired]).isRequired;
+}).isRequired]);
 
@@ -40,0 +40,0 @@ var classNamesShape = exports.classNamesShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({

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

Improved metrics

Total package byte prevSize

145278

increased by2.32%

Lines of code

3215

increased by3.34%

Number of lines in readme file

28

increased by7.69%

No dependency changes