preact-css-transition-group
Version:
Apply CSS transitions when adding or removing Preact components/elements.
2 lines • 7.55 kB
JavaScript
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("preact")):"function"==typeof define&&define.amd?define(["preact"],n):t.PreactCSSTransitionGroup=n(t.preact)}(this,function(t){"use strict";function n(t){return t.attributes&&t.attributes.key}function e(t){return t.base}function i(t){return t&&t[0]}function r(t){return t&&t.filter(function(t){return null!==t})}function o(t,n){for(var e=t.length;e--;)if(n(t[e]))return!0;return!1}function s(t,e){return o(t,function(t){return n(t)===e})}function a(t,e){return s(t,n(e))}function u(t,e,i){return o(t,function(t){return n(t)===e&&t.props[i]})}function c(t,e,i){return u(t,n(e),i)}function p(t,e){var i=[],r={},o=[];return t.forEach(function(t){var i=n(t);s(e,i)?o.length&&(r[i]=o,o=[]):o.push(t)}),e.forEach(function(t){var e=n(t);r.hasOwnProperty(e)&&(i=i.concat(r[e])),i.push(t)}),i.concat(o)}function l(t,n){if(t.classList){var e;(e=t.classList).add.apply(e,n.split(" "))}else t.className+=" "+n}function h(t,n){if(n=n.trim(),t.classList){var e;(e=t.classList).remove.apply(e,n.split(" "))}else{var i=t.className.trim(),r=T(i);for(n=v+n+v;r.indexOf(n)>=0;)r=r.replace(n,v);t.className=r.trim()}}function f(){var t=document.createElement("div"),n=t.style;"AnimationEvent"in window||delete E.animationend.animation,"TransitionEvent"in window||delete E.transitionend.transition;for(var e in E){var i=E[e];for(var r in i)if(r in n){L.push(i[r]);break}}}function m(t,n){return L.length?void L.forEach(function(e){t.addEventListener(e,n,!1)}):window.setTimeout(n,0)}function d(t,n){L.length&&L.forEach(function(e){t.removeEventListener(e,n,!1)})}var v=" ",y=/[\n\t\r]+/g,T=function(t){return(v+t+v).replace(y,v)},E={transitionend:{transition:"transitionend",WebkitTransition:"webkitTransitionEnd",MozTransition:"mozTransitionEnd",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd"},animationend:{animation:"animationend",WebkitAnimation:"webkitAnimationEnd",MozAnimation:"mozAnimationEnd",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd"}},L=[];"undefined"!=typeof window&&f();var g=function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")},w=function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)},b=function(t,n){var e={};for(var i in t)n.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},k=function(t,n){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?t:n},N=17,O=function(t){function n(){var i,r,o;g(this,n);for(var s=arguments.length,a=Array(s),u=0;u<s;u++)a[u]=arguments[u];return i=r=k(this,t.call.apply(t,[this].concat(a))),r.flushClassNameQueue=function(){e(r)&&l(e(r),r.classNameQueue.join(" ")),r.classNameQueue.length=0,r.timeout=null},o=i,k(r,o)}return w(n,t),n.prototype.transition=function(t,n,i){var r=this,o=e(this),s=this.props.name[t]||this.props.name+"-"+t,a=this.props.name[t+"Active"]||s+"-active",u=null;this.endListener&&this.endListener(),this.endListener=function(t){t&&t.target!==o||(clearTimeout(u),h(o,s),h(o,a),d(o,r.endListener),r.endListener=null,n&&n())},i?(u=setTimeout(this.endListener,i),this.transitionTimeouts.push(u)):m(o,this.endListener),l(o,s),this.queueClass(a)},n.prototype.queueClass=function(t){this.classNameQueue.push(t),this.timeout||(this.timeout=setTimeout(this.flushClassNameQueue,N))},n.prototype.stop=function(){this.timeout&&(clearTimeout(this.timeout),this.classNameQueue.length=0,this.timeout=null),this.endListener&&this.endListener()},n.prototype.componentWillMount=function(){this.classNameQueue=[],this.transitionTimeouts=[]},n.prototype.componentWillUnmount=function(){this.timeout&&clearTimeout(this.timeout),this.transitionTimeouts.forEach(function(t){clearTimeout(t)})},n.prototype.componentWillEnter=function(t){this.props.enter?this.transition("enter",t,this.props.enterTimeout):t()},n.prototype.componentWillLeave=function(t){this.props.leave?this.transition("leave",t,this.props.leaveTimeout):t()},n.prototype.render=function(){return i(this.props.children)},n}(t.Component),W=function(e){function i(r){g(this,i);var o=k(this,e.call(this));return o.renderChild=function(e){var i=o.props,r=i.transitionName,s=i.transitionEnter,a=i.transitionLeave,u=i.transitionEnterTimeout,c=i.transitionLeaveTimeout,p=n(e);return t.h(O,{key:p,ref:function(t){(o.refs[p]=t)||(e=null)},name:r,enter:s,leave:a,enterTimeout:u,leaveTimeout:c},e)},o.refs={},o.state={children:(r.children||[]).slice()},o}return w(i,e),i.prototype.shouldComponentUpdate=function(t,n){var e=n.children;return e!==this.state.children},i.prototype.componentWillMount=function(){this.currentlyTransitioningKeys={},this.keysToEnter=[],this.keysToLeave=[]},i.prototype.componentWillReceiveProps=function(e){var i=this,o=e.children,s=e.exclusive,u=e.showProp,l=r(o||[]).slice(),h=r(s?this.props.children:this.state.children),f=p(h,l);u&&(f=f.map(function(n){if(!n.props[u]&&c(h,n,u)){var e;n=t.cloneElement(n,(e={},e[u]=!0,e))}return n})),s&&f.forEach(function(t){return i.stop(n(t))}),this.setState({children:f}),this.forceUpdate(),l.forEach(function(t){var n=t.key,e=h&&a(h,t);if(u){if(e){var r=c(h,t,u),o=t.props[u];r||!o||i.currentlyTransitioningKeys[n]||i.keysToEnter.push(n)}}else e||i.currentlyTransitioningKeys[n]||i.keysToEnter.push(n)}),h.forEach(function(t){var n=t.key,e=l&&a(l,t);if(u){if(e){var r=c(l,t,u),o=t.props[u];r||!o||i.currentlyTransitioningKeys[n]||i.keysToLeave.push(n)}}else e||i.currentlyTransitioningKeys[n]||i.keysToLeave.push(n)})},i.prototype.performEnter=function(t){var n=this;this.currentlyTransitioningKeys[t]=!0;var e=this.refs[t];e.componentWillEnter?e.componentWillEnter(function(){return n._handleDoneEntering(t)}):this._handleDoneEntering(t)},i.prototype._handleDoneEntering=function(t){delete this.currentlyTransitioningKeys[t];var n=r(this.props.children),e=this.props.showProp;!n||!e&&!s(n,t)||e&&!u(n,t,e)?this.performLeave(t):this.setState({children:n})},i.prototype.stop=function(t){delete this.currentlyTransitioningKeys[t];var n=this.refs[t];n&&n.stop()},i.prototype.performLeave=function(t){var n=this;this.currentlyTransitioningKeys[t]=!0;var e=this.refs[t];e&&e.componentWillLeave?e.componentWillLeave(function(){return n._handleDoneLeaving(t)}):this._handleDoneLeaving(t)},i.prototype._handleDoneLeaving=function(t){delete this.currentlyTransitioningKeys[t];var n=this.props.showProp,e=r(this.props.children);n&&e&&u(e,t,n)?this.performEnter(t):!n&&e&&s(e,t)?this.performEnter(t):this.setState({children:e})},i.prototype.componentDidUpdate=function(){var t=this,n=this.keysToEnter,e=this.keysToLeave;this.keysToEnter=[],n.forEach(function(n){return t.performEnter(n)}),this.keysToLeave=[],e.forEach(function(n){return t.performLeave(n)})},i.prototype.render=function(n,e){var i=n.component,o=(n.transitionName,n.transitionEnter,n.transitionLeave,n.transitionEnterTimeout,n.transitionLeaveTimeout,n.children,b(n,["component","transitionName","transitionEnter","transitionLeave","transitionEnterTimeout","transitionLeaveTimeout","children"])),s=e.children;return t.h(i,o,r(s).map(this.renderChild))},i}(t.Component);return W.defaultProps={component:"span",transitionEnter:!0,transitionLeave:!0},W});
//# sourceMappingURL=preact-css-transition-group.min.js.map