react-flip-toolkit/lib/index.modern.mjs

Configurable FLIP animation helpers for React

import{getFlippedElementPositionsBeforeUpdate as e,onFlipKeyUpdate as t,utilities as i,constants as r}from"flip-toolkit";export{disableFlip,enableFlip,isFlipEnabled,spring}from"flip-toolkit";import n,{createContext as l,Component as o,Children as p,cloneElement as s}from"react";import"prop-types";const a=/*#__PURE__*/l({}),d=/*#__PURE__*/l("portal");class c extends o{constructor(...e){super(...e),this.inProgressAnimations={},this.flipCallbacks={},this.el=void 0}getSnapshotBeforeUpdate(t){return t.flipKey!==this.props.flipKey&&this.el?e({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null}componentDidUpdate(e,i,r){this.props.flipKey!==e.flipKey&&this.el&&t({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:e.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart})}render(){const{element:e,className:t,portalKey:i}=this.props;let r=/*#__PURE__*/n.createElement(a.Provider,{value:this.flipCallbacks},/*#__PURE__*/n.createElement(e,{className:t,ref:e=>this.el=e},this.props.children));return i&&(r=/*#__PURE__*/n.createElement(d.Provider,{value:i},r)),r}}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},h.apply(this,arguments)}function m(e,t){if(null==e)return{};var i,r,n={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(i=l[r])>=0||(n[i]=e[i]);return n}c.defaultProps={applyTransformOrigin:!0,element:"div"};const f=["children","flipId","inverseFlipId","portalKey"],u=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],g=e=>{let{children:t,flipId:n,inverseFlipId:l,portalKey:o}=e,a=m(e,f),d=t;const c=function(e){return"function"==typeof e}(d);if(!c)try{d=p.only(t)}catch(e){throw new Error("Each Flipped component must wrap a single child")}a.scale||a.translate||a.opacity||i.assign(a,{translate:!0,scale:!0,opacity:!0});const h={[r.DATA_FLIP_CONFIG]:JSON.stringify(a)};return void 0!==n?h[r.DATA_FLIP_ID]=String(n):l&&(h[r.DATA_INVERSE_FLIP_ID]=String(l)),void 0!==o&&(h[r.DATA_PORTAL_KEY]=o),c?d(h):/*#__PURE__*/s(d,h)},y=e=>{let{children:t,flipId:r,shouldFlip:l,shouldInvert:o,onAppear:p,onStart:s,onStartImmediate:c,onComplete:f,onExit:y,onSpringUpdate:I}=e,E=m(e,u);return t?E.inverseFlipId?/*#__PURE__*/n.createElement(g,h({},E),t):/*#__PURE__*/n.createElement(d.Consumer,null,e=>/*#__PURE__*/n.createElement(a.Consumer,null,a=>(i.isObject(a)&&r&&(a[r]={shouldFlip:l,shouldInvert:o,onAppear:p,onStart:s,onStartImmediate:c,onComplete:f,onExit:y,onSpringUpdate:I}),/*#__PURE__*/n.createElement(g,h({flipId:r},E,{portalKey:e}),t)))):null};y.displayName="Flipped";const I=({children:e})=>/*#__PURE__*/s(e,{[r.DATA_EXIT_CONTAINER]:!0});export{I as ExitContainer,y as Flipped,c as Flipper};
//# sourceMappingURL=index.modern.mjs.map