animate-components
Version:
Elemental components for animations in React
2 lines • 17.7 kB
JavaScript
(function(a,b){'object'==typeof exports&&'object'==typeof module?module.exports=b(require('react'),require('prop-types'),require('element-utils'),require('animate-keyframes'),require('html-tags')):'function'==typeof define&&define.amd?define(['react','prop-types','element-utils','animate-keyframes','html-tags'],b):'object'==typeof exports?exports.animateComponents=b(require('react'),require('prop-types'),require('element-utils'),require('animate-keyframes'),require('html-tags')):a.animateComponents=b(a.react,a['prop-types'],a['element-utils'],a['animate-keyframes'],a['html-tags'])})(this,function(a,b,c,d,e){return function(a){function b(d){if(c[d])return c[d].exports;var e=c[d]={i:d,l:!1,exports:{}};return a[d].call(e.exports,e,e.exports,b),e.l=!0,e.exports}var c={};return b.m=a,b.c=c,b.d=function(a,c,d){b.o(a,c)||Object.defineProperty(a,c,{configurable:!1,enumerable:!0,get:d})},b.n=function(a){var c=a&&a.__esModule?function(){return a['default']}:function(){return a};return b.d(c,'a',c),c},b.o=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)},b.p='/',b(b.s=7)}([function(b){b.exports=a},function(a){a.exports=b},function(a){a.exports=c},function(a){a.exports=d},function(a,b,c){'use strict';function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){var c={};for(var d in a)0<=b.indexOf(d)||Object.prototype.hasOwnProperty.call(a,d)&&(c[d]=a[d]);return c}function f(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function g(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function h(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}Object.defineProperty(b,'__esModule',{value:!0});var i=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),j=c(0),k=d(j),l=c(1),m=d(l),n=c(5),o=d(n),p=c(2),q=c(9),r=d(q),s=c(6);b.default=function(a,b){var c=function(b){function c(a){f(this,c);var b=g(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,a));return d.call(b),b}return h(c,b),i(c,[{key:'render',value:function(){var b=this.props,c=b.children,d=b.duration,f=b.timingFunction,g=b.delay,h=b.direction,i=b.iterations,j=b.backfaceVisible,k=b.fillMode,l=b.playState,m=b.forceInterpolate,n=b.as,o=b.style,q=b.component,r=e(b,['children','duration','timingFunction','delay','direction','iterations','backfaceVisible','fillMode','playState','forceInterpolate','as','style','component']);return(0,p.Render)(a,this.props,this.state,r,a)}}]),c}(j.PureComponent);c.displayName=''+a,c.defaultProps={duration:'1s',timingFunction:'ease',delay:'0s',direction:'normal',iterations:'1',backfaceVisible:'visible',fillMode:'none',playState:'running',as:'div'};var d=function(){var a=this;this.state={styles:{}},this.componentDidMount=function(){a.setAnimation(a.props)},this.componentWillReceiveProps=function(c){var d=(0,r.default)(c,b),e=(0,r.default)(a.props,b);d!==e&&a.setState({styles:Object.assign({animation:''+d,backfaceVisibility:''+c.backfaceVisible},a.props.style||{})})},this.setAnimation=function(c){var d=(0,r.default)(c,b);a.setState({styles:Object.assign({animation:''+d,backfaceVisibility:''+c.backfaceVisible},a.props.style||{})})}};return c}},function(a){a.exports=e},function(a,b){'use strict';Object.defineProperty(b,'__esModule',{value:!0});b.names=function(a,b){'name'===a&&'string'!=typeof b[a]&&console.error('Warning: Failed propType. Prop value for animation name should be a string.')},b.duration=function(a,b){'duration'===a&&'string'!=typeof b[a]&&console.error('Warning: Failed propType. Prop value for animation duration should be a string. For eg - \'2s\'')},b.timingFunction=function(a,b){if('timingFunction'===a&&'string'==typeof b[a]){var c='\n Warning: Invalid timing Function \''+b[a]+'\' passed to the Merge component. The prop\n value for \'timingFunction\' should be one of [\'linear\', \'ease\', \'ease-in\', \'ease-out\', \'ease-in-out\',\n \'step-start\', \'step-end\']. Note steps(#, start|end) is supported via forceInterpolate prop. Refer to the docs for more info.\n ';return['linear','ease','ease-in','ease-out','ease-in-out','step-start','step-end'].includes(b[a])?null:console.error(c)}'timingFunction'===a&&'string'!=typeof b[a]&&console.error('Warning: Failed propType. Prop value for tf should be a string. For eg - \'ease-out\'')},b.propValidators=function(a){var b=['name','duration','timingFunction'];return b.includes(a)?null:console.error('Warning: Unknown prop \''+a+'\' passed to the Merge component. Prop should be one of ['+b+']')},b.direction=function(a,b){'direction'===a&&'string'!=typeof b[a]&&console.error('Warning: Failed propType. Prop value for \'direction\' should be a string.')},b.interpolateValidators=function(a){return['steps','direction'].includes(a)?null:console.error('Warning: Unknown prop \''+a+'\' passed to the Merge component.')}},function(a,b,c){'use strict';function d(a){return a&&a.__esModule?a:{default:a}}Object.defineProperty(b,'__esModule',{value:!0}),b.hoc=b.Disappear=b.Delay=b.Merge=b.ExpanseUp=b.ExpanseDown=b.ExpanseRight=b.ExpanseLeft=b.VanishOut=b.VanishIn=b.PuffOut=b.PuffIn=b.PLeft=b.PRight=b.PUp=b.PDown=b.Hatch=b.Entrance=b.ExpandUp=b.StarWars=b.SlideRight=b.SlideLeft=b.SlideDown=b.SlideUp=b.Pulse=b.Hinge=b.Zoom=b.Swing=b.Rubber=b.RollIn=b.RollOut=b.Flash=b.RotateUpLeft=b.RotateUpRight=b.RotateLeft=b.RotateRight=b.RotateIn=b.LightIn=b.LightOut=b.FlipOutY=b.FlipOutX=b.FlipInY=b.FlipInX=b.Flip=b.FadeInRightBig=b.FadeInLeftBig=b.FadeInUpBig=b.FadeInDown=b.FadeInLeft=b.FadeInRight=b.FadeInUp=b.FadeIn=b.BounceDown=b.BounceLeft=b.BounceRight=b.BounceUp=b.Bounce=void 0;var e=c(8),f=c(10),g=d(f),h=c(11),i=d(h),j=c(12),k=d(j),l=c(4),m=d(l),n=e.bounceObj.Bounce,o=e.bounceObj.BounceUp,p=e.bounceObj.BounceRight,q=e.bounceObj.BounceLeft,r=e.bounceObj.BounceDown,s=e.fadeObj.FadeIn,t=e.fadeObj.FadeInUp,u=e.fadeObj.FadeInRight,v=e.fadeObj.FadeInLeft,w=e.fadeObj.FadeInDown,x=e.fadeObj.FadeInUpBig,y=e.fadeObj.FadeInRightBig,z=e.fadeObj.FadeInLeftBig,A=e.flipObj.Flip,B=e.flipObj.FlipInX,C=e.flipObj.FlipInY,D=e.flipObj.FlipOutX,E=e.flipObj.FlipOutY,F=e.lightObj.LightOut,G=e.lightObj.LightIn,H=e.rotateObj.RotateIn,I=e.rotateObj.RotateRight,J=e.rotateObj.RotateLeft,K=e.rotateObj.RotateUpRight,L=e.rotateObj.RotateUpLeft,M=e.specialObj.Flash,N=e.specialObj.RollOut,O=e.specialObj.RollIn,P=e.specialObj.Rubber,Q=e.specialObj.Swing,R=e.specialObj.Zoom,S=e.specialObj.Hinge,T=e.specialObj.Pulse,U=e.specialObj.ExpandUp,V=e.specialObj.Entrance,W=e.specialObj.Hatch,X=e.specialObj.StarWars,Y=e.slideObj.SlideUp,Z=e.slideObj.SlideRight,$=e.slideObj.SlideLeft,_=e.slideObj.SlideDown,aa=e.PObj.PDown,ba=e.PObj.PUp,ca=e.PObj.PRight,da=e.PObj.PLeft,ea=e.bingoObj.PuffOut,fa=e.bingoObj.PuffIn,ga=e.bingoObj.VanishOut,ha=e.bingoObj.VanishIn,ia=e.expanseObj.ExpanseUp,ja=e.expanseObj.ExpanseRight,ka=e.expanseObj.ExpanseDown,la=e.expanseObj.ExpanseLeft;b.Bounce=n,b.BounceUp=o,b.BounceRight=p,b.BounceLeft=q,b.BounceDown=r,b.FadeIn=s,b.FadeInUp=t,b.FadeInRight=u,b.FadeInLeft=v,b.FadeInDown=w,b.FadeInUpBig=x,b.FadeInLeftBig=z,b.FadeInRightBig=y,b.Flip=A,b.FlipInX=B,b.FlipInY=C,b.FlipOutX=D,b.FlipOutY=E,b.LightOut=F,b.LightIn=G,b.RotateIn=H,b.RotateRight=I,b.RotateLeft=J,b.RotateUpRight=K,b.RotateUpLeft=L,b.Flash=M,b.RollOut=N,b.RollIn=O,b.Rubber=P,b.Swing=Q,b.Zoom=R,b.Hinge=S,b.Pulse=T,b.SlideUp=Y,b.SlideDown=_,b.SlideLeft=$,b.SlideRight=Z,b.StarWars=X,b.ExpandUp=U,b.Entrance=V,b.Hatch=W,b.PDown=aa,b.PUp=ba,b.PRight=ca,b.PLeft=da,b.PuffIn=fa,b.PuffOut=ea,b.VanishIn=ha,b.VanishOut=ga,b.ExpanseLeft=la,b.ExpanseRight=ja,b.ExpanseDown=ka,b.ExpanseUp=ia,b.Merge=g.default,b.Delay=i.default,b.Disappear=k.default,b.hoc=m.default},function(a,b,c){'use strict';Object.defineProperty(b,'__esModule',{value:!0}),b.bingoObj=b.bounceObj=b.expanseObj=b.fadeObj=b.lightObj=b.PObj=b.rotateObj=b.slideObj=b.specialObj=b.flipObj=void 0;var d=c(3),e=c(4),f=function(a){return a&&a.__esModule?a:{default:a}}(e),g={PuffOut:(0,f.default)('PuffOut',d.puffmeout),PuffIn:(0,f.default)('PuffIn',d.puffmein),VanishOut:(0,f.default)('VanishOut',d.vanishout),VanishIn:(0,f.default)('VanishIn',d.vanishin)},h={Bounce:(0,f.default)('Bounce',d.bounce),BounceDown:(0,f.default)('BounceDown',d.bounceDown),BounceUp:(0,f.default)('BounceUp',d.bounceUp),BounceLeft:(0,f.default)('BounceLeft',d.bounceLeft),BounceRight:(0,f.default)('BounceRight',d.bounceRight)},i={ExpanseUp:(0,f.default)('ExpanseUp',d.expanseUp),ExpanseDown:(0,f.default)('ExpanseDown',d.expanseDown),ExpanseLeft:(0,f.default)('ExpanseLeft',d.expanseLeft),ExpanseRight:(0,f.default)('ExpanseRight',d.expanseRight)},j={FadeIn:(0,f.default)('FadeIn',d.fadeIn),FadeInDown:(0,f.default)('FadeInDown',d.down),FadeInDownBig:(0,f.default)('FadeInDownBig',d.downBig),FadeInUp:(0,f.default)('FadeInUp',d.up),FadeInUpBig:(0,f.default)('FadeInUpBig',d.upBig),FadeInLeft:(0,f.default)('FadeInLeft',d.left),FadeInLeftBig:(0,f.default)('FadeInLeftBig',d.leftBig),FadeInRight:(0,f.default)('FadeInRight',d.right),FadeInRightBig:(0,f.default)('FadeInRightBig',d.rightBig)},k={LightIn:(0,f.default)('LightIn',d.lightIn),LightOut:(0,f.default)('LightOut',d.lightOut)},l={PDown:(0,f.default)('PDown',d.perspectiveDown),PUp:(0,f.default)('PUp',d.perspectiveUp),PRight:(0,f.default)('PRight',d.perspectiveRight),PLeft:(0,f.default)('PLeft',d.perspectiveLeft)},m={RotateIn:(0,f.default)('RotateIn',d.rotateIn),RotateLeft:(0,f.default)('RotateLeft',d.rotateLeft),RotateRight:(0,f.default)('RotateRight',d.rotateRight),RotateUpLeft:(0,f.default)('RotateUpLeft',d.rotateUpLeft),RotateUpRight:(0,f.default)('RotateUpRight',d.rotateUpRight)},n={SlideUp:(0,f.default)('SlideUp',d.slideUp),SlideDown:(0,f.default)('SlideDown',d.slideDown),SlideRight:(0,f.default)('SlideRight',d.slideRight),SlideLeft:(0,f.default)('SlideLeft',d.slideLeft)},o={Flash:(0,f.default)('Flash',d.flash),RollOut:(0,f.default)('RollOut',d.rollOut),RollIn:(0,f.default)('RollIn',d.rollIn),Rubber:(0,f.default)('Rubber',d.rubber),Swing:(0,f.default)('Swing',d.swing),Zoom:(0,f.default)('Zoom',d.zoom),Hinge:(0,f.default)('Hinge',d.hinge),HingeDrop:(0,f.default)('HingeDrop',d.hingeDrop),Pulse:(0,f.default)('Pulse',d.pulse),ExpandUp:(0,f.default)('ExpandUp',d.expandUp),Entrance:(0,f.default)('Entrance',d.entrance),Hatch:(0,f.default)('Hatch',d.hatch),StarWars:(0,f.default)('StarWars',d.starWars)},p={Flip:(0,f.default)('Flip',d.flip),FlipInX:(0,f.default)('FlipInX',d.flipInX),FlipInY:(0,f.default)('FlipInY',d.flipInY),FlipOutX:(0,f.default)('FlipOutX',d.flipOutX),FlipOutY:(0,f.default)('FlipOutY',d.flipOutY)};b.flipObj=p,b.specialObj=o,b.slideObj=n,b.rotateObj=m,b.PObj=l,b.lightObj=k,b.fadeObj=j,b.expanseObj=i,b.bounceObj=h,b.bingoObj=g},function(a,b){'use strict';Object.defineProperty(b,'__esModule',{value:!0});b.default=function(a,b){var c=a.duration,d=a.timingFunction,e=a.delay,f=a.direction,g=a.iterations,h=a.fillMode,i=a.playState,j=a.forceInterpolate;return j?b+' '+c+' steps('+j.steps+', '+j.direction+') '+e+' '+g+' '+h+' '+i:b+' '+c+' '+d+' '+e+' '+g+' '+f+' '+h+' '+i}},function(a,b,c){'use strict';function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){var c={};for(var d in a)0<=b.indexOf(d)||Object.prototype.hasOwnProperty.call(a,d)&&(c[d]=a[d]);return c}function f(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function g(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function h(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}function i(a){return(a.name||'')+' '+(a.duration||'1s')+' '+(a.timingFunction||'ease')}function j(a,b){var c=b.one,d=b.two,e=i(c)+', '+i(d);return{styles:Object.assign({animation:''+e,backfaceVisibility:'visible'},b.style||{})}}Object.defineProperty(b,'__esModule',{value:!0});var k=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),l=c(0),m=d(l),n=c(1),o=d(n),p=c(5),q=d(p),r=c(2),s=c(6),t=function(a){function b(a){f(this,b);var c=g(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,a));return c.state={styles:{}},c.componentDidMount=function(){c.setState(j)},c.componentWillReceiveProps=function(a){var b=j(c.state,a),d=j(c.state,c.props);b!==d&&c.setState(b)},c}return h(b,a),k(b,[{key:'render',value:function(){var a=this.props,c=a.children,d=a.one,f=a.two,g=a.as,h=a.style,i=a.component,j=e(a,['children','one','two','as','style','component']);return(0,r.Render)(b,this.props,this.state,j,'Merge')}}]),b}(l.PureComponent);t.displayName='Merge',t.defaultProps={one:{},two:{},as:'div'},b.default=t;({props:o.default.objectOf(function(a,b){(0,s.names)(b,a),(0,s.duration)(b,a),(0,s.timingFunction)(b,a),(0,s.propValidators)(b)})})},function(a,b,c){'use strict';function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function f(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function g(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}Object.defineProperty(b,'__esModule',{value:!0});var h=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=c(0),j=d(i),k=c(1),l=d(k),m=function(a){function b(a){e(this,b);var c=f(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,a));return c.timer=null,c.state={show:!1},c.componentWillMount=function(){c.timer=null},c.componentDidMount=function(){var a=c.props.timeout;c.timer=setTimeout(c.setShowValue,a)},c.componentWillUnmount=function(){clearTimeout(c.timer)},c.setShowValue=function(){c.setState({show:!0})},c}return g(b,a),h(b,[{key:'render',value:function(){var a=this.props.children,b=this.state.show,c=b?a:j.default.createElement('div',null);return c}}]),b}(i.PureComponent);m.displayName='Delay',m.defaultProps={timeout:4},b.default=m},function(a,b,c){'use strict';function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){var c={};for(var d in a)0<=b.indexOf(d)||Object.prototype.hasOwnProperty.call(a,d)&&(c[d]=a[d]);return c}function f(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function g(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function h(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}Object.defineProperty(b,'__esModule',{value:!0});var i=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},j=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),k=c(0),l=d(k),m=c(1),n=d(m),o=c(3),p=c(2),q=function(a){function b(a){f(this,b);var c=g(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,a));return r.call(c),c}return h(b,a),j(b,[{key:'render',value:function(){var a=this.props,c=a.name,d=a.duration,f=a.children,g=a.as,h=a.timingFunction,j=a.component,k=e(a,['name','duration','children','as','timingFunction','component']),m=(0,p.getElementType)(b,this.props),n=(0,p.avoidNest)(m,this.props,'Disappear'),o=this.props.component;return l.default.createElement(n,i({id:'animation-root'},k),o?l.default.createElement(o,f):f)}}]),b}(k.PureComponent);q.defaultProps={name:o.fadeIn,duration:'2s',as:'div',timingFunction:'ease'};var r=function(){var a=this;this.componentWillMount=function(){a.timeouts=null},this.componentDidMount=function(){a.performAndDisapper(a.props)},this.componentWillUnmount=function(){clearTimeout(a.timeouts)},this.performAndDisapper=function(b){var c=document.getElementById('animation-root');c.style='animation: '+b.name+' '+b.duration+' '+b.timingFunction,c.addEventListener('animationend',function(){c.style='visibility: \'hidden\'; opacity: 0; transition: visibility 0s 2s, opacity 2s linear;',a.timeouts=setTimeout(function(){c.remove()},2e3)})}};b.default=q}])});
//# sourceMappingURL=animate-components.min.js.map