react-transition-group - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0-beta.0

CSSTransition.js

@@ -142,55 +142,3 @@ 'use strict';
  *
- * ```js
- * import CSSTransition from 'react-transition-group/CSSTransition';
- *
- * const Fade = ({ children, ...props }) => (
- *  <CSSTransition
- *    {...props}
- *    timeout={500}
- *    classNames="fade"
- *  >
- *   {children}
- *  </CSSTransition>
- * );
- *
- * class FadeInAndOut extends React.Component {
- *   constructor(...args) {
- *     super(...args);
- *     this.state= { show: false }
- *
- *     setInterval(() => {
- *       this.setState({ show: !this.state.show })
- *     }, 5000)
- *   }
- *   render() {
- *     return (
- *       <Fade in={this.state.show}>
- *         <div>Hello world</div>
- *       </Fade>
- *     )
- *   }
- * }
- * ```
- *
- * And the coorresponding CSS for the `<Fade>` component:
- *
- * ```css
- * .fade-enter {
- *   opacity: 0.01;
- * }
- *
- * .fade-enter.fade-enter-active {
- *   opacity: 1;
- *   transition: opacity 500ms ease-in;
- * }
- *
- * .fade-exit {
- *   opacity: 1;
- * }
- *
- * .fade-exit.fade-exit-active {
- *   opacity: 0.01;
- *   transition: opacity 300ms ease-in;
- * }
- * ```
+ * <iframe src="https://codesandbox.io/embed/yv645oq21x?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
  */
@@ -197,0 +145,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 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",g=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.pendingState||this.state,n=e.status;t.in?(n===E&&this.setState({status:x}),n!==m&&n!==y&&(this.nextStatus=m)):n!==m&&n!==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],e=this.nextStatus;if(null!==e){this.nextStatus=null,this.cancelNextCallback();var n=h.default.findDOMNode(this);e===m?this.performEnter(n,t):this.performExit(n)}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){var n=this;this.pendingState=t,e=this.setNextCallback(e),this.setState(t,function(){n.pendingState=null,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);g.contextTypes={transitionGroup:c.object},g.childContextTypes={transitionGroup:function(){}},g.propTypes={},g.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},g.UNMOUNTED=0,g.EXITED=1,g.ENTERING=2,g.ENTERED=3,g.EXITING=4,e.default=g},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)})},g=function(t,e){return e&&e.split(" ").forEach(function(e){return(0,d.default)(t,e)})},b=(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&&g(t,r),o&&g(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));b.propTypes={},e.default=b,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}])});
+!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.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=6)}([function(t,e,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;t.exports=n(8)()},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(3),h=r(d),E=(n(4),e.UNMOUNTED="unmounted"),y=e.EXITED="exited",x=e.ENTERING="entering",m=e.ENTERED="entered",v=e.EXITING="exiting",g=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=y,o.nextStatus=x):l=m:l=n.unmountOnExit||n.mountOnEnter?E:y,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.pendingState||this.state,n=e.status;t.in?(n===E&&this.setState({status:y}),n!==x&&n!==m&&(this.nextStatus=x)):n!==x&&n!==m||(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],e=this.nextStatus;if(null!==e){this.nextStatus=null,this.cancelNextCallback();var n=h.default.findDOMNode(this);e===x?this.performEnter(n,t):this.performExit(n)}else this.props.unmountOnExit&&this.state.status===y&&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:m},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:m},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:y},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:y},function(){e.props.onExited(t)})})})},e.prototype.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},e.prototype.safeSetState=function(t,e){var n=this;this.pendingState=t,e=this.setNextCallback(e),this.setState(t,function(){n.pendingState=null,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);g.contextTypes={transitionGroup:c.object},g.childContextTypes={transitionGroup:function(){}},g.propTypes={},g.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},g.UNMOUNTED=0,g.EXITED=1,g.ENTERING=2,g.ENTERED=3,g.EXITING=4,e.default=g},function(t,n){t.exports=e},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){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(15),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}}),y=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);y.childContextTypes={transitionGroup:c.default.object.isRequired},y.propTypes={},y.defaultProps=E,e.default=y,t.exports=e.default},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}var o=n(7),i=r(o),a=n(14),s=r(a),u=n(5),l=r(u),c=n(2),p=r(c);t.exports={Transition:p.default,TransitionGroup:l.default,ReplaceTransition:s.default,CSSTransition:i.default}},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(11),p=r(c),f=n(13),d=r(f),h=n(1),E=r(h),y=n(2),x=r(y),m=n(4),v=function(t,e){return e&&e.split(" ").forEach(function(e){return(0,p.default)(t,e)})},g=function(t,e){return e&&e.split(" ").forEach(function(e){return(0,d.default)(t,e)})},b=(s({},x.default.propTypes,{classNames:m.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&&g(t,r),o&&g(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(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));b.propTypes={},e.default=b,t.exports=e.default},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 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";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(12),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 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=n(0),l=r(u),c=n(1),p=r(c),f=n(3),d=n(5),h=r(d),E=(l.default.bool.isRequired,function(t){function e(){var n,r,o;i(this,e);for(var s=arguments.length,u=Array(s),l=0;l<s;l++)u[l]=arguments[l];return n=r=a(this,t.call.apply(t,[this].concat(u))),y.call(r),o=n,a(r,o)}return s(e,t),e.prototype.handleLifecycle=function(t,e,n){var r,o=this.props.children,i=p.default.Children.toArray(o)[e];i.props[t]&&(r=i.props)[t].apply(r,n),this.props[t]&&this.props[t]((0,f.findDOMNode)(this))},e.prototype.render=function(){var t=this.props,e=t.children,n=t.in,r=o(t,["children","in"]),i=p.default.Children.toArray(e),a=i[0],s=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,p.default.createElement(h.default,r,n?p.default.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):p.default.cloneElement(s,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},e}(p.default.Component)),y=function(){var t=this;this.handleEnter=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},this.handleEntering=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},this.handleEntered=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},this.handleExit=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},this.handleExiting=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},this.handleExited=function(){for(var e=arguments.length,n=Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)}};E.propTypes={},e.default=E,t.exports=e.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)}])});

index.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _ReplaceTransition = require('./ReplaceTransition');
+
+var _ReplaceTransition2 = _interopRequireDefault(_ReplaceTransition);
+
 var _TransitionGroup = require('./TransitionGroup');
@@ -21,3 +25,4 @@
   TransitionGroup: _TransitionGroup2.default,
+  ReplaceTransition: _ReplaceTransition2.default,
   CSSTransition: _CSSTransition2.default
 };

package.json

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

Transition.js

@@ -114,2 +114,7 @@ 'use strict';
  * When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
+ *
+ * ### Example
+ *
+ * <iframe src="https://codesandbox.io/embed/y26rj99yov?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+ *
  */
@@ -116,0 +121,0 @@

TransitionGroup.js

@@ -96,44 +96,5 @@ 'use strict';
  * component in a `<TransitionGroup>`, not just css.
+ * *
+ * <iframe src="https://codesandbox.io/embed/43v5wj62q9?autoresize=1&fontsize=12&hidenavigation=1&moduleview=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
  *
- * ```jsx
- * import TransitionGroup from 'react-transition-group/TransitionGroup';
- *
- * class TodoList extends React.Component {
- *   constructor(props) {
- *     super(props)
- *     this.state = {items: ['hello', 'world', 'click', 'me']}
- *   }
- *   handleAdd() {
- *     const newItems = this.state.items.concat([
- *       prompt('Enter some text')
- *     ]);
- *     this.setState({ items: newItems });
- *   }
- *   handleRemove(i) {
- *     let newItems = this.state.items.slice();
- *     newItems.splice(i, 1);
- *     this.setState({items: newItems});
- *   }
- *   render() {
- *     return (
- *       <div>
- *         <button onClick={() => this.handleAdd()}>Add Item</button>
- *         <TransitionGroup>
- *           {this.state.items.map((item, i) => (
- *             <FadeTransition key={item}>
- *               <div>
- *                 {item}{' '}
- *                 <button onClick={() => this.handleRemove(i)}>
- *                   remove
- *                 </button>
- *               </div>
- *             </FadeTransition>
- *           ))}
- *         </TransitionGroup>
- *       </div>
- *     );
- *   }
- * }
- * ```
- *
  * Note that `<TransitionGroup>`  does not define any animation behavior!
@@ -140,0 +101,0 @@ * Exactly _how_ a list item animates is up to the individual `<Transition>`

New alerts

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

159988

increased by8.49%

Number of package files

13

increased by8.33%

Lines of code

3321

increased by2.75%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

26

increased by8.33%

No dependency changes