@mollycule/react-anime
Version:
React wrapper for using AnimeJS
2 lines • 5.08 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-transition-group"),require("animejs")):"function"==typeof define&&define.amd?define(["react","react-transition-group","animejs"],t):"object"==typeof exports?exports.useRedux=t(require("react"),require("react-transition-group"),require("animejs")):e.useRedux=t(e.React,e["react-transition-group"],e.animejs)}(window,(function(e,t,r){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var u=t[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var u in e)r.d(n,u,function(t){return e[t]}.bind(null,u));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";var n=this&&this.__assign||function(){return(n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var u in t=arguments[r])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e}).apply(this,arguments)},u=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var u=0;for(n=Object.getOwnPropertySymbols(e);u<n.length;u++)t.indexOf(n[u])<0&&Object.prototype.propertyIsEnumerable.call(e,n[u])&&(r[n[u]]=e[n[u]])}return r},o=this&&this.__spreadArrays||function(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),u=0;for(t=0;t<r;t++)for(var o=arguments[t],i=0,a=o.length;i<a;i++,u++)n[u]=o[i];return n},i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};t.__esModule=!0;var c=i(r(1)),f=r(2),l=a(r(3)),s=r(4);t.AnimeComp=function(e){var t=e.duration,r=e.children,i=e.status,a=e.onEntering,f=e.onEntered,d=e.onExited,p=e.onExiting,m=e.initProps,v=e.animeRef,y=u(e,["duration","children","status","onEntering","onEntered","onExited","onExiting","initProps","animeRef"]),E=c.useRef([]),b=c.useCallback((function(e,t,r,u){var o="on"+s.capitalize(e);return r[o]?(u(),n(n({},t),r[o])):t}),[]);c.useEffect((function(){if(E.current){var e=b(i,n({targets:E.current,duration:t},y),{onEntering:a,onEntered:f,onExited:d,onExiting:p},(function(){E.current&&l.default.remove(E.current)}));m&&l.default.set(E.current,m);var r=l.default(e);v&&(v.current=r)}}),[i,E,t,m,b,a,f,d,p,y]);var h=c.useCallback((function(e){e&&(E.current=o(E.current,[e]))}),[]);return c.default.createElement(c.default.Fragment,null,c.default.Children.map(r,(function(e,t){return c.default.isValidElement(e)&&c.default.cloneElement(e,{ref:h})})))};var d=function(e){var r=e.in,o=e.duration,i=e.children,a=e.mountOnEnter,l=void 0===a||a,s=e.unmountOnExit,d=void 0===s||s,p=e.appear,m=void 0!==p&&p,v=e.initProps,y=u(e,["in","duration","children","mountOnEnter","unmountOnExit","appear","initProps"]);return c.default.createElement(f.Transition,{mountOnEnter:l,unmountOnExit:d,appear:m,timeout:o,in:r},(function(e){return c.default.createElement(t.AnimeComp,n({duration:o,status:e,initProps:v},y),i)}))};t.AnimeGroup=function(e){var t=e.children;return c.default.createElement(f.TransitionGroup,null,t)},t.PerformAnime=function(e){var t=e.children,r=e.perform,u=e.onPerform,i=e.retract,a=void 0===i||i,f=e.duration,s=c.useRef([]),p=(c.useCallback((function(e){e&&(s.current=o(s.current,[e]))}),[]),c.useRef(!1)),m=c.useRef(null);return c.useEffect((function(){s.current&&(!1===r&&p.current&&(m.current&&a&&(m.current.reverse(),m.current.play()),p.current=!1),!0!==r||p.current||(l.default.remove(s.current),m.current=l.default(n({duration:f,targets:s.current,autoplay:!1},u)),m.current.play(),p.current=!0))}),[r,u,a,s,p.current]),c.default.createElement(c.default.Fragment,null,c.default.Children.map(t,(function(e){return c.default.isValidElement(e)&&!function(e){if(e.type===d)throw new Error("Child element can't be <Anime />. Wrap it around a div");return!1}(e)&&c.default.cloneElement(e,{ref:function(t){t&&(s.current=o(s.current,[t]));var r=e.ref;r&&"function"==typeof r&&r(t)}})})))},t.default=d},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t,r){"use strict";t.__esModule=!0,t.capitalize=function(e){return e&&e[0].toUpperCase()+e.slice(1)}}])}));
//# sourceMappingURL=index.js.map