UNPKG

@bkrem/react-transition-group

Version:

A react component toolset for managing animations

1 lines 19.2 kB
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.ReactTransitionGroup=t(require("react"),require("react-dom")):e.ReactTransitionGroup=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=18)}([function(t,n){t.exports=e},function(e,t,n){"use strict";"function"==typeof Symbol&&Symbol.iterator;e.exports=n(14)()},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u=n(6),l=o(u),p=n(0),c=o(p),f=n(1),d=o(f),m=n(16),h=(o(m),n(15)),y=n(19),v=(d.default.any,d.default.func,d.default.node,{component:"span",childFactory:function(e){return e}}),g=function(e){function t(n,o){r(this,t);var a=i(this,e.call(this,n,o));return a.performAppear=function(e,t){a.currentlyTransitioningKeys[e]=!0,t.componentWillAppear?t.componentWillAppear(a._handleDoneAppearing.bind(a,e,t)):a._handleDoneAppearing(e,t)},a._handleDoneAppearing=function(e,t){t&&t.componentDidAppear&&t.componentDidAppear(),delete a.currentlyTransitioningKeys[e];var n=(0,y.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)||a.performLeave(e,t)},a.performEnter=function(e,t){a.currentlyTransitioningKeys[e]=!0,t.componentWillEnter?t.componentWillEnter(a._handleDoneEntering.bind(a,e,t)):a._handleDoneEntering(e,t)},a._handleDoneEntering=function(e,t){t&&t.componentDidEnter&&t.componentDidEnter(),delete a.currentlyTransitioningKeys[e];var n=(0,y.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)||a.performLeave(e,t)},a.performLeave=function(e,t){a.currentlyTransitioningKeys[e]=!0,t&&t.componentWillLeave?t.componentWillLeave(a._handleDoneLeaving.bind(a,e,t)):a._handleDoneLeaving(e,t)},a._handleDoneLeaving=function(e,t){t&&t.componentDidLeave&&t.componentDidLeave(),delete a.currentlyTransitioningKeys[e];var n=(0,y.getChildMapping)(a.props.children);n&&n.hasOwnProperty(e)?a.keysToEnter.push(e):a.setState(function(t){var n=s({},t.children);return delete n[e],{children:n}})},a.childRefs=Object.create(null),a.currentlyTransitioningKeys={},a.keysToEnter=[],a.keysToLeave=[],a.state={children:(0,y.getChildMapping)(n.children)},a}return a(t,e),t.prototype.componentDidMount=function(){var e=this.state.children;for(var t in e)e[t]&&this.performAppear(t,this.childRefs[t])},t.getDerivedStateFromProps=function(e,t){var n=(0,y.getChildMapping)(e.children),o=t.children;return{children:(0,y.mergeChildMappings)(o,n)}},t.prototype.componentDidUpdate=function(e,t){var n=this,o=(0,y.getChildMapping)(this.props.children),r=t.children;for(var i in o){var a=r&&r.hasOwnProperty(i);!o[i]||a||this.currentlyTransitioningKeys[i]||this.keysToEnter.push(i)}for(var s in r){var u=o&&o.hasOwnProperty(s);!r[s]||u||this.currentlyTransitioningKeys[s]||this.keysToLeave.push(s)}var l=this.keysToEnter;this.keysToEnter=[],l.forEach(function(e){return n.performEnter(e,n.childRefs[e])});var p=this.keysToLeave;this.keysToLeave=[],p.forEach(function(e){return n.performLeave(e,n.childRefs[e])})},t.prototype.render=function(){var e=this,t=[];for(var n in this.state.children)!function(n){var o=e.state.children[n];if(o){var r="string"!=typeof o.ref,i=e.props.childFactory(o),a=function(t){e.childRefs[n]=t};i===o&&r&&(a=(0,l.default)(o.ref,a)),t.push(c.default.cloneElement(i,{key:n,ref:a}))}}(n);var o=s({},this.props);return delete o.transitionLeave,delete o.transitionName,delete o.transitionAppear,delete o.transitionEnter,delete o.childFactory,delete o.transitionLeaveTimeout,delete o.transitionEnterTimeout,delete o.transitionAppearTimeout,delete o.component,c.default.createElement(this.props.component,o,t)},t}(c.default.Component);g.displayName="TransitionGroup",g.propTypes={},g.defaultProps=v,t.default=(0,h.polyfill)(g),e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=!("undefined"==typeof window||!window.document||!window.document.createElement),e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e){var t="transition"+e+"Timeout",n="transition"+e;return function(e){if(e[n]){if(null==e[t])return new Error(t+" 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 e[t])return new Error(t+" must be a number (in milliseconds)")}return null}}t.__esModule=!0,t.nameShape=void 0,t.transitionTimeout=r;var i=n(0),a=(o(i),n(1)),s=o(a);t.nameShape=s.default.oneOfType([s.default.string,s.default.shape({enter:s.default.string,leave:s.default.string,active:s.default.string}),s.default.shape({enter:s.default.string,enterActive:s.default.string,leave:s.default.string,leaveActive:s.default.string,appear:s.default.string,appearActive:s.default.string})])},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}t.__esModule=!0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},u=n(0),l=o(u),p=n(1),c=o(p),f=n(2),d=o(f),m=n(17),h=o(m),y=n(4),v=(y.nameShape.isRequired,c.default.bool,c.default.bool,c.default.bool,(0,y.transitionTimeout)("Appear"),(0,y.transitionTimeout)("Enter"),(0,y.transitionTimeout)("Leave"),{transitionAppear:!1,transitionEnter:!0,transitionLeave:!0}),g=function(e){function t(){var n,o,a;r(this,t);for(var s=arguments.length,u=Array(s),p=0;p<s;p++)u[p]=arguments[p];return n=o=i(this,e.call.apply(e,[this].concat(u))),o._wrapChild=function(e){return l.default.createElement(h.default,{name:o.props.transitionName,appear:o.props.transitionAppear,enter:o.props.transitionEnter,leave:o.props.transitionLeave,appearTimeout:o.props.transitionAppearTimeout,enterTimeout:o.props.transitionEnterTimeout,leaveTimeout:o.props.transitionLeaveTimeout},e)},a=n,i(o,a)}return a(t,e),t.prototype.render=function(){return l.default.createElement(d.default,s({},this.props,{childFactory:this._wrapChild}))},t}(l.default.Component);g.displayName="CSSTransitionGroup",g.propTypes={},g.defaultProps=v,t.default=g,e.exports=t.default},function(e,t,n){"use strict";e.exports=function(){for(var e=arguments.length,t=[],n=0;n<e;n++)t[n]=arguments[n];if(t=t.filter(function(e){return null!=e}),0!==t.length)return 1===t.length?t[0]:t.reduce(function(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}})}},function(e,t,n){"use strict";function o(e,t){e.classList?e.classList.add(t):(0,i.default)(e,t)||("string"==typeof e.className?e.className=e.className+" "+t:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(8),i=function(e){return e&&e.__esModule?e:{default:e}}(r);e.exports=t.default},function(e,t,n){"use strict";function o(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o,e.exports=t.default},function(e,t,n){"use strict";function o(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}e.exports=function(e,t){e.classList?e.classList.remove(t):"string"==typeof e.className?e.className=o(e.className,t):e.setAttribute("class",o(e.className&&e.className.baseVal||"",t))}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.animationEnd=t.animationDelay=t.animationTiming=t.animationDuration=t.animationName=t.transitionEnd=t.transitionDuration=t.transitionDelay=t.transitionTiming=t.transitionProperty=t.transform=void 0;var o=n(3),r=function(e){return e&&e.__esModule?e:{default:e}}(o),i="transform",a=void 0,s=void 0,u=void 0,l=void 0,p=void 0,c=void 0,f=void 0,d=void 0,m=void 0,h=void 0,y=void 0;if(r.default){var v=function(){for(var e=document.createElement("div").style,t={O:function(e){return"o"+e.toLowerCase()},Moz:function(e){return e.toLowerCase()},Webkit:function(e){return"webkit"+e},ms:function(e){return"MS"+e}},n=Object.keys(t),o=void 0,r=void 0,i="",a=0;a<n.length;a++){var s=n[a];if(s+"TransitionProperty"in e){i="-"+s.toLowerCase(),o=t[s]("TransitionEnd"),r=t[s]("AnimationEnd");break}}return!o&&"transitionProperty"in e&&(o="transitionend"),!r&&"animationName"in e&&(r="animationend"),e=null,{animationEnd:r,transitionEnd:o,prefix:i}}();a=v.prefix,t.transitionEnd=s=v.transitionEnd,t.animationEnd=u=v.animationEnd,t.transform=i=a+"-"+i,t.transitionProperty=l=a+"-transition-property",t.transitionDuration=p=a+"-transition-duration",t.transitionDelay=f=a+"-transition-delay",t.transitionTiming=c=a+"-transition-timing-function",t.animationName=d=a+"-animation-name",t.animationDuration=m=a+"-animation-duration",t.animationTiming=h=a+"-animation-delay",t.animationDelay=y=a+"-animation-timing-function"}t.transform=i,t.transitionProperty=l,t.transitionTiming=c,t.transitionDelay=f,t.transitionDuration=p,t.transitionEnd=s,t.animationName=d,t.animationDuration=m,t.animationTiming=h,t.animationDelay=y,t.animationEnd=u,t.default={transform:i,end:s,property:l,timing:c,delay:f,duration:p}},function(e,t,n){"use strict";function o(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-c)),o=setTimeout(e,n);return c=t,o}Object.defineProperty(t,"__esModule",{value:!0});var r=n(3),i=function(e){return e&&e.__esModule?e:{default:e}}(r),a=["","webkit","moz","o","ms"],s="clearTimeout",u=o,l=void 0,p=function(e,t){return e+(e?t[0].toUpperCase()+t.substr(1):t)+"AnimationFrame"};i.default&&a.some(function(e){var t=p(e,"request");if(t in window)return s=p(e,"cancel"),u=function(e){return window[t](e)}});var c=(new Date).getTime();l=function(e){return u(e)},l.cancel=function(e){window[s]&&"function"==typeof window[s]&&window[s](e)},t.default=l,e.exports=t.default},function(e,t,n){"use strict";function o(e){return function(){return e}}var r=function(){};r.thatReturns=o,r.thatReturnsFalse=o(!1),r.thatReturnsTrue=o(!0),r.thatReturnsNull=o(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function o(e,t,n,o,i,a,s,u){if(r(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[n,o,i,a,s,u],c=0;l=new Error(t.replace(/%s/g,function(){return p[c++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var r=function(e){};e.exports=o},function(e,t,n){"use strict";var o=n(12),r=n(13);e.exports=function(){function e(){r(!1)}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=o,n.PropTypes=n,n}},function(e,t,n){"use strict";function o(){var e=this.constructor.getDerivedStateFromProps(this.props,this.state);null!==e&&void 0!==e&&this.setState(e)}function r(e){function t(t){var n=this.constructor.getDerivedStateFromProps(e,t);return null!==n&&void 0!==n?n:null}this.setState(t.bind(this))}function i(e,t){try{var n=this.props,o=this.state;this.props=e,this.state=t,this.__reactInternalSnapshotFlag=!0,this.__reactInternalSnapshot=this.getSnapshotBeforeUpdate(n,o)}finally{this.props=n,this.state=o}}function a(e){var t=e.prototype;if(!t||!t.isReactComponent)throw new Error("Can only polyfill class components");if("function"!=typeof e.getDerivedStateFromProps&&"function"!=typeof t.getSnapshotBeforeUpdate)return e;var n=null,a=null,s=null;if("function"==typeof t.componentWillMount?n="componentWillMount":"function"==typeof t.UNSAFE_componentWillMount&&(n="UNSAFE_componentWillMount"),"function"==typeof t.componentWillReceiveProps?a="componentWillReceiveProps":"function"==typeof t.UNSAFE_componentWillReceiveProps&&(a="UNSAFE_componentWillReceiveProps"),"function"==typeof t.componentWillUpdate?s="componentWillUpdate":"function"==typeof t.UNSAFE_componentWillUpdate&&(s="UNSAFE_componentWillUpdate"),null!==n||null!==a||null!==s){var u=e.displayName||e.name,l="function"==typeof e.getDerivedStateFromProps?"getDerivedStateFromProps()":"getSnapshotBeforeUpdate()";throw Error("Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n"+u+" uses "+l+" but also contains the following legacy lifecycles:"+(null!==n?"\n "+n:"")+(null!==a?"\n "+a:"")+(null!==s?"\n "+s:"")+"\n\nThe above lifecycles should be removed. Learn more about this warning here:\nhttps://fb.me/react-async-component-lifecycle-hooks")}if("function"==typeof e.getDerivedStateFromProps&&(t.componentWillMount=o,t.componentWillReceiveProps=r),"function"==typeof t.getSnapshotBeforeUpdate){if("function"!=typeof t.componentDidUpdate)throw new Error("Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype");t.componentWillUpdate=i;var p=t.componentDidUpdate;t.componentDidUpdate=function(e,t,n){var o=this.__reactInternalSnapshotFlag?this.__reactInternalSnapshot:n;p.call(this,e,t,o)}}return e}t.__esModule=!0,o.__suppressDeprecationWarning=!0,r.__suppressDeprecationWarning=!0,i.__suppressDeprecationWarning=!0,t.polyfill=a},function(e,t,n){"use strict";var o=function(){};e.exports=o},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function s(e,t){return E.length?E.forEach(function(n){return e.addEventListener(n,t,!1)}):setTimeout(t,0),function(){E.length&&E.forEach(function(n){return e.removeEventListener(n,t,!1)})}}t.__esModule=!0;var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l=n(7),p=o(l),c=n(9),f=o(c),d=n(11),m=o(d),h=n(10),y=n(0),v=o(y),g=n(1),b=o(g),T=n(20),_=n(4),E=[];h.transitionEnd&&E.push(h.transitionEnd),h.animationEnd&&E.push(h.animationEnd);var w=(b.default.node,_.nameShape.isRequired,b.default.bool,b.default.bool,b.default.bool,b.default.number,b.default.number,b.default.number,function(e){function t(n,o){r(this,t);var a=i(this,e.call(this,n,o));return a.componentWillAppear=function(e){a.props.appear?a.transition("appear",e,a.props.appearTimeout):e()},a.componentWillEnter=function(e){a.props.enter?a.transition("enter",e,a.props.enterTimeout):e()},a.componentWillLeave=function(e){a.props.leave?a.transition("leave",e,a.props.leaveTimeout):e()},a.classNameAndNodeQueue=[],a.transitionTimeouts=[],a}return a(t,e),t.prototype.componentWillUnmount=function(){this.unmounted=!0,this.timeout&&clearTimeout(this.timeout),this.transitionTimeouts.forEach(function(e){clearTimeout(e)}),this.classNameAndNodeQueue.length=0},t.prototype.transition=function(e,t,n){var o=(0,T.findDOMNode)(this);if(!o)return void(t&&t());var r=this.props.name[e]||this.props.name+"-"+e,i=this.props.name[e+"Active"]||r+"-active",a=null,u=void 0;(0,p.default)(o,r),this.queueClassAndNode(i,o);var l=function(e){e&&e.target!==o||(clearTimeout(a),u&&u(),(0,f.default)(o,r),(0,f.default)(o,i),u&&u(),t&&t())};n?(a=setTimeout(l,n),this.transitionTimeouts.push(a)):h.transitionEnd&&(u=s(o,l))},t.prototype.queueClassAndNode=function(e,t){var n=this;this.classNameAndNodeQueue.push({className:e,node:t}),this.rafHandle||(this.rafHandle=(0,m.default)(function(){return n.flushClassNameAndNodeQueue()}))},t.prototype.flushClassNameAndNodeQueue=function(){this.unmounted||this.classNameAndNodeQueue.forEach(function(e){e.node.scrollTop,(0,p.default)(e.node,e.className)}),this.classNameAndNodeQueue.length=0,this.rafHandle=null},t.prototype.render=function(){var e=u({},this.props);return delete e.name,delete e.appear,delete e.enter,delete e.leave,delete e.appearTimeout,delete e.enterTimeout,delete e.leaveTimeout,delete e.children,v.default.cloneElement(v.default.Children.only(this.props.children),e)},t}(v.default.Component));w.displayName="CSSTransitionGroupChild",w.propTypes={},t.default=w,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var r=n(5),i=o(r),a=n(2),s=o(a);e.exports={TransitionGroup:s.default,CSSTransitionGroup:i.default}},function(e,t,n){"use strict";function o(e){if(!e)return e;var t={};return i.Children.map(e,function(e){return e}).forEach(function(e){t[e.key]=e}),t}function r(e,t){function n(n){return t.hasOwnProperty(n)?t[n]:e[n]}e=e||{},t=t||{};var o={},r=[];for(var i in e)t.hasOwnProperty(i)?r.length&&(o[i]=r,r=[]):r.push(i);var a=void 0,s={};for(var u in t){if(o.hasOwnProperty(u))for(a=0;a<o[u].length;a++){var l=o[u][a];s[o[u][a]]=n(l)}s[u]=n(u)}for(a=0;a<r.length;a++)s[r[a]]=n(r[a]);return s}t.__esModule=!0,t.getChildMapping=o,t.mergeChildMappings=r;var i=n(0)},function(e,n){e.exports=t}])});