@invisionag/react-flip-move/dist/react-flip-move.min.js

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],n):t.FlipMove=n(t.React,t.ReactDOM)}(this,function(t,n){"use strict";var e="default"in t?t.default:t,i="default"in n?n.default:n;function o(t){var n=!1;return function(){n||(console.warn(t),n=!0)}}o("\n>> Error, via react-flip-move <<\n\nYou provided a stateless functional component as a child to <FlipMove>. Unfortunately, SFCs aren't supported, because Flip Move needs access to the backing instances via refs, and SFCs don't have a public instance that holds that info.\n\nPlease wrap your components in a native element (eg. <div>), or a non-functional component.\n"),o("\n>> Error, via react-flip-move <<\n\nYou provided a primitive (text or number) node as a child to <FlipMove>. Flip Move needs containers with unique keys to move children around.\n\nPlease wrap your value in a native element (eg. <span>), or a component.\n");var r=o("\n>> Warning, via react-flip-move <<\n\nWhen using \"wrapperless\" mode (by supplying 'typeName' of 'null'), strange things happen when the direct parent has the default \"static\" position.\n\nFlipMove has added 'position: relative' to this node, to ensure Flip Move animates correctly.\n\nTo avoid seeing this warning, simply apply a non-static position to that parent node.\n"),a=o("\n>> Warning, via react-flip-move <<\n\nOne or more of Flip Move's child elements have the html attribute 'disabled' set to true.\n\nPlease note that this will cause animations to break in Internet Explorer 11 and below. Either remove the disabled attribute or set 'animation' to false.\n"),s={elevator:{from:{transform:"scale(0)",opacity:"0"},to:{transform:"",opacity:""}},fade:{from:{opacity:"0"},to:{opacity:""}},accordionVertical:{from:{transform:"scaleY(0)",transformOrigin:"center top"},to:{transform:"",transformOrigin:"center top"}},accordionHorizontal:{from:{transform:"scaleX(0)",transformOrigin:"left center"},to:{transform:"",transformOrigin:"left center"}},none:null},l={elevator:{from:{transform:"scale(1)",opacity:"1"},to:{transform:"scale(0)",opacity:"0"}},fade:{from:{opacity:"1"},to:{opacity:"0"}},accordionVertical:{from:{transform:"scaleY(1)",transformOrigin:"center top"},to:{transform:"scaleY(0)",transformOrigin:"center top"}},accordionHorizontal:{from:{transform:"scaleX(1)",transformOrigin:"left center"},to:{transform:"scaleX(0)",transformOrigin:"left center"}},none:null},p=s,c="elevator",d="none",h=function(t,n){for(var e=0;n.length>e;e++)if(t(n[e],e,n))return n[e]},u=function(t,n){for(var e=0;n.length>e;e++)if(!t(n[e],e,n))return!1;return!0},f=function(t){return(f=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)})(t)};var m,g,y=(m=function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()},g={},function(t){return g[t]||(g[t]=m(t)),g[t]}),v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},A=function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")},b=Object.assign||function(t){for(var n=1;arguments.length>n;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},D=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)},N=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};function C(t){var n=t.domNode,e=t.styles;Object.keys(e).forEach(function(t){n.style.setProperty(y(t),e[t])})}var P=function(t){var n={top:0,left:0,right:0,bottom:0,height:0,width:0},e=t.childBoundingBox||n,i=t.parentBoundingBox||n,o=(0,t.getPosition)(t.childDomNode);return[e.left-(o.left-i.left),e.top-(o.top-i.top)]},B=function(){var t={transition:"transitionend","-o-transition":"oTransitionEnd","-moz-transition":"transitionend","-webkit-transition":"webkitTransitionEnd"};if("undefined"==typeof document)return"";var n=document.createElement("fakeelement"),e=h(function(t){return void 0!==n.style.getPropertyValue(t)},Object.keys(t));return e?t[e]:""}(),O=!B;function x(t){return t.key||""}function E(n){return t.Children.toArray(n)}return function(n){var i,o;return o=i=function(t){function i(){return A(this,i),N(this,t.apply(this,arguments))}return D(i,t),i.prototype.checkChildren=function(t){},i.prototype.convertProps=function(t){var n={children:t.children,easing:t.easing,onStart:t.onStart,onFinish:t.onFinish,onStartAll:t.onStartAll,onFinishAll:t.onFinishAll,typeName:t.typeName,disableAllAnimations:t.disableAllAnimations,getPosition:t.getPosition,maintainContainerHeight:t.maintainContainerHeight,verticalAlignment:t.verticalAlignment,duration:this.convertTimingProp("duration"),delay:this.convertTimingProp("delay"),staggerDurationBy:this.convertTimingProp("staggerDurationBy"),staggerDelayBy:this.convertTimingProp("staggerDelayBy"),appearAnimation:this.convertAnimationProp(t.appearAnimation,p),enterAnimation:this.convertAnimationProp(t.enterAnimation,s),leaveAnimation:this.convertAnimationProp(t.leaveAnimation,l),delegated:{}};this.checkChildren(n.children);var e=Object.keys(n),i=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],e={};return Object.keys(t).forEach(function(i){-1===n.indexOf(i)&&(e[i]=t[i])}),e}(this.props,e);return i.style=b({position:"relative"},i.style),n.delegated=i,n},i.prototype.convertTimingProp=function(t){var n=this.props[t],e="number"==typeof n?n:parseInt(n,10);return isNaN(e)?i.defaultProps[t]:e},i.prototype.convertAnimationProp=function(t,n){switch(void 0===t?"undefined":v(t)){case"boolean":return n[t?c:d];case"string":return-1===Object.keys(n).indexOf(t)?n[c]:n[t];default:return t}},i.prototype.render=function(){return e.createElement(n,this.convertProps(this.props))},i}(t.Component),i.defaultProps={easing:"ease-in-out",duration:350,delay:0,staggerDurationBy:0,staggerDelayBy:0,typeName:"div",enterAnimation:c,leaveAnimation:c,disableAllAnimations:!1,getPosition:function(t){return t.getBoundingClientRect()},maintainContainerHeight:!1,verticalAlignment:"top"},o}(function(e){function o(){var t,n;A(this,o);for(var a=arguments.length,s=Array(a),l=0;a>l;l++)s[l]=arguments[l];return t=n=N(this,e.call.apply(e,[this].concat(s))),n.state={children:E(n.props?n.props.children:[]).map(function(t){return b({},t,{element:t,appearing:!0})})},n.childrenData={},n.parentData={domNode:null,boundingBox:null},n.heightPlaceholderData={domNode:null},n.remainingAnimations=0,n.childrenToAnimate=[],n.findDOMContainer=function(){var t=i.findDOMNode(n),e=t&&t.parentNode;e&&e instanceof HTMLElement&&("static"===window.getComputedStyle(e).position&&(e.style.position="relative",r()),n.parentData.domNode=e)},n.runAnimation=function(){var t=n.state.children.filter(n.doesChildNeedToBeAnimated),e=t.map(function(t){return n.computeInitialStyles(t)});t.forEach(function(t,i){n.remainingAnimations+=1,n.childrenToAnimate.push(x(t)),n.animateChild(t,i,e[i])}),"function"==typeof n.props.onStartAll&&n.callChildrenHook(n.props.onStartAll)},n.doesChildNeedToBeAnimated=function(t){if(!x(t))return!1;var e=n.getChildData(x(t)),i=e.domNode,o=e.boundingBox,r=n.parentData.boundingBox;if(!i)return!1;var a=n.props,s=a.getPosition;if(t.appearing&&a.appearAnimation||t.entering&&a.enterAnimation||t.leaving&&a.leaveAnimation)return!0;var l=P({childDomNode:i,childBoundingBox:o,parentBoundingBox:r,getPosition:s});return 0!==l[0]||0!==l[1]},N(n,t)}return D(o,e),o.prototype.componentDidMount=function(){null===this.props.typeName&&this.findDOMContainer(),this.props.appearAnimation&&!this.isAnimationDisabled(this.props)&&(this.prepForAnimation(),this.runAnimation())},o.prototype.componentDidUpdate=function(t){null===this.props.typeName&&this.findDOMContainer();var n,e,i=E(this.props.children).map(function(t){return t.key}),o=E(t.children).map(function(t){return t.key});!(n=i,e=o,n===e||f(n)&&f(e)&&n.length===e.length&&u(function(t,n){return t===e[n]},n)||this.isAnimationDisabled(this.props))&&(this.prepForAnimation(),this.runAnimation())},o.prototype.calculateNextSetOfChildren=function(t){var n=this,e=t.map(function(t){var e=n.findChildByKey(t.key);return b({},t,{element:t,entering:!e||e.leaving})}),i=0;return this.state.children.forEach(function(o,r){if(!h(function(t){return t.key===x(o)},t)&&n.props.leaveAnimation){var a=b({},o,{leaving:!0});e.splice(r+i,0,a),i+=1}}),e},o.prototype.prepForAnimation=function(){var t=this,n=this.props,e=n.maintainContainerHeight,i=n.getPosition;n.leaveAnimation&&(this.state.children.filter(function(t){return t.leaving}).forEach(function(n){var e=t.getChildData(x(n));!t.isAnimationDisabled(t.props)&&e.domNode&&e.domNode.disabled&&a(),e.boundingBox&&function(t,n){var e=t.domNode,i=t.boundingBox;if(e&&i){var o=window.getComputedStyle(e),r=["margin-top","margin-left","margin-right"].reduce(function(t,n){var e,i=o.getPropertyValue(n);return b({},t,((e={})[n]=+i.replace("px",""),e))},{});C({domNode:e,styles:{position:"absolute",top:("bottom"===n?i.top-i.height:i.top)-r["margin-top"]+"px",left:i.left-r["margin-left"]+"px",right:i.right-r["margin-right"]+"px"}})}}(e,t.props.verticalAlignment)}),e&&this.heightPlaceholderData.domNode&&function(t){var n=t.domNode,e=t.parentData,i=t.getPosition,o=e.domNode,r=e.boundingBox;if(o&&r){C({domNode:n,styles:{height:"0"}});var a=r.height-i(o).height;C({domNode:n,styles:{height:a>0?a+"px":"0"}})}}({domNode:this.heightPlaceholderData.domNode,parentData:this.parentData,getPosition:i}));this.state.children.forEach(function(n){var e=t.getChildData(x(n)).domNode;e&&(n.entering||n.leaving||C({domNode:e,styles:{transition:""}}))})},o.prototype.UNSAFE_componentWillReceiveProps=function(t){this.updateBoundingBoxCaches();var n=E(t.children);this.setState({children:this.isAnimationDisabled(t)?n.map(function(t){return b({},t,{element:t})}):this.calculateNextSetOfChildren(n)})},o.prototype.animateChild=function(t,n,e){var i=this,o=this.getChildData(x(t)).domNode;o&&(C({domNode:o,styles:e}),this.props.onStart&&this.props.onStart(t,o),requestAnimationFrame(function(){requestAnimationFrame(function(){var e={transition:function(t,n){var e=n.delay,i=n.duration,o=n.easing;e+=t*n.staggerDelayBy,i+=t*n.staggerDurationBy;return["transform","opacity"].map(function(t){return t+" "+i+"ms "+o+" "+e+"ms"}).join(", ")}(n,i.props),transform:"",opacity:""};t.appearing&&i.props.appearAnimation?e=b({},e,i.props.appearAnimation.to):t.entering&&i.props.enterAnimation?e=b({},e,i.props.enterAnimation.to):t.leaving&&i.props.leaveAnimation&&(e=b({},e,i.props.leaveAnimation.to)),C({domNode:o,styles:e})})}),this.bindTransitionEndHandler(t))},o.prototype.bindTransitionEndHandler=function(t){var n=this,e=this.getChildData(x(t)).domNode;if(e){e.addEventListener(B,function i(o){o.target===e&&(e.style.transition="",n.triggerFinishHooks(t,e),e.removeEventListener(B,i),t.leaving&&n.removeChildData(x(t)))})}},o.prototype.triggerFinishHooks=function(t,n){var e=this;if(this.props.onFinish&&this.props.onFinish(t,n),this.remainingAnimations-=1,0===this.remainingAnimations){var i=this.state.children.filter(function(t){return!t.leaving}).map(function(t){return b({},t,{element:t.element,appearing:!1,entering:!1})});this.setState({children:i},function(){"function"==typeof e.props.onFinishAll&&e.callChildrenHook(e.props.onFinishAll),e.childrenToAnimate=[]}),this.heightPlaceholderData.domNode&&(this.heightPlaceholderData.domNode.style.height="0")}},o.prototype.callChildrenHook=function(t){var n=this,e=[],i=[];this.childrenToAnimate.forEach(function(t){var o=n.findChildByKey(t);o&&(e.push(o),n.hasChildData(t)&&i.push(n.getChildData(t).domNode))}),t(e,i)},o.prototype.updateBoundingBoxCaches=function(){var t=this,n=this.parentData.domNode;if(n){this.parentData.boundingBox=this.props.getPosition(n);var e=[];this.state.children.forEach(function(i){var o=x(i);if(o)if(t.hasChildData(o)){var r,a,s,l,p,c=t.getChildData(o);if(c.domNode&&i)e.push((a=(r={childDomNode:c.domNode,parentDomNode:n,getPosition:t.props.getPosition}).childDomNode,l=(s=r.getPosition)(r.parentDomNode),{top:(p=s(a)).top-l.top,left:p.left-l.left,right:l.right-p.right,bottom:l.bottom-p.bottom,width:p.width,height:p.height}));else e.push(null)}else e.push(null);else e.push(null)}),this.state.children.forEach(function(n,i){var o=x(n);o&&t.setChildData(o,{boundingBox:e[i]})})}},o.prototype.computeInitialStyles=function(t){if(t.appearing)return this.props.appearAnimation?this.props.appearAnimation.from:{};if(t.entering)return this.props.enterAnimation?b({position:"",top:"",left:"",right:"",bottom:""},this.props.enterAnimation.from):{};if(t.leaving)return this.props.leaveAnimation?this.props.leaveAnimation.from:{};var n=this.getChildData(x(t)),e=n.domNode,i=n.boundingBox,o=this.parentData.boundingBox;if(!e)return{};var r=P({childDomNode:e,childBoundingBox:i,parentBoundingBox:o,getPosition:this.props.getPosition});return{transform:"translate("+r[0]+"px, "+r[1]+"px)"}},o.prototype.isAnimationDisabled=function(t){return O||t.disableAllAnimations||0===t.duration&&0===t.delay&&0===t.staggerDurationBy&&0===t.staggerDelayBy},o.prototype.findChildByKey=function(t){return h(function(n){return x(n)===t},this.state.children)},o.prototype.hasChildData=function(t){return Object.prototype.hasOwnProperty.call(this.childrenData,t)},o.prototype.getChildData=function(t){return this.hasChildData(t)?this.childrenData[t]:{}},o.prototype.setChildData=function(t,n){this.childrenData[t]=b({},this.getChildData(t),n)},o.prototype.removeChildData=function(t){delete this.childrenData[t],this.setState(function(n){return b({},n,{children:n.children.filter(function(n){return n.element.key!==t})})})},o.prototype.createHeightPlaceholder=function(){var n=this,e=this.props.typeName;return t.createElement("ul"===e||"ol"===e?"li":"div",{key:"height-placeholder",ref:function(t){n.heightPlaceholderData.domNode=t},style:{visibility:"hidden",height:0}})},o.prototype.childrenWithRefs=function(){var e=this;return this.state.children.map(function(i){return t.cloneElement(i.element,{ref:function(t){if(t){var o=function(t){if("undefined"==typeof HTMLElement)return null;if(t instanceof HTMLElement)return t;var e=n.findDOMNode(t);return e&&e.nodeType===Node.TEXT_NODE?null:e}(t);e.setChildData(x(i),{domNode:o})}}})})},o.prototype.render=function(){var n=this,e=this.props,i=e.typeName,o=e.delegated,r=e.leaveAnimation,a=e.maintainContainerHeight,s=this.childrenWithRefs();if(r&&a&&s.push(this.createHeightPlaceholder()),!i)return s;var l=b({},o,{children:s,ref:function(t){n.parentData.domNode=t}});return t.createElement(i,l)},o}(t.Component))});