react-flip-toolkit
Version:
Configurable FLIP animation helpers for React
3 lines (2 loc) • 4.41 kB
JavaScript
var e=require("flip-toolkit"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("prop-types");var r=/*#__PURE__*/n(t);function i(){return i=Object.assign?Object.assign.bind():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},i.apply(this,arguments)}function o(e,t){return o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},o(e,t)}function l(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}var p=/*#__PURE__*/t.createContext({}),a=/*#__PURE__*/t.createContext("portal"),s=/*#__PURE__*/function(t){var n,i;function l(){for(var e,n=arguments.length,r=new Array(n),i=0;i<n;i++)r[i]=arguments[i];return(e=t.call.apply(t,[this].concat(r))||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}i=t,(n=l).prototype=Object.create(i.prototype),n.prototype.constructor=n,o(n,i);var s=l.prototype;return s.getSnapshotBeforeUpdate=function(t){return t.flipKey!==this.props.flipKey&&this.el?e.getFlippedElementPositionsBeforeUpdate({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},s.componentDidUpdate=function(t,n,r){this.props.flipKey!==t.flipKey&&this.el&&e.onFlipKeyUpdate({flippedElementPositionsBeforeUpdate:r.flippedElementPositions,cachedOrderedFlipIds:r.cachedOrderedFlipIds,containerEl:this.el,inProgressAnimations:this.inProgressAnimations,flipCallbacks:this.flipCallbacks,applyTransformOrigin:this.props.applyTransformOrigin,spring:this.props.spring,debug:this.props.debug,portalKey:this.props.portalKey,staggerConfig:this.props.staggerConfig,handleEnterUpdateDelete:this.props.handleEnterUpdateDelete,decisionData:{previous:t.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart})},s.render=function(){var e=this,t=this.props,n=t.portalKey,i=/*#__PURE__*/r.default.createElement(p.Provider,{value:this.flipCallbacks},/*#__PURE__*/r.default.createElement(t.element,{className:t.className,ref:function(t){return e.el=t}},this.props.children));return n&&(i=/*#__PURE__*/r.default.createElement(a.Provider,{value:n},i)),i},l}(t.Component);s.defaultProps={applyTransformOrigin:!0,element:"div"};var c=["children","flipId","inverseFlipId","portalKey"],d=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],u=function(n){var r,i=n.children,o=n.flipId,p=n.inverseFlipId,a=n.portalKey,s=l(n,c),d=i,u=function(e){return"function"==typeof e}(d);if(!u)try{d=t.Children.only(i)}catch(e){throw new Error("Each Flipped component must wrap a single child")}s.scale||s.translate||s.opacity||e.utilities.assign(s,{translate:!0,scale:!0,opacity:!0});var f=((r={})[e.constants.DATA_FLIP_CONFIG]=JSON.stringify(s),r);return void 0!==o?f[e.constants.DATA_FLIP_ID]=String(o):p&&(f[e.constants.DATA_INVERSE_FLIP_ID]=String(p)),void 0!==a&&(f[e.constants.DATA_PORTAL_KEY]=a),u?d(f):/*#__PURE__*/t.cloneElement(d,f)},f=function(t){var n=t.children,o=t.flipId,s=t.shouldFlip,c=t.shouldInvert,f=t.onAppear,h=t.onStart,m=t.onStartImmediate,y=t.onComplete,g=t.onExit,b=t.onSpringUpdate,v=l(t,d);return n?v.inverseFlipId?/*#__PURE__*/r.default.createElement(u,i({},v),n):/*#__PURE__*/r.default.createElement(a.Consumer,null,function(t){/*#__PURE__*/return r.default.createElement(p.Consumer,null,function(l){return e.utilities.isObject(l)&&o&&(l[o]={shouldFlip:s,shouldInvert:c,onAppear:f,onStart:h,onStartImmediate:m,onComplete:y,onExit:g,onSpringUpdate:b}),/*#__PURE__*/r.default.createElement(u,i({flipId:o},v,{portalKey:t}),n)})}):null};f.displayName="Flipped",Object.defineProperty(exports,"disableFlip",{enumerable:!0,get:function(){return e.disableFlip}}),Object.defineProperty(exports,"enableFlip",{enumerable:!0,get:function(){return e.enableFlip}}),Object.defineProperty(exports,"isFlipEnabled",{enumerable:!0,get:function(){return e.isFlipEnabled}}),Object.defineProperty(exports,"spring",{enumerable:!0,get:function(){return e.spring}}),exports.ExitContainer=function(n){var r;/*#__PURE__*/return t.cloneElement(n.children,((r={})[e.constants.DATA_EXIT_CONTAINER]=!0,r))},exports.Flipped=f,exports.Flipper=s;
//# sourceMappingURL=index.js.map