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

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

!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.FlipMove=t(require("react"),require("react-dom")):e.FlipMove=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(3),o=r(i);t.default=o.default,e.exports=t.default},function(e,t){"use strict";function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n={};return Object.keys(e).forEach(function(r){t.indexOf(r)===-1&&(n[r]=e[r])}),n}function r(e,t){var n=e===t;if(n)return!0;var r=!Array.isArray(e)||!Array.isArray(t),i=e.length!==t.length;return!r&&!i&&e.every(function(e,n){return e===t[n]})}function i(e){var t={};return function(n){return t[n]||(t[n]=e(n)),t[n]}}Object.defineProperty(t,"__esModule",{value:!0}),t.omit=n,t.arraysEqual=r;t.isElementAnSFC=function(e){var t="string"==typeof e.type;return!t&&!e.type.prototype.isReactComponent},t.hyphenate=i(function(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()})},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 l(e){return e.key||""}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){var n=[],r=!0,i=!1,o=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(s){i=!0,o=s}finally{try{!r&&l.return&&l.return()}finally{if(i)throw o}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=n(2),p=r(d);n(7);var f=n(8),h=r(f),m=n(4),v=n(1),y=(0,m.whichTransitionEvent)(),g=!y,b=function(e){function t(){var e,n,r,a;i(this,t);for(var c=arguments.length,p=Array(c),f=0;f<c;f++)p[f]=arguments[f];return n=r=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(p))),r.state={children:d.Children.toArray(r.props.children).map(function(e){return u({},e,{element:e,appearing:!0})})},r.childrenData={},r.parentData={domNode:null,boundingBox:null},r.heightPlaceholderData={domNode:null},r.remainingAnimations=0,r.childrenToAnimate=[],r.runAnimation=function(){var e=r.state.children.filter(r.doesChildNeedToBeAnimated);e.forEach(function(e,t){r.remainingAnimations+=1,r.childrenToAnimate.push(l(e)),r.animateChild(e,t)}),"function"==typeof r.props.onStartAll&&r.callChildrenHook(r.props.onStartAll)},r.doesChildNeedToBeAnimated=function(e){if(!l(e))return!1;var t=r.getChildData(l(e)),n=t.domNode,i=t.boundingBox,o=r.parentData.boundingBox;if(!n)return!1;var a=r.props,u=a.appearAnimation,c=a.enterAnimation,d=a.leaveAnimation,p=a.getPosition,f=e.appearing&&u,h=e.entering&&c,v=e.leaving&&d;if(f||h||v)return!0;var y=(0,m.getPositionDelta)({childDomNode:n,childBoundingBox:i,parentBoundingBox:o,getPosition:p}),g=s(y,2),b=g[0],A=g[1];return 0!==b||0!==A},a=n,o(r,a)}return a(t,e),c(t,[{key:"componentDidMount",value:function(){var e=this.props.appearAnimation&&!this.isAnimationDisabled(this.props);e&&(this.prepForAnimation(),this.runAnimation())}},{key:"componentWillReceiveProps",value:function(e){this.updateBoundingBoxCaches();var t=d.Children.toArray(e.children);this.setState({children:this.isAnimationDisabled(e)?t.map(function(e){return u({},e,{element:e})}):this.calculateNextSetOfChildren(t)})}},{key:"componentDidUpdate",value:function(e){var t=d.Children.toArray(this.props.children).map(function(e){return e.key}),n=d.Children.toArray(e.children).map(function(e){return e.key}),r=!(0,v.arraysEqual)(t,n)&&!this.isAnimationDisabled(this.props);r&&(this.prepForAnimation(),this.runAnimation())}},{key:"calculateNextSetOfChildren",value:function(e){var t=this,n=e.map(function(e){var n=t.findChildByKey(e.key||""),r=!n||n.leaving;return u({},e,{element:e,entering:r})}),r=0;return this.state.children.forEach(function(i,o){var a=!e.find(function(e){var t=e.key;return t===l(i)});if(a&&t.props.leaveAnimation){var s=u({},i,{leaving:!0}),c=o+r;n.splice(c,0,s),r+=1}}),n}},{key:"prepForAnimation",value:function(){var e=this,t=this.props,n=t.leaveAnimation,r=t.maintainContainerHeight,i=t.getPosition;if(n){var o=this.state.children.filter(function(e){return e.leaving});o.forEach(function(t){var n=e.getChildData(l(t));n.boundingBox&&(0,m.removeNodeFromDOMFlow)(n,e.props.verticalAlignment)}),r&&this.heightPlaceholderData.domNode&&(0,m.updateHeightPlaceholder)({domNode:this.heightPlaceholderData.domNode,parentData:this.parentData,getPosition:i})}this.state.children.forEach(function(t){var n=e.getChildData(l(t)),r=n.domNode;r&&(t.entering||t.leaving||(0,m.applyStylesToDOMNode)({domNode:r,styles:{transition:""}}))})}},{key:"animateChild",value:function(e,t){var n=this,r=this.getChildData(l(e)),i=r.domNode;i&&((0,m.applyStylesToDOMNode)({domNode:i,styles:this.computeInitialStyles(e)}),this.props.onStart&&this.props.onStart(e,i),requestAnimationFrame(function(){requestAnimationFrame(function(){var r={transition:(0,m.createTransitionString)(t,n.props),transform:"",opacity:""};e.appearing&&n.props.appearAnimation?r=u({},r,n.props.appearAnimation.to):e.entering&&n.props.enterAnimation?r=u({},r,n.props.enterAnimation.to):e.leaving&&n.props.leaveAnimation&&(r=u({},r,n.props.leaveAnimation.to)),(0,m.applyStylesToDOMNode)({domNode:i,styles:r})})}),this.bindTransitionEndHandler(e))}},{key:"bindTransitionEndHandler",value:function(e){var t=this,n=this.getChildData(l(e)),r=n.domNode;if(r){var i=function o(n){n.target===r&&(r.style.transition="",t.triggerFinishHooks(e,r),r.removeEventListener(y,o),e.leaving&&t.removeChildData(l(e)))};r.addEventListener(y,i)}}},{key:"triggerFinishHooks",value:function(e,t){var n=this;if(this.props.onFinish&&this.props.onFinish(e,t),this.remainingAnimations-=1,0===this.remainingAnimations){var r=this.state.children.filter(function(e){var t=e.leaving;return!t}).map(function(e){return u({},e,{appearing:!1,entering:!1})});this.setState({children:r},function(){"function"==typeof n.props.onFinishAll&&n.callChildrenHook(n.props.onFinishAll),n.childrenToAnimate=[]}),this.heightPlaceholderData.domNode&&(this.heightPlaceholderData.domNode.style.height="0")}}},{key:"callChildrenHook",value:function(e){var t=this,n=[],r=[];this.childrenToAnimate.forEach(function(e){var i=t.findChildByKey(e);i&&(n.push(i),t.hasChildData(e)&&r.push(t.getChildData(e).domNode))}),e(n,r)}},{key:"updateBoundingBoxCaches",value:function(){var e=this,t=this.parentData.domNode;t&&(this.parentData.boundingBox=this.props.getPosition(t),this.state.children.forEach(function(n){var r=l(n);if(r&&e.hasChildData(r)){var i=e.getChildData(r);i.domNode&&n&&e.setChildData(r,{boundingBox:(0,m.getRelativeBoundingBox)({childDomNode:i.domNode,parentDomNode:t,getPosition:e.props.getPosition})})}}))}},{key:"computeInitialStyles",value:function(e){if(e.appearing)return this.props.appearAnimation?this.props.appearAnimation.from:{};if(e.entering)return this.props.enterAnimation?u({position:"",top:"",left:"",right:"",bottom:""},this.props.enterAnimation.from):{};if(e.leaving)return this.props.leaveAnimation?this.props.leaveAnimation.from:{};var t=this.getChildData(l(e)),n=t.domNode,r=t.boundingBox,i=this.parentData.boundingBox;if(!n)return{};var o=(0,m.getPositionDelta)({childDomNode:n,childBoundingBox:r,parentBoundingBox:i,getPosition:this.props.getPosition}),a=s(o,2),c=a[0],d=a[1];return{transform:"translate("+c+"px, "+d+"px)"}}},{key:"isAnimationDisabled",value:function(e){return g||e.disableAllAnimations||0===e.duration&&0===e.delay&&0===e.staggerDurationBy&&0===e.staggerDelayBy}},{key:"findChildByKey",value:function(e){return this.state.children.find(function(t){return l(t)===e})}},{key:"hasChildData",value:function(e){return Object.prototype.hasOwnProperty.call(this.childrenData,e)}},{key:"getChildData",value:function(e){return this.hasChildData(e)?this.childrenData[e]:{}}},{key:"setChildData",value:function(e,t){this.childrenData[e]=u({},this.getChildData(e),t)}},{key:"removeChildData",value:function(e){delete this.childrenData[e]}},{key:"createHeightPlaceholder",value:function(){var e=this,t=this.props.typeName,n="ul"===t||"ol"===t,r=n?"li":"div";return p.default.createElement(r,{key:"height-placeholder",ref:function(t){e.heightPlaceholderData.domNode=t},style:{visibility:"hidden",height:0}})}},{key:"childrenWithRefs",value:function(){var e=this;return this.state.children.map(function(t){return p.default.cloneElement(t.element,{ref:function(n){if(n){var r=(0,m.getNativeNode)(n);e.setChildData(l(t),{domNode:r})}}})})}},{key:"render",value:function(){var e=this,t=this.props,n=t.typeName,r=t.delegated,i=t.leaveAnimation,o=t.maintainContainerHeight,a=u({},r,{ref:function(t){e.parentData.domNode=t}}),l=this.childrenWithRefs();return i&&o&&l.push(this.createHeightPlaceholder()),p.default.createElement(n,a,l)}}]),t}(d.Component);t.default=(0,h.default)(b),e.exports=t.default},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){var t=e.domNode,n=e.styles;Object.keys(n).forEach(function(e){t.style.setProperty((0,s.hyphenate)(e),n[e])})}function o(){var e={transition:"transitionend","-o-transition":"oTransitionEnd","-moz-transition":"transitionend","-webkit-transition":"webkitTransitionEnd"};if("undefined"==typeof document)return"";var t=document.createElement("fakeelement"),n=Object.keys(e).find(function(e){return void 0!==t.style.getPropertyValue(e)});return n?e[n]:""}Object.defineProperty(t,"__esModule",{value:!0}),t.createTransitionString=t.getNativeNode=t.updateHeightPlaceholder=t.removeNodeFromDOMFlow=t.getPositionDelta=t.getRelativeBoundingBox=void 0;var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};t.applyStylesToDOMNode=i,t.whichTransitionEvent=o;var l=n(9),s=n(1);t.getRelativeBoundingBox=function(e){var t=e.childDomNode,n=e.parentDomNode,r=e.getPosition,i=r(n),o=r(t),a=o.top,l=o.left,s=o.right,u=o.bottom,c=o.width,d=o.height;return{top:a-i.top,left:l-i.left,right:i.right-s,bottom:i.bottom-u,width:c,height:d}},t.getPositionDelta=function(e){var t=e.childDomNode,n=e.childBoundingBox,r=e.parentBoundingBox,i=e.getPosition,o={top:0,left:0,right:0,bottom:0,height:0,width:0},a=n||o,l=r||o,s=i(t),u={top:s.top-l.top,left:s.left-l.left};return[a.left-u.left,a.top-u.top]},t.removeNodeFromDOMFlow=function(e,t){var n=e.domNode,o=e.boundingBox;if(n&&o){var l=window.getComputedStyle(n),s=["margin-top","margin-left","margin-right"],u=s.reduce(function(e,t){var n=l.getPropertyValue(t);return a({},e,r({},t,Number(n.replace("px",""))))},{}),c="bottom"===t?o.top-o.height:o.top,d={position:"absolute",top:c-u["margin-top"]+"px",left:o.left-u["margin-left"]+"px",right:o.right-u["margin-right"]+"px"};i({domNode:n,styles:d})}},t.updateHeightPlaceholder=function(e){var t=e.domNode,n=e.parentData,r=e.getPosition,o=n.domNode,a=n.boundingBox;if(o&&a){i({domNode:t,styles:{height:"0"}});var l=a.height,s=r(o).height,u=l-s,c={height:u>0?u+"px":"0"};i({domNode:t,styles:c})}},t.getNativeNode=function(e){if("undefined"==typeof HTMLElement)return null;if(e instanceof HTMLElement)return e;var t=(0,l.findDOMNode)(e);return t instanceof HTMLElement?t:null},t.createTransitionString=function(e,t){var n=t.delay,r=t.duration,i=t.staggerDurationBy,o=t.staggerDelayBy,a=t.easing;n+=e*o,r+=e*i;var l=["transform","opacity"];return l.map(function(e){return e+" "+r+"ms "+a+" "+n+"ms"}).join(", ")}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=t.enterPresets={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},r=t.leavePresets={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};t.appearPresets=n;n.accordianVertical=n.accordionVertical,n.accordianHorizontal=n.accordionHorizontal,r.accordianVertical=r.accordionVertical,r.accordianHorizontal=r.accordionHorizontal;t.defaultPreset="elevator",t.disablePreset="none"},function(e,t){"use strict";function n(e){var t=!1;return function(){t||(console.warn(e),t=!0)}}Object.defineProperty(t,"__esModule",{value:!0});t.statelessFunctionalComponentSupplied=n("\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"),t.invalidTypeForTimingProp=function(e){return console.error("\n>> Error, via react-flip-move <<\n\nThe prop you provided for '"+e.prop+"' is invalid. It needs to be a positive integer, or a string that can be resolved to a number. The value you provided is '"+e.value+"'.\n\nAs a result,  the default value for this parameter will be used, which is '"+e.defaultValue+"'.\n")},t.deprecatedDisableAnimations=n("\n>> Warning, via react-flip-move <<\n\nThe 'disableAnimations' prop you provided is deprecated. Please switch to use 'disableAllAnimations'.\n\nThis will become a silent error in future versions of react-flip-move.\n"),t.invalidEnterLeavePreset=function(e){return console.error("\n>> Error, via react-flip-move <<\n\nThe enter/leave preset you provided is invalid. We don't currently have a '"+e.value+" preset.'\n\nAcceptable values are "+e.acceptableValues+". The default value of '"+e.defaultValue+"' will be used.\n")}},function(e,t){"use strict";Array.prototype.find||(Array.prototype.find=function(e){if(null===this)throw new TypeError("Array.prototype.find called on null or undefined");if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var t=Object(this),n=t.length>>>0,r=arguments[1],i=void 0,o=0;o<n;o++)if(i=t[o],e.call(r,i,o,t))return i}),Array.prototype.every||(Array.prototype.every=function(e,t){var n,r;if(null==this)throw new TypeError("this is null or not defined");var i=Object(this),o=i.length>>>0;if("function"!=typeof e)throw new TypeError;for(arguments.length>1&&(n=t),r=0;r<o;){var a;if(r in i){a=i[r];var l=e.call(n,a,r,i);if(!l)return!1}r++}return!0}),Array.isArray||(Array.isArray=function(e){return"[object Array]"===Object.prototype.toString.call(e)})},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 l(e){var t,n;return n=t=function(t){function n(){return i(this,n),o(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return a(n,t),c(n,[{key:"checkForStatelessFunctionalComponents",value:function(e){if("production"!==v){var t=d.Children.toArray(e),n=t.every(function(e){return!(0,m.isElementAnSFC)(e)||"undefined"==typeof e.key});n||(0,f.statelessFunctionalComponentSupplied)()}}},{key:"convertProps",value:function(e){var t={children:e.children,easing:e.easing,onStart:e.onStart,onFinish:e.onFinish,onStartAll:e.onStartAll,onFinishAll:e.onFinishAll,typeName:e.typeName,disableAllAnimations:e.disableAllAnimations,getPosition:e.getPosition,maintainContainerHeight:e.maintainContainerHeight,verticalAlignment:e.verticalAlignment,duration:this.convertTimingProp("duration"),delay:this.convertTimingProp("delay"),staggerDurationBy:this.convertTimingProp("staggerDurationBy"),staggerDelayBy:this.convertTimingProp("staggerDelayBy"),appearAnimation:this.convertAnimationProp(e.appearAnimation,h.appearPresets),enterAnimation:this.convertAnimationProp(e.enterAnimation,h.enterPresets),leaveAnimation:this.convertAnimationProp(e.leaveAnimation,h.leavePresets),delegated:{}};this.checkForStatelessFunctionalComponents(t.children),"undefined"!=typeof e.disableAnimations&&("production"!==v&&(0,f.deprecatedDisableAnimations)(),t.disableAllAnimations=e.disableAnimations);var n=Object.keys(t),r=(0,m.omit)(this.props,n);return r.style=u({position:"relative"},r.style),t.delegated=r,t}},{key:"convertTimingProp",value:function(e){var t=this.props[e],r="number"==typeof t?t:parseInt(t,10);if(isNaN(r)){var i=n.defaultProps[e];return"production"!==v&&(0,f.invalidTypeForTimingProp)({prop:e,value:t,defaultValue:i}),i}return r}},{key:"convertAnimationProp",value:function(e,t){switch("undefined"==typeof e?"undefined":s(e)){case"boolean":return t[e?h.defaultPreset:h.disablePreset];case"string":var n=Object.keys(t);return n.indexOf(e)===-1?("production"!==v&&(0,f.invalidEnterLeavePreset)({value:e,acceptableValues:n.join(", "),defaultValue:h.defaultPreset}),t[h.defaultPreset]):t[e];default:return e}}},{key:"render",value:function(){return p.default.createElement(e,this.convertProps(this.props))}}]),n}(d.Component),t.defaultProps={easing:"ease-in-out",duration:350,delay:0,staggerDurationBy:0,staggerDelayBy:0,typeName:"div",enterAnimation:h.defaultPreset,leaveAnimation:h.defaultPreset,disableAllAnimations:!1,getPosition:function(e){return e.getBoundingClientRect()},maintainContainerHeight:!1,verticalAlignment:"top"},n}Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=n(2),p=r(d),f=n(6),h=n(5),m=n(1),v=void 0;try{v="production"}catch(y){v="development"}t.default=l,e.exports=t.default},function(e,n){e.exports=t}])});