New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
lottie-react
Advanced tools
lottie-react - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
@@ -1,55 +0,7 @@ | ||
| import React, { forwardRef, useRef, useEffect } from 'react'; | ||
| import React, { useRef, useEffect, forwardRef } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import lottie from 'lottie-web'; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| var Animator = forwardRef(function (props, ref) { | ||
| var useLottie = function useLottie(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationData = props.animationData, | ||
@@ -68,11 +20,9 @@ loop = props.loop, | ||
| onDOMLoaded = props.onDOMLoaded, | ||
| onDestroy = props.onDestroy, | ||
| style = props.style; | ||
| onDestroy = props.onDestroy; | ||
| var animationInstanceRef = useRef(null); | ||
| var animationContainer = useRef(null); | ||
| var animationInstanceRef = useRef(null); | ||
| var parentRef = ref || useRef(); | ||
| /* | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| */ | ||
@@ -213,5 +163,5 @@ | ||
| /* | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| */ | ||
@@ -232,3 +182,3 @@ | ||
| var config = _objectSpread2({ | ||
| var config = Object.assign(Object.assign({ | ||
| animationData: animationData || null, | ||
@@ -238,26 +188,12 @@ loop: !Number.isNaN(loop) ? loop : loop !== false, | ||
| initialSegment: initialSegment || null | ||
| }, forceOptions, { | ||
| }, forceOptions), { | ||
| container: animationContainer.current | ||
| }); | ||
| animationInstanceRef.current = lottie.loadAnimation(config); | ||
| }; | ||
| /** | ||
| * Initialize and listen for changes that need to reinitialize Lottie | ||
| */ | ||
| animationInstanceRef.current = lottie.loadAnimation(config); // Share methods which control Lottie to the parent component | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }; // Initialize and listen for changes that need to reinitialize Lottie | ||
| useEffect(function () { | ||
@@ -267,5 +203,5 @@ loadAnimation(); | ||
| /* | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| */ | ||
@@ -301,3 +237,7 @@ | ||
| }; | ||
| /** | ||
| * Reinitialize listener on change | ||
| */ | ||
| useEffect(function () { | ||
@@ -361,8 +301,85 @@ var listeners = [{ | ||
| return /*#__PURE__*/React.createElement("div", { | ||
| ref: animationContainer, | ||
| style: style | ||
| /** | ||
| * Build the animation view | ||
| */ | ||
| var View = /*#__PURE__*/React.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| var __rest = undefined && undefined.__rest || function (s, e) { | ||
| var t = {}; | ||
| for (var p in s) { | ||
| if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| } | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| }; | ||
| var Lottie = forwardRef(function (props, ref) { | ||
| var style = props.style, | ||
| lottieProps = __rest(props, ["style"]); | ||
| var parentRef = ref || useRef(); | ||
| /** | ||
| * Initialize the 'useLottie' hook | ||
| */ | ||
| var _useLottie = useLottie(lottieProps, style), | ||
| View = _useLottie.View, | ||
| play = _useLottie.play, | ||
| stop = _useLottie.stop, | ||
| pause = _useLottie.pause, | ||
| setSpeed = _useLottie.setSpeed, | ||
| goToAndStop = _useLottie.goToAndStop, | ||
| goToAndPlay = _useLottie.goToAndPlay, | ||
| setDirection = _useLottie.setDirection, | ||
| playSegments = _useLottie.playSegments, | ||
| setSubframe = _useLottie.setSubframe, | ||
| destroy = _useLottie.destroy, | ||
| getDuration = _useLottie.getDuration; | ||
| /** | ||
| * Share methods which control Lottie to the parent component | ||
| */ | ||
| useEffect(function () { | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }, [parentRef.current]); | ||
| return View; | ||
| }); | ||
| Animator.propTypes = { | ||
| Lottie.propTypes = { | ||
| animationData: PropTypes.shape(undefined).isRequired, | ||
@@ -384,3 +401,3 @@ loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| }; | ||
| Animator.defaultProps = { | ||
| Lottie.defaultProps = { | ||
| loop: true, | ||
@@ -402,172 +419,7 @@ autoplay: true, | ||
| var useAnimator = function useAnimator(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationInstanceRef = useRef(null); | ||
| var animationContainer = useRef(null); // Initialize Lottie | ||
| var Animator = Lottie; | ||
| var useAnimator = useLottie; | ||
| useEffect(function () { | ||
| animationInstanceRef.current = lottie.loadAnimation(_objectSpread2({}, props, { | ||
| container: animationContainer.current | ||
| })); // eslint-disable-next-line | ||
| }, []); | ||
| /** | ||
| * Play | ||
| * TODO: complete | ||
| */ | ||
| var play = function play() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.play(); | ||
| } | ||
| }; | ||
| /** | ||
| * Stop | ||
| * TODO: complete | ||
| */ | ||
| var stop = function stop() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.stop(); | ||
| } | ||
| }; | ||
| /** | ||
| * Pause | ||
| * TODO: complete | ||
| */ | ||
| var pause = function pause() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.pause(); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation speed | ||
| * TODO: complete | ||
| * @param speed | ||
| */ | ||
| var setSpeed = function setSpeed(speed) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSpeed(speed); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and stop | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var goToAndStop = function goToAndStop(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndStop(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and play | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var goToAndPlay = function goToAndPlay(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndPlay(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation direction | ||
| * TODO: complete | ||
| * @param direction | ||
| */ | ||
| var setDirection = function setDirection(direction) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setDirection(direction); | ||
| } | ||
| }; | ||
| /** | ||
| * Play animation segments | ||
| * TODO: complete | ||
| * @param segment | ||
| * @param force | ||
| */ | ||
| var playSegments = function playSegments(segment, force) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.playSegments(segment, force); | ||
| } | ||
| }; | ||
| /** | ||
| * Set sub frames | ||
| * TODO: complete | ||
| * @param useSubFrames | ||
| */ | ||
| var setSubframe = function setSubframe(useSubFrames) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSubframe(useSubFrames); | ||
| } | ||
| }; | ||
| /** | ||
| * Destroy animation | ||
| * TODO: complete | ||
| */ | ||
| var destroy = function destroy() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| }; | ||
| /** | ||
| * Get animation duration | ||
| * TODO: complete | ||
| * @param inFrames | ||
| */ | ||
| var getDuration = function getDuration(inFrames) { | ||
| if (animationInstanceRef.current) { | ||
| return animationInstanceRef.current.getDuration(inFrames); | ||
| } | ||
| return undefined; | ||
| }; // Build the animation view | ||
| var View = /*#__PURE__*/React.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| var index = { | ||
| Animator: Animator, | ||
| useAnimator: useAnimator | ||
| }; | ||
| export default index; | ||
| export default Lottie; | ||
| export { Animator, useAnimator }; | ||
| //# sourceMappingURL=index.es.js.map |
@@ -1,1 +0,1 @@ | ||
| import e,{forwardRef as n,useRef as t,useEffect as r}from"react";import o from"prop-types";import u from"lottie-web";function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var l=n((function(n,o){var a=n.animationData,c=n.loop,l=n.autoplay,f=n.initialSegment,d=n.onComplete,p=n.onLoopComplete,m=n.onEnterFrame,s=n.onSegmentStart,y=n.onConfigReady,g=n.onDataReady,S=n.onDataFailed,b=n.onLoadedImages,D=n.onDOMLoaded,v=n.onDestroy,O=n.style,h=t(null),P=t(null),L=o||t(),j=function(){P.current&&P.current.play()},A=function(){P.current&&P.current.stop()},E=function(){P.current&&P.current.pause()},C=function(e){P.current&&P.current.setSpeed(e)},T=function(e,n){P.current&&P.current.goToAndPlay(e,n)},w=function(e,n){P.current&&P.current.goToAndStop(e,n)},R=function(e){P.current&&P.current.setDirection(e)},F=function(e,n){P.current&&P.current.playSegments(e,n)},M=function(e){P.current&&P.current.setSubframe(e)},_=function(){P.current&&P.current.destroy()},I=function(e){if(P.current)return P.current.getDuration(e)};r((function(){!function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};P.current&&P.current.destroy();var n=i({animationData:a||null,loop:Number.isNaN(c)?!1!==c:c,autoplay:!1!==l,initialSegment:f||null},e,{container:h.current});P.current=u.loadAnimation(n),L&&(L.current={play:j,stop:A,pause:E,setSpeed:C,goToAndPlay:T,goToAndStop:w,setDirection:R,playSegments:F,setSubframe:M,destroy:_,getDuration:I})}()}),[a,c,l,f]);return r((function(){var e=[{name:"complete",handler:d},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:s},{name:"config_ready",handler:y},{name:"data_ready",handler:g},{name:"data_failed",handler:S},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:D},{name:"destroy",handler:v}].map((function(e){return function(e,n){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return P.current&&(t&&P.current.removeEventListener(e),e&&n)?(P.current.addEventListener(e,n),function(){P.current.removeEventListener(e,n)}):function(){}}(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[d,p,m,s,y,g,S,b,D,v]),e.createElement("div",{ref:h,style:O})}));l.propTypes={animationData:o.shape(void 0).isRequired,loop:o.oneOfType([o.bool,o.number]),autoplay:o.bool,initialSegment:o.arrayOf(o.shape(o.number.isRequired)),onComplete:o.func,onLoopComplete:o.func,onEnterFrame:o.func,onSegmentStart:o.func,onConfigReady:o.func,onDataReady:o.func,onDataFailed:o.func,onLoadedImages:o.func,onDOMLoaded:o.func,onDestroy:o.func,style:o.shape(void 0)},l.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};var f={Animator:l,useAnimator:function(n){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=t(null),c=t(null);r((function(){a.current=u.loadAnimation(i({},n,{container:c.current}))}),[]);var l=function(){a.current&&a.current.play()},f=function(){a.current&&a.current.stop()},d=function(){a.current&&a.current.pause()},p=function(e){a.current&&a.current.setSpeed(e)},m=function(e,n){a.current&&a.current.goToAndStop(e,n)},s=function(e,n){a.current&&a.current.goToAndPlay(e,n)},y=function(e){a.current&&a.current.setDirection(e)},g=function(e,n){a.current&&a.current.playSegments(e,n)},S=function(e){a.current&&a.current.setSubframe(e)},b=function(){a.current&&a.current.destroy()},D=function(e){if(a.current)return a.current.getDuration(e)},v=e.createElement("div",{style:o,ref:c});return{View:v,play:l,stop:f,pause:d,setSpeed:p,goToAndStop:m,goToAndPlay:s,setDirection:y,playSegments:g,setSubframe:S,destroy:b,getDuration:D}}};export default f; | ||
| import e,{useRef as n,useEffect as t,forwardRef as o}from"react";import r from"prop-types";import a from"lottie-web";var u=function(o){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=o.animationData,l=o.loop,i=o.autoplay,c=o.initialSegment,d=o.onComplete,p=o.onLoopComplete,m=o.onEnterFrame,s=o.onSegmentStart,f=o.onConfigReady,y=o.onDataReady,g=o.onDataFailed,S=o.onLoadedImages,v=o.onDOMLoaded,D=o.onDestroy,h=n(null),b=n(null),O=function(){h.current&&h.current.play()},L=function(){h.current&&h.current.stop()},C=function(){h.current&&h.current.pause()},T=function(e){h.current&&h.current.setSpeed(e)},A=function(e,n){h.current&&h.current.goToAndPlay(e,n)},E=function(e,n){h.current&&h.current.goToAndStop(e,n)},P=function(e){h.current&&h.current.setDirection(e)},R=function(e,n){h.current&&h.current.playSegments(e,n)},F=function(e){h.current&&h.current.setSubframe(e)},j=function(){h.current&&h.current.destroy()},w=function(e){if(h.current)return h.current.getDuration(e)},x=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.current&&h.current.destroy();var n=Object.assign(Object.assign({animationData:u||null,loop:Number.isNaN(l)?!1!==l:l,autoplay:!1!==i,initialSegment:c||null},e),{container:b.current});h.current=a.loadAnimation(n)};t((function(){x()}),[u,l,i,c]);var I=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return h.current&&(t&&h.current.removeEventListener(e),e&&n)?(h.current.addEventListener(e,n),function(){h.current.removeEventListener(e,n)}):function(){}};t((function(){var e=[{name:"complete",handler:d},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:s},{name:"config_ready",handler:f},{name:"data_ready",handler:y},{name:"data_failed",handler:g},{name:"loaded_images",handler:S},{name:"DOMLoaded",handler:v},{name:"destroy",handler:D}].map((function(e){return I(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[d,p,m,s,f,y,g,S,v,D]);var M=e.createElement("div",{style:r,ref:b});return{View:M,play:O,stop:L,pause:C,setSpeed:T,goToAndStop:E,goToAndPlay:A,setDirection:P,playSegments:R,setSubframe:F,destroy:j,getDuration:w}},l=function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t},i=o((function(e,o){var r=e.style,a=l(e,["style"]),i=o||n(),c=u(a,r),d=c.View,p=c.play,m=c.stop,s=c.pause,f=c.setSpeed,y=c.goToAndStop,g=c.goToAndPlay,S=c.setDirection,v=c.playSegments,D=c.setSubframe,h=c.destroy,b=c.getDuration;return t((function(){i&&(i.current={play:p,stop:m,pause:s,setSpeed:f,goToAndPlay:g,goToAndStop:y,setDirection:S,playSegments:v,setSubframe:D,destroy:h,getDuration:b})}),[i.current]),d}));i.propTypes={animationData:r.shape(void 0).isRequired,loop:r.oneOfType([r.bool,r.number]),autoplay:r.bool,initialSegment:r.arrayOf(r.shape(r.number.isRequired)),onComplete:r.func,onLoopComplete:r.func,onEnterFrame:r.func,onSegmentStart:r.func,onConfigReady:r.func,onDataReady:r.func,onDataFailed:r.func,onLoadedImages:r.func,onDOMLoaded:r.func,onDestroy:r.func,style:r.shape(void 0)},i.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};var c=i,d=u;export default i;export{c as Animator,d as useAnimator}; |
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
@@ -10,52 +12,4 @@ | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| var Animator = React.forwardRef(function (props, ref) { | ||
| var useLottie = function useLottie(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationData = props.animationData, | ||
@@ -74,11 +28,9 @@ loop = props.loop, | ||
| onDOMLoaded = props.onDOMLoaded, | ||
| onDestroy = props.onDestroy, | ||
| style = props.style; | ||
| onDestroy = props.onDestroy; | ||
| var animationInstanceRef = React.useRef(null); | ||
| var animationContainer = React.useRef(null); | ||
| var animationInstanceRef = React.useRef(null); | ||
| var parentRef = ref || React.useRef(); | ||
| /* | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| */ | ||
@@ -219,5 +171,5 @@ | ||
| /* | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| */ | ||
@@ -238,3 +190,3 @@ | ||
| var config = _objectSpread2({ | ||
| var config = Object.assign(Object.assign({ | ||
| animationData: animationData || null, | ||
@@ -244,26 +196,12 @@ loop: !Number.isNaN(loop) ? loop : loop !== false, | ||
| initialSegment: initialSegment || null | ||
| }, forceOptions, { | ||
| }, forceOptions), { | ||
| container: animationContainer.current | ||
| }); | ||
| animationInstanceRef.current = lottie.loadAnimation(config); | ||
| }; | ||
| /** | ||
| * Initialize and listen for changes that need to reinitialize Lottie | ||
| */ | ||
| animationInstanceRef.current = lottie.loadAnimation(config); // Share methods which control Lottie to the parent component | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }; // Initialize and listen for changes that need to reinitialize Lottie | ||
| React.useEffect(function () { | ||
@@ -273,5 +211,5 @@ loadAnimation(); | ||
| /* | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| */ | ||
@@ -307,3 +245,7 @@ | ||
| }; | ||
| /** | ||
| * Reinitialize listener on change | ||
| */ | ||
| React.useEffect(function () { | ||
@@ -367,8 +309,85 @@ var listeners = [{ | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| ref: animationContainer, | ||
| style: style | ||
| /** | ||
| * Build the animation view | ||
| */ | ||
| var View = /*#__PURE__*/React__default.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| var __rest = undefined && undefined.__rest || function (s, e) { | ||
| var t = {}; | ||
| for (var p in s) { | ||
| if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| } | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| }; | ||
| var Lottie = React.forwardRef(function (props, ref) { | ||
| var style = props.style, | ||
| lottieProps = __rest(props, ["style"]); | ||
| var parentRef = ref || React.useRef(); | ||
| /** | ||
| * Initialize the 'useLottie' hook | ||
| */ | ||
| var _useLottie = useLottie(lottieProps, style), | ||
| View = _useLottie.View, | ||
| play = _useLottie.play, | ||
| stop = _useLottie.stop, | ||
| pause = _useLottie.pause, | ||
| setSpeed = _useLottie.setSpeed, | ||
| goToAndStop = _useLottie.goToAndStop, | ||
| goToAndPlay = _useLottie.goToAndPlay, | ||
| setDirection = _useLottie.setDirection, | ||
| playSegments = _useLottie.playSegments, | ||
| setSubframe = _useLottie.setSubframe, | ||
| destroy = _useLottie.destroy, | ||
| getDuration = _useLottie.getDuration; | ||
| /** | ||
| * Share methods which control Lottie to the parent component | ||
| */ | ||
| React.useEffect(function () { | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }, [parentRef.current]); | ||
| return View; | ||
| }); | ||
| Animator.propTypes = { | ||
| Lottie.propTypes = { | ||
| animationData: PropTypes.shape(undefined).isRequired, | ||
@@ -390,3 +409,3 @@ loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| }; | ||
| Animator.defaultProps = { | ||
| Lottie.defaultProps = { | ||
| loop: true, | ||
@@ -408,172 +427,8 @@ autoplay: true, | ||
| var useAnimator = function useAnimator(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationInstanceRef = React.useRef(null); | ||
| var animationContainer = React.useRef(null); // Initialize Lottie | ||
| var Animator = Lottie; | ||
| var useAnimator = useLottie; | ||
| React.useEffect(function () { | ||
| animationInstanceRef.current = lottie.loadAnimation(_objectSpread2({}, props, { | ||
| container: animationContainer.current | ||
| })); // eslint-disable-next-line | ||
| }, []); | ||
| /** | ||
| * Play | ||
| * TODO: complete | ||
| */ | ||
| var play = function play() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.play(); | ||
| } | ||
| }; | ||
| /** | ||
| * Stop | ||
| * TODO: complete | ||
| */ | ||
| var stop = function stop() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.stop(); | ||
| } | ||
| }; | ||
| /** | ||
| * Pause | ||
| * TODO: complete | ||
| */ | ||
| var pause = function pause() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.pause(); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation speed | ||
| * TODO: complete | ||
| * @param speed | ||
| */ | ||
| var setSpeed = function setSpeed(speed) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSpeed(speed); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and stop | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var goToAndStop = function goToAndStop(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndStop(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and play | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var goToAndPlay = function goToAndPlay(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndPlay(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation direction | ||
| * TODO: complete | ||
| * @param direction | ||
| */ | ||
| var setDirection = function setDirection(direction) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setDirection(direction); | ||
| } | ||
| }; | ||
| /** | ||
| * Play animation segments | ||
| * TODO: complete | ||
| * @param segment | ||
| * @param force | ||
| */ | ||
| var playSegments = function playSegments(segment, force) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.playSegments(segment, force); | ||
| } | ||
| }; | ||
| /** | ||
| * Set sub frames | ||
| * TODO: complete | ||
| * @param useSubFrames | ||
| */ | ||
| var setSubframe = function setSubframe(useSubFrames) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSubframe(useSubFrames); | ||
| } | ||
| }; | ||
| /** | ||
| * Destroy animation | ||
| * TODO: complete | ||
| */ | ||
| var destroy = function destroy() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| }; | ||
| /** | ||
| * Get animation duration | ||
| * TODO: complete | ||
| * @param inFrames | ||
| */ | ||
| var getDuration = function getDuration(inFrames) { | ||
| if (animationInstanceRef.current) { | ||
| return animationInstanceRef.current.getDuration(inFrames); | ||
| } | ||
| return undefined; | ||
| }; // Build the animation view | ||
| var View = /*#__PURE__*/React__default.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| var index = { | ||
| Animator: Animator, | ||
| useAnimator: useAnimator | ||
| }; | ||
| module.exports = index; | ||
| exports.Animator = Animator; | ||
| exports.default = Lottie; | ||
| exports.useAnimator = useAnimator; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,1 +0,1 @@ | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),lottie=_interopDefault(require("lottie-web"));function _defineProperty(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function ownKeys(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})),t.push.apply(t,r)}return t}function _objectSpread2(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(t),!0).forEach(function(e){_defineProperty(n,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))})}return n}var Animator=React.forwardRef(function(e,n){var t=e.animationData,r=e.loop,o=e.autoplay,a=e.initialSegment,u=e.onComplete,c=e.onLoopComplete,i=e.onEnterFrame,l=e.onSegmentStart,p=e.onConfigReady,s=e.onDataReady,f=e.onDataFailed,d=e.onLoadedImages,y=e.onDOMLoaded,m=e.onDestroy,g=e.style,P=React.useRef(null),b=React.useRef(null),D=n||React.useRef(),S=function(){b.current&&b.current.play()},T=function(){b.current&&b.current.stop()},R=function(){b.current&&b.current.pause()},v=function(e){b.current&&b.current.setSpeed(e)},O=function(e,n){b.current&&b.current.goToAndPlay(e,n)},h=function(e,n){b.current&&b.current.goToAndStop(e,n)},_=function(e){b.current&&b.current.setDirection(e)},A=function(e,n){b.current&&b.current.playSegments(e,n)},j=function(e){b.current&&b.current.setSubframe(e)},E=function(){b.current&&b.current.destroy()},w=function(e){if(b.current)return b.current.getDuration(e)};React.useEffect(function(){!function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};b.current&&b.current.destroy();var n=_objectSpread2({animationData:t||null,loop:Number.isNaN(r)?!1!==r:r,autoplay:!1!==o,initialSegment:a||null},e,{container:P.current});b.current=lottie.loadAnimation(n),D&&(D.current={play:S,stop:T,pause:R,setSpeed:v,goToAndPlay:O,goToAndStop:h,setDirection:_,playSegments:A,setSubframe:j,destroy:E,getDuration:w})}()},[t,r,o,a]);return React.useEffect(function(){var e=[{name:"complete",handler:u},{name:"loopComplete",handler:c},{name:"enterFrame",handler:i},{name:"segmentStart",handler:l},{name:"config_ready",handler:p},{name:"data_ready",handler:s},{name:"data_failed",handler:f},{name:"loaded_images",handler:d},{name:"DOMLoaded",handler:y},{name:"destroy",handler:m}].map(function(e){return function(e,n){var t=2<arguments.length&&void 0!==arguments[2]&&arguments[2];return b.current&&(t&&b.current.removeEventListener(e),e&&n)?(b.current.addEventListener(e,n),function(){b.current.removeEventListener(e,n)}):function(){}}(e.name,e.handler)});return function(){e.forEach(function(e){return e()})}},[u,c,i,l,p,s,f,d,y,m]),React__default.createElement("div",{ref:P,style:g})});Animator.propTypes={animationData:PropTypes.shape(void 0).isRequired,loop:PropTypes.oneOfType([PropTypes.bool,PropTypes.number]),autoplay:PropTypes.bool,initialSegment:PropTypes.arrayOf(PropTypes.shape(PropTypes.number.isRequired)),onComplete:PropTypes.func,onLoopComplete:PropTypes.func,onEnterFrame:PropTypes.func,onSegmentStart:PropTypes.func,onConfigReady:PropTypes.func,onDataReady:PropTypes.func,onDataFailed:PropTypes.func,onLoadedImages:PropTypes.func,onDOMLoaded:PropTypes.func,onDestroy:PropTypes.func,style:PropTypes.shape(void 0)},Animator.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};var useAnimator=function(e){var n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},t=React.useRef(null),r=React.useRef(null);React.useEffect(function(){t.current=lottie.loadAnimation(_objectSpread2({},e,{container:r.current}))},[]);return{View:React__default.createElement("div",{style:n,ref:r}),play:function(){t.current&&t.current.play()},stop:function(){t.current&&t.current.stop()},pause:function(){t.current&&t.current.pause()},setSpeed:function(e){t.current&&t.current.setSpeed(e)},goToAndStop:function(e,n){t.current&&t.current.goToAndStop(e,n)},goToAndPlay:function(e,n){t.current&&t.current.goToAndPlay(e,n)},setDirection:function(e){t.current&&t.current.setDirection(e)},playSegments:function(e,n){t.current&&t.current.playSegments(e,n)},setSubframe:function(e){t.current&&t.current.setSubframe(e)},destroy:function(){t.current&&t.current.destroy()},getDuration:function(e){if(t.current)return t.current.getDuration(e)}}},index={Animator:Animator,useAnimator:useAnimator};module.exports=index; | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=e(require("prop-types")),o=e(require("lottie-web")),a=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=e.animationData,u=e.loop,l=e.autoplay,i=e.initialSegment,c=e.onComplete,d=e.onLoopComplete,s=e.onEnterFrame,f=e.onSegmentStart,p=e.onConfigReady,m=e.onDataReady,y=e.onDataFailed,g=e.onLoadedImages,S=e.onDOMLoaded,v=e.onDestroy,D=n.useRef(null),b=n.useRef(null),h=function(){D.current&&D.current.play()},O=function(){D.current&&D.current.stop()},L=function(){D.current&&D.current.pause()},E=function(e){D.current&&D.current.setSpeed(e)},R=function(e,n){D.current&&D.current.goToAndPlay(e,n)},A=function(e,n){D.current&&D.current.goToAndStop(e,n)},C=function(e){D.current&&D.current.setDirection(e)},T=function(e,n){D.current&&D.current.playSegments(e,n)},P=function(e){D.current&&D.current.setSubframe(e)},j=function(){D.current&&D.current.destroy()},w=function(e){if(D.current)return D.current.getDuration(e)},F=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};D.current&&D.current.destroy();var n=Object.assign(Object.assign({animationData:a||null,loop:Number.isNaN(u)?!1!==u:u,autoplay:!1!==l,initialSegment:i||null},e),{container:b.current});D.current=o.loadAnimation(n)};n.useEffect((function(){F()}),[a,u,l,i]);var x=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return D.current&&(t&&D.current.removeEventListener(e),e&&n)?(D.current.addEventListener(e,n),function(){D.current.removeEventListener(e,n)}):function(){}};n.useEffect((function(){var e=[{name:"complete",handler:c},{name:"loopComplete",handler:d},{name:"enterFrame",handler:s},{name:"segmentStart",handler:f},{name:"config_ready",handler:p},{name:"data_ready",handler:m},{name:"data_failed",handler:y},{name:"loaded_images",handler:g},{name:"DOMLoaded",handler:S},{name:"destroy",handler:v}].map((function(e){return x(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[c,d,s,f,p,m,y,g,S,v]);var _=t.createElement("div",{style:r,ref:b});return{View:_,play:h,stop:O,pause:L,setSpeed:E,goToAndStop:A,goToAndPlay:R,setDirection:C,playSegments:T,setSubframe:P,destroy:j,getDuration:w}},u=function(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(t[r[o]]=e[r[o]])}return t},l=n.forwardRef((function(e,t){var r=e.style,o=u(e,["style"]),l=t||n.useRef(),i=a(o,r),c=i.View,d=i.play,s=i.stop,f=i.pause,p=i.setSpeed,m=i.goToAndStop,y=i.goToAndPlay,g=i.setDirection,S=i.playSegments,v=i.setSubframe,D=i.destroy,b=i.getDuration;return n.useEffect((function(){l&&(l.current={play:d,stop:s,pause:f,setSpeed:p,goToAndPlay:y,goToAndStop:m,setDirection:g,playSegments:S,setSubframe:v,destroy:D,getDuration:b})}),[l.current]),c}));l.propTypes={animationData:r.shape(void 0).isRequired,loop:r.oneOfType([r.bool,r.number]),autoplay:r.bool,initialSegment:r.arrayOf(r.shape(r.number.isRequired)),onComplete:r.func,onLoopComplete:r.func,onEnterFrame:r.func,onSegmentStart:r.func,onConfigReady:r.func,onDataReady:r.func,onDataFailed:r.func,onLoadedImages:r.func,onDOMLoaded:r.func,onDestroy:r.func,style:r.shape(void 0)},l.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};var i=l,c=a;exports.Animator=i,exports.default=l,exports.useAnimator=c; |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types'), require('lottie-web')) : | ||
| typeof define === 'function' && define.amd ? define(['react', 'prop-types', 'lottie-web'], factory) : | ||
| (global = global || self, global['lottie-react'] = factory(global.React, global.PropTypes, global.lottie)); | ||
| }(this, (function (React, PropTypes, lottie) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('lottie-web')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'lottie-web'], factory) : | ||
| (global = global || self, factory(global['lottie-react'] = {}, global.React, global.PropTypes, global.Lottie)); | ||
| }(this, (function (exports, React, PropTypes, lottie) { 'use strict'; | ||
| var React__default = 'default' in React ? React['default'] : React; | ||
| PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; | ||
| lottie = lottie && Object.prototype.hasOwnProperty.call(lottie, 'default') ? lottie['default'] : lottie; | ||
| var React__default = 'default' in React ? React['default'] : React; | ||
| PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; | ||
| lottie = lottie && Object.prototype.hasOwnProperty.call(lottie, 'default') ? lottie['default'] : lottie; | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| var useLottie = function useLottie(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationData = props.animationData, | ||
| loop = props.loop, | ||
| autoplay = props.autoplay, | ||
| initialSegment = props.initialSegment, | ||
| onComplete = props.onComplete, | ||
| onLoopComplete = props.onLoopComplete, | ||
| onEnterFrame = props.onEnterFrame, | ||
| onSegmentStart = props.onSegmentStart, | ||
| onConfigReady = props.onConfigReady, | ||
| onDataReady = props.onDataReady, | ||
| onDataFailed = props.onDataFailed, | ||
| onLoadedImages = props.onLoadedImages, | ||
| onDOMLoaded = props.onDOMLoaded, | ||
| onDestroy = props.onDestroy; | ||
| var animationInstanceRef = React.useRef(null); | ||
| var animationContainer = React.useRef(null); | ||
| /* | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| */ | ||
| return obj; | ||
| } | ||
| /** | ||
| * Play | ||
| * TODO: complete | ||
| */ | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| var play = function play() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.play(); | ||
| } | ||
| }; | ||
| /** | ||
| * Stop | ||
| * TODO: complete | ||
| */ | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| if (enumerableOnly) symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| }); | ||
| keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| var stop = function stop() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.stop(); | ||
| } | ||
| }; | ||
| /** | ||
| * Pause | ||
| * TODO: complete | ||
| */ | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i] != null ? arguments[i] : {}; | ||
| if (i % 2) { | ||
| ownKeys(Object(source), true).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }); | ||
| } else if (Object.getOwnPropertyDescriptors) { | ||
| Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
| } else { | ||
| ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| } | ||
| var pause = function pause() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.pause(); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation speed | ||
| * TODO: complete | ||
| * @param speed | ||
| */ | ||
| return target; | ||
| } | ||
| var Animator = React.forwardRef(function (props, ref) { | ||
| var animationData = props.animationData, | ||
| loop = props.loop, | ||
| autoplay = props.autoplay, | ||
| initialSegment = props.initialSegment, | ||
| onComplete = props.onComplete, | ||
| onLoopComplete = props.onLoopComplete, | ||
| onEnterFrame = props.onEnterFrame, | ||
| onSegmentStart = props.onSegmentStart, | ||
| onConfigReady = props.onConfigReady, | ||
| onDataReady = props.onDataReady, | ||
| onDataFailed = props.onDataFailed, | ||
| onLoadedImages = props.onLoadedImages, | ||
| onDOMLoaded = props.onDOMLoaded, | ||
| onDestroy = props.onDestroy, | ||
| style = props.style; | ||
| var animationContainer = React.useRef(null); | ||
| var animationInstanceRef = React.useRef(null); | ||
| var parentRef = ref || React.useRef(); | ||
| /* | ||
| ====================================== | ||
| INTERACTION METHODS | ||
| ====================================== | ||
| */ | ||
| var setSpeed = function setSpeed(speed) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSpeed(speed); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and play | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| /** | ||
| * Play | ||
| * TODO: complete | ||
| */ | ||
| var play = function play() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.play(); | ||
| } | ||
| }; | ||
| /** | ||
| * Stop | ||
| * TODO: complete | ||
| */ | ||
| var goToAndPlay = function goToAndPlay(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndPlay(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and stop | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var stop = function stop() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.stop(); | ||
| } | ||
| }; | ||
| /** | ||
| * Pause | ||
| * TODO: complete | ||
| */ | ||
| var goToAndStop = function goToAndStop(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndStop(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation direction | ||
| * TODO: complete | ||
| * @param direction | ||
| */ | ||
| var pause = function pause() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.pause(); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation speed | ||
| * TODO: complete | ||
| * @param speed | ||
| */ | ||
| var setDirection = function setDirection(direction) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setDirection(direction); | ||
| } | ||
| }; | ||
| /** | ||
| * Play animation segments | ||
| * TODO: complete | ||
| * @param segment | ||
| * @param force | ||
| */ | ||
| var setSpeed = function setSpeed(speed) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSpeed(speed); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and play | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var playSegments = function playSegments(segment, force) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.playSegments(segment, force); | ||
| } | ||
| }; | ||
| /** | ||
| * Set sub frames | ||
| * TODO: complete | ||
| * @param useSubFrames | ||
| */ | ||
| var goToAndPlay = function goToAndPlay(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndPlay(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and stop | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var setSubframe = function setSubframe(useSubFrames) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSubframe(useSubFrames); | ||
| } | ||
| }; | ||
| /** | ||
| * Destroy animation | ||
| * TODO: complete | ||
| */ | ||
| var goToAndStop = function goToAndStop(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndStop(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation direction | ||
| * TODO: complete | ||
| * @param direction | ||
| */ | ||
| var destroy = function destroy() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| }; | ||
| /** | ||
| * Get animation duration | ||
| * TODO: complete | ||
| * @param inFrames | ||
| */ | ||
| var setDirection = function setDirection(direction) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setDirection(direction); | ||
| } | ||
| }; | ||
| /** | ||
| * Play animation segments | ||
| * TODO: complete | ||
| * @param segment | ||
| * @param force | ||
| */ | ||
| var getDuration = function getDuration(inFrames) { | ||
| if (animationInstanceRef.current) { | ||
| return animationInstanceRef.current.getDuration(inFrames); | ||
| } | ||
| return undefined; | ||
| }; | ||
| /* | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| */ | ||
| var playSegments = function playSegments(segment, force) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.playSegments(segment, force); | ||
| } | ||
| }; | ||
| /** | ||
| * Set sub frames | ||
| * TODO: complete | ||
| * @param useSubFrames | ||
| */ | ||
| /** | ||
| * Load a new animation, and if it's the case, destroy the previous one | ||
| * @param {Object} forceOptions | ||
| */ | ||
| var setSubframe = function setSubframe(useSubFrames) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSubframe(useSubFrames); | ||
| } | ||
| }; | ||
| /** | ||
| * Destroy animation | ||
| * TODO: complete | ||
| */ | ||
| var loadAnimation = function loadAnimation() { | ||
| var forceOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| var destroy = function destroy() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| }; | ||
| /** | ||
| * Get animation duration | ||
| * TODO: complete | ||
| * @param inFrames | ||
| */ | ||
| var config = Object.assign(Object.assign({ | ||
| animationData: animationData || null, | ||
| loop: !Number.isNaN(loop) ? loop : loop !== false, | ||
| autoplay: autoplay !== false, | ||
| initialSegment: initialSegment || null | ||
| }, forceOptions), { | ||
| container: animationContainer.current | ||
| }); | ||
| animationInstanceRef.current = lottie.loadAnimation(config); | ||
| }; | ||
| /** | ||
| * Initialize and listen for changes that need to reinitialize Lottie | ||
| */ | ||
| var getDuration = function getDuration(inFrames) { | ||
| if (animationInstanceRef.current) { | ||
| return animationInstanceRef.current.getDuration(inFrames); | ||
| } | ||
| React.useEffect(function () { | ||
| loadAnimation(); | ||
| }, [animationData, loop, autoplay, initialSegment]); | ||
| /* | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| */ | ||
| return undefined; | ||
| }; | ||
| /* | ||
| ====================================== | ||
| LOTTIE | ||
| ====================================== | ||
| */ | ||
| /** | ||
| * Handle the process of adding an event listener | ||
| * @param {String} eventName | ||
| * @param {Function} eventHandler | ||
| * @param {Boolean} removePreviousListeners | ||
| * @return {Function} Function that deregister the listener | ||
| */ | ||
| /** | ||
| * Load a new animation, and if it's the case, destroy the previous one | ||
| * @param {Object} forceOptions | ||
| */ | ||
| var addEventListenerHelper = function addEventListenerHelper(eventName, eventHandler) { | ||
| var removePreviousListeners = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| if (animationInstanceRef.current) { | ||
| if (removePreviousListeners) { | ||
| animationInstanceRef.current.removeEventListener(eventName); | ||
| } | ||
| var loadAnimation = function loadAnimation() { | ||
| var forceOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| if (eventName && eventHandler) { | ||
| animationInstanceRef.current.addEventListener(eventName, eventHandler); // Return a function to deregister the event | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| var config = _objectSpread2({ | ||
| animationData: animationData || null, | ||
| loop: !Number.isNaN(loop) ? loop : loop !== false, | ||
| autoplay: autoplay !== false, | ||
| initialSegment: initialSegment || null | ||
| }, forceOptions, { | ||
| container: animationContainer.current | ||
| }); | ||
| animationInstanceRef.current = lottie.loadAnimation(config); // Share methods which control Lottie to the parent component | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }; // Initialize and listen for changes that need to reinitialize Lottie | ||
| React.useEffect(function () { | ||
| loadAnimation(); | ||
| }, [animationData, loop, autoplay, initialSegment]); | ||
| /* | ||
| ====================================== | ||
| EVENTS | ||
| ====================================== | ||
| */ | ||
| /** | ||
| * Handle the process of adding an event listener | ||
| * @param {String} eventName | ||
| * @param {Function} eventHandler | ||
| * @param {Boolean} removePreviousListeners | ||
| * @return {Function} Function that deregister the listener | ||
| */ | ||
| var addEventListenerHelper = function addEventListenerHelper(eventName, eventHandler) { | ||
| var removePreviousListeners = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; | ||
| if (animationInstanceRef.current) { | ||
| if (removePreviousListeners) { | ||
| animationInstanceRef.current.removeEventListener(eventName); | ||
| return function () { | ||
| // TODO: Should we remove all the listeners? | ||
| animationInstanceRef.current.removeEventListener(eventName, eventHandler); | ||
| }; | ||
| } | ||
| } | ||
| if (eventName && eventHandler) { | ||
| animationInstanceRef.current.addEventListener(eventName, eventHandler); // Return a function to deregister the event | ||
| return function () { | ||
| // TODO: Should we remove all the listeners? | ||
| animationInstanceRef.current.removeEventListener(eventName, eventHandler); | ||
| }; | ||
| } | ||
| } | ||
| return function () {}; | ||
| }; | ||
| React.useEffect(function () { | ||
| var listeners = [{ | ||
| name: "complete", | ||
| handler: onComplete | ||
| }, { | ||
| name: "loopComplete", | ||
| handler: onLoopComplete | ||
| }, { | ||
| name: "enterFrame", | ||
| handler: onEnterFrame | ||
| }, { | ||
| name: "segmentStart", | ||
| handler: onSegmentStart | ||
| }, { | ||
| name: "config_ready", | ||
| handler: onConfigReady | ||
| }, { | ||
| name: "data_ready", | ||
| handler: onDataReady | ||
| }, { | ||
| name: "data_failed", | ||
| handler: onDataFailed | ||
| }, { | ||
| name: "loaded_images", | ||
| handler: onLoadedImages | ||
| }, { | ||
| name: "DOMLoaded", | ||
| handler: onDOMLoaded | ||
| }, { | ||
| name: "destroy", | ||
| handler: onDestroy | ||
| }]; | ||
| var deregisterList = listeners.map(function (event) { | ||
| return addEventListenerHelper(event.name, event.handler); | ||
| }); // Deregister events on unmount | ||
| return function () { | ||
| deregisterList.forEach(function (deregister) { | ||
| return deregister(); | ||
| }); | ||
| return function () {}; | ||
| }; | ||
| }, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]); | ||
| /** | ||
| * ALPHA | ||
| */ | ||
| // Detect changes of the loop param and change it without reloading the animation | ||
| // TODO: needs intensive testing | ||
| // useEffect(() => { | ||
| // if (animationInstanceRef.current.loop !== loop) { | ||
| // animationInstanceRef.current.loop = loop; | ||
| // } | ||
| // | ||
| // // // TODO: decide if this is a desired behavior | ||
| // // if (animationInstanceRef.current.isPaused) { | ||
| // // animationInstanceRef.current.play(); | ||
| // // } | ||
| // }, [loop]); | ||
| /** | ||
| * Reinitialize listener on change | ||
| */ | ||
| return /*#__PURE__*/React__default.createElement("div", { | ||
| ref: animationContainer, | ||
| style: style | ||
| }); | ||
| }); | ||
| Animator.propTypes = { | ||
| animationData: PropTypes.shape(undefined).isRequired, | ||
| loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| autoplay: PropTypes.bool, | ||
| initialSegment: PropTypes.arrayOf(PropTypes.shape(PropTypes.number.isRequired)), | ||
| onComplete: PropTypes.func, | ||
| onLoopComplete: PropTypes.func, | ||
| onEnterFrame: PropTypes.func, | ||
| onSegmentStart: PropTypes.func, | ||
| onConfigReady: PropTypes.func, | ||
| onDataReady: PropTypes.func, | ||
| onDataFailed: PropTypes.func, | ||
| onLoadedImages: PropTypes.func, | ||
| onDOMLoaded: PropTypes.func, | ||
| onDestroy: PropTypes.func, | ||
| style: PropTypes.shape(undefined) | ||
| }; | ||
| Animator.defaultProps = { | ||
| loop: true, | ||
| autoplay: true, | ||
| initialSegment: null, | ||
| onComplete: null, | ||
| onLoopComplete: null, | ||
| onEnterFrame: null, | ||
| onSegmentStart: null, | ||
| onConfigReady: null, | ||
| onDataReady: null, | ||
| onDataFailed: null, | ||
| onLoadedImages: null, | ||
| onDOMLoaded: null, | ||
| onDestroy: null, | ||
| style: null | ||
| }; | ||
| var useAnimator = function useAnimator(props) { | ||
| var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var animationInstanceRef = React.useRef(null); | ||
| var animationContainer = React.useRef(null); // Initialize Lottie | ||
| React.useEffect(function () { | ||
| var listeners = [{ | ||
| name: "complete", | ||
| handler: onComplete | ||
| }, { | ||
| name: "loopComplete", | ||
| handler: onLoopComplete | ||
| }, { | ||
| name: "enterFrame", | ||
| handler: onEnterFrame | ||
| }, { | ||
| name: "segmentStart", | ||
| handler: onSegmentStart | ||
| }, { | ||
| name: "config_ready", | ||
| handler: onConfigReady | ||
| }, { | ||
| name: "data_ready", | ||
| handler: onDataReady | ||
| }, { | ||
| name: "data_failed", | ||
| handler: onDataFailed | ||
| }, { | ||
| name: "loaded_images", | ||
| handler: onLoadedImages | ||
| }, { | ||
| name: "DOMLoaded", | ||
| handler: onDOMLoaded | ||
| }, { | ||
| name: "destroy", | ||
| handler: onDestroy | ||
| }]; | ||
| var deregisterList = listeners.map(function (event) { | ||
| return addEventListenerHelper(event.name, event.handler); | ||
| }); // Deregister events on unmount | ||
| React.useEffect(function () { | ||
| animationInstanceRef.current = lottie.loadAnimation(_objectSpread2({}, props, { | ||
| container: animationContainer.current | ||
| })); // eslint-disable-next-line | ||
| }, []); | ||
| /** | ||
| * Play | ||
| * TODO: complete | ||
| */ | ||
| return function () { | ||
| deregisterList.forEach(function (deregister) { | ||
| return deregister(); | ||
| }); | ||
| }; | ||
| }, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]); | ||
| /** | ||
| * ALPHA | ||
| */ | ||
| // Detect changes of the loop param and change it without reloading the animation | ||
| // TODO: needs intensive testing | ||
| // useEffect(() => { | ||
| // if (animationInstanceRef.current.loop !== loop) { | ||
| // animationInstanceRef.current.loop = loop; | ||
| // } | ||
| // | ||
| // // // TODO: decide if this is a desired behavior | ||
| // // if (animationInstanceRef.current.isPaused) { | ||
| // // animationInstanceRef.current.play(); | ||
| // // } | ||
| // }, [loop]); | ||
| var play = function play() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.play(); | ||
| } | ||
| }; | ||
| /** | ||
| * Stop | ||
| * TODO: complete | ||
| */ | ||
| /** | ||
| * Build the animation view | ||
| */ | ||
| var stop = function stop() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.stop(); | ||
| } | ||
| var View = /*#__PURE__*/React__default.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| /** | ||
| * Pause | ||
| * TODO: complete | ||
| */ | ||
| var __rest = undefined && undefined.__rest || function (s, e) { | ||
| var t = {}; | ||
| var pause = function pause() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.pause(); | ||
| for (var p in s) { | ||
| if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; | ||
| } | ||
| }; | ||
| /** | ||
| * Set animation speed | ||
| * TODO: complete | ||
| * @param speed | ||
| */ | ||
| var setSpeed = function setSpeed(speed) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSpeed(speed); | ||
| if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
| if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; | ||
| } | ||
| return t; | ||
| }; | ||
| /** | ||
| * Got to frame and stop | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var Lottie = React.forwardRef(function (props, ref) { | ||
| var style = props.style, | ||
| lottieProps = __rest(props, ["style"]); | ||
| var parentRef = ref || React.useRef(); | ||
| /** | ||
| * Initialize the 'useLottie' hook | ||
| */ | ||
| var goToAndStop = function goToAndStop(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndStop(value, isFrame); | ||
| } | ||
| }; | ||
| /** | ||
| * Got to frame and play | ||
| * TODO: complete | ||
| * @param value | ||
| * @param isFrame | ||
| */ | ||
| var _useLottie = useLottie(lottieProps, style), | ||
| View = _useLottie.View, | ||
| play = _useLottie.play, | ||
| stop = _useLottie.stop, | ||
| pause = _useLottie.pause, | ||
| setSpeed = _useLottie.setSpeed, | ||
| goToAndStop = _useLottie.goToAndStop, | ||
| goToAndPlay = _useLottie.goToAndPlay, | ||
| setDirection = _useLottie.setDirection, | ||
| playSegments = _useLottie.playSegments, | ||
| setSubframe = _useLottie.setSubframe, | ||
| destroy = _useLottie.destroy, | ||
| getDuration = _useLottie.getDuration; | ||
| /** | ||
| * Share methods which control Lottie to the parent component | ||
| */ | ||
| var goToAndPlay = function goToAndPlay(value, isFrame) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.goToAndPlay(value, isFrame); | ||
| } | ||
| React.useEffect(function () { | ||
| if (parentRef) { | ||
| parentRef.current = { | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndPlay: goToAndPlay, | ||
| goToAndStop: goToAndStop, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| } | ||
| }, [parentRef.current]); | ||
| return View; | ||
| }); | ||
| Lottie.propTypes = { | ||
| animationData: PropTypes.shape(undefined).isRequired, | ||
| loop: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), | ||
| autoplay: PropTypes.bool, | ||
| initialSegment: PropTypes.arrayOf(PropTypes.shape(PropTypes.number.isRequired)), | ||
| onComplete: PropTypes.func, | ||
| onLoopComplete: PropTypes.func, | ||
| onEnterFrame: PropTypes.func, | ||
| onSegmentStart: PropTypes.func, | ||
| onConfigReady: PropTypes.func, | ||
| onDataReady: PropTypes.func, | ||
| onDataFailed: PropTypes.func, | ||
| onLoadedImages: PropTypes.func, | ||
| onDOMLoaded: PropTypes.func, | ||
| onDestroy: PropTypes.func, | ||
| style: PropTypes.shape(undefined) | ||
| }; | ||
| /** | ||
| * Set animation direction | ||
| * TODO: complete | ||
| * @param direction | ||
| */ | ||
| var setDirection = function setDirection(direction) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setDirection(direction); | ||
| } | ||
| Lottie.defaultProps = { | ||
| loop: true, | ||
| autoplay: true, | ||
| initialSegment: null, | ||
| onComplete: null, | ||
| onLoopComplete: null, | ||
| onEnterFrame: null, | ||
| onSegmentStart: null, | ||
| onConfigReady: null, | ||
| onDataReady: null, | ||
| onDataFailed: null, | ||
| onLoadedImages: null, | ||
| onDOMLoaded: null, | ||
| onDestroy: null, | ||
| style: null | ||
| }; | ||
| /** | ||
| * Play animation segments | ||
| * TODO: complete | ||
| * @param segment | ||
| * @param force | ||
| */ | ||
| var Animator = Lottie; | ||
| var useAnimator = useLottie; | ||
| var playSegments = function playSegments(segment, force) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.playSegments(segment, force); | ||
| } | ||
| }; | ||
| /** | ||
| * Set sub frames | ||
| * TODO: complete | ||
| * @param useSubFrames | ||
| */ | ||
| exports.Animator = Animator; | ||
| exports.default = Lottie; | ||
| exports.useAnimator = useAnimator; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var setSubframe = function setSubframe(useSubFrames) { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.setSubframe(useSubFrames); | ||
| } | ||
| }; | ||
| /** | ||
| * Destroy animation | ||
| * TODO: complete | ||
| */ | ||
| var destroy = function destroy() { | ||
| if (animationInstanceRef.current) { | ||
| animationInstanceRef.current.destroy(); | ||
| } | ||
| }; | ||
| /** | ||
| * Get animation duration | ||
| * TODO: complete | ||
| * @param inFrames | ||
| */ | ||
| var getDuration = function getDuration(inFrames) { | ||
| if (animationInstanceRef.current) { | ||
| return animationInstanceRef.current.getDuration(inFrames); | ||
| } | ||
| return undefined; | ||
| }; // Build the animation view | ||
| var View = /*#__PURE__*/React__default.createElement("div", { | ||
| style: style, | ||
| ref: animationContainer | ||
| }); | ||
| return { | ||
| View: View, | ||
| play: play, | ||
| stop: stop, | ||
| pause: pause, | ||
| setSpeed: setSpeed, | ||
| goToAndStop: goToAndStop, | ||
| goToAndPlay: goToAndPlay, | ||
| setDirection: setDirection, | ||
| playSegments: playSegments, | ||
| setSubframe: setSubframe, | ||
| destroy: destroy, | ||
| getDuration: getDuration | ||
| }; | ||
| }; | ||
| var index = { | ||
| Animator: Animator, | ||
| useAnimator: useAnimator | ||
| }; | ||
| return index; | ||
| }))); | ||
| //# sourceMappingURL=index.umd.js.map |
@@ -1,1 +0,1 @@ | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("prop-types"),require("lottie-web")):"function"==typeof define&&define.amd?define(["react","prop-types","lottie-web"],n):(e=e||self)["lottie-react"]=n(e.React,e.PropTypes,e.lottie)}(this,(function(e,n,t){"use strict";var r="default"in e?e.default:e;function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?u(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var c=e.forwardRef((function(n,o){var u=n.animationData,c=n.loop,i=n.autoplay,l=n.initialSegment,f=n.onComplete,d=n.onLoopComplete,p=n.onEnterFrame,s=n.onSegmentStart,m=n.onConfigReady,y=n.onDataReady,g=n.onDataFailed,b=n.onLoadedImages,S=n.onDOMLoaded,D=n.onDestroy,O=n.style,v=e.useRef(null),h=e.useRef(null),P=o||e.useRef(),j=function(){h.current&&h.current.play()},R=function(){h.current&&h.current.stop()},E=function(){h.current&&h.current.pause()},w=function(e){h.current&&h.current.setSpeed(e)},L=function(e,n){h.current&&h.current.goToAndPlay(e,n)},A=function(e,n){h.current&&h.current.goToAndStop(e,n)},T=function(e){h.current&&h.current.setDirection(e)},C=function(e,n){h.current&&h.current.playSegments(e,n)},F=function(e){h.current&&h.current.setSubframe(e)},q=function(){h.current&&h.current.destroy()},M=function(e){if(h.current)return h.current.getDuration(e)};e.useEffect((function(){!function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.current&&h.current.destroy();var n=a({animationData:u||null,loop:Number.isNaN(c)?!1!==c:c,autoplay:!1!==i,initialSegment:l||null},e,{container:v.current});h.current=t.loadAnimation(n),P&&(P.current={play:j,stop:R,pause:E,setSpeed:w,goToAndPlay:L,goToAndStop:A,setDirection:T,playSegments:C,setSubframe:F,destroy:q,getDuration:M})}()}),[u,c,i,l]);return e.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:d},{name:"enterFrame",handler:p},{name:"segmentStart",handler:s},{name:"config_ready",handler:m},{name:"data_ready",handler:y},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:S},{name:"destroy",handler:D}].map((function(e){return function(e,n){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return h.current&&(t&&h.current.removeEventListener(e),e&&n)?(h.current.addEventListener(e,n),function(){h.current.removeEventListener(e,n)}):function(){}}(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[f,d,p,s,m,y,g,b,S,D]),r.createElement("div",{ref:v,style:O})}));c.propTypes={animationData:n.shape(void 0).isRequired,loop:n.oneOfType([n.bool,n.number]),autoplay:n.bool,initialSegment:n.arrayOf(n.shape(n.number.isRequired)),onComplete:n.func,onLoopComplete:n.func,onEnterFrame:n.func,onSegmentStart:n.func,onConfigReady:n.func,onDataReady:n.func,onDataFailed:n.func,onLoadedImages:n.func,onDOMLoaded:n.func,onDestroy:n.func,style:n.shape(void 0)},c.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};return{Animator:c,useAnimator:function(n){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e.useRef(null),c=e.useRef(null);e.useEffect((function(){u.current=t.loadAnimation(a({},n,{container:c.current}))}),[]);var i=function(){u.current&&u.current.play()},l=function(){u.current&&u.current.stop()},f=function(){u.current&&u.current.pause()},d=function(e){u.current&&u.current.setSpeed(e)},p=function(e,n){u.current&&u.current.goToAndStop(e,n)},s=function(e,n){u.current&&u.current.goToAndPlay(e,n)},m=function(e){u.current&&u.current.setDirection(e)},y=function(e,n){u.current&&u.current.playSegments(e,n)},g=function(e){u.current&&u.current.setSubframe(e)},b=function(){u.current&&u.current.destroy()},S=function(e){if(u.current)return u.current.getDuration(e)},D=r.createElement("div",{style:o,ref:c});return{View:D,play:i,stop:l,pause:f,setSpeed:d,goToAndStop:p,goToAndPlay:s,setDirection:m,playSegments:y,setSubframe:g,destroy:b,getDuration:S}}}})); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("lottie-web")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","lottie-web"],n):n((e=e||self)["lottie-react"]={},e.React,e.PropTypes,e.Lottie)}(this,(function(e,n,t,o){"use strict";var r="default"in n?n.default:n;t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var a=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=e.animationData,u=e.loop,l=e.autoplay,i=e.initialSegment,c=e.onComplete,d=e.onLoopComplete,f=e.onEnterFrame,p=e.onSegmentStart,s=e.onConfigReady,m=e.onDataReady,y=e.onDataFailed,g=e.onLoadedImages,S=e.onDOMLoaded,v=e.onDestroy,b=n.useRef(null),D=n.useRef(null),h=function(){b.current&&b.current.play()},O=function(){b.current&&b.current.stop()},L=function(){b.current&&b.current.pause()},R=function(e){b.current&&b.current.setSpeed(e)},E=function(e,n){b.current&&b.current.goToAndPlay(e,n)},P=function(e,n){b.current&&b.current.goToAndStop(e,n)},A=function(e){b.current&&b.current.setDirection(e)},T=function(e,n){b.current&&b.current.playSegments(e,n)},j=function(e){b.current&&b.current.setSubframe(e)},w=function(){b.current&&b.current.destroy()},C=function(e){if(b.current)return b.current.getDuration(e)},F=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};b.current&&b.current.destroy();var n=Object.assign(Object.assign({animationData:a||null,loop:Number.isNaN(u)?!1!==u:u,autoplay:!1!==l,initialSegment:i||null},e),{container:D.current});b.current=o.loadAnimation(n)};n.useEffect((function(){F()}),[a,u,l,i]);var _=function(e,n){var t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return b.current&&(t&&b.current.removeEventListener(e),e&&n)?(b.current.addEventListener(e,n),function(){b.current.removeEventListener(e,n)}):function(){}};n.useEffect((function(){var e=[{name:"complete",handler:c},{name:"loopComplete",handler:d},{name:"enterFrame",handler:f},{name:"segmentStart",handler:p},{name:"config_ready",handler:s},{name:"data_ready",handler:m},{name:"data_failed",handler:y},{name:"loaded_images",handler:g},{name:"DOMLoaded",handler:S},{name:"destroy",handler:v}].map((function(e){return _(e.name,e.handler)}));return function(){e.forEach((function(e){return e()}))}}),[c,d,f,p,s,m,y,g,S,v]);var q=r.createElement("div",{style:t,ref:D});return{View:q,play:h,stop:O,pause:L,setSpeed:R,goToAndStop:P,goToAndPlay:E,setDirection:A,playSegments:T,setSubframe:j,destroy:w,getDuration:C}},u=function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t},l=n.forwardRef((function(e,t){var o=e.style,r=u(e,["style"]),l=t||n.useRef(),i=a(r,o),c=i.View,d=i.play,f=i.stop,p=i.pause,s=i.setSpeed,m=i.goToAndStop,y=i.goToAndPlay,g=i.setDirection,S=i.playSegments,v=i.setSubframe,b=i.destroy,D=i.getDuration;return n.useEffect((function(){l&&(l.current={play:d,stop:f,pause:p,setSpeed:s,goToAndPlay:y,goToAndStop:m,setDirection:g,playSegments:S,setSubframe:v,destroy:b,getDuration:D})}),[l.current]),c}));l.propTypes={animationData:t.shape(void 0).isRequired,loop:t.oneOfType([t.bool,t.number]),autoplay:t.bool,initialSegment:t.arrayOf(t.shape(t.number.isRequired)),onComplete:t.func,onLoopComplete:t.func,onEnterFrame:t.func,onSegmentStart:t.func,onConfigReady:t.func,onDataReady:t.func,onDataFailed:t.func,onLoadedImages:t.func,onDOMLoaded:t.func,onDestroy:t.func,style:t.shape(void 0)},l.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:null};var i=l,c=a;e.Animator=i,e.default=l,e.useAnimator=c,Object.defineProperty(e,"__esModule",{value:!0})})); |
| { | ||
| "name": "lottie-react", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "Lottie for React", | ||
@@ -33,2 +33,4 @@ "author": "David Gamote", | ||
| "scripts": { | ||
| "tsc:compile": "tsc", | ||
| "tsc:compile:watch": "tsc --watch", | ||
| "rollup:compile": "rollup -c", | ||
@@ -39,4 +41,6 @@ "rollup:compile:watch": "rollup -c -w", | ||
| "docz:serve": "docz build && docz serve", | ||
| "build": "run-s tsc:compile rollup:compile", | ||
| "build:watch": "run-p tsc:compile:watch rollup:compile:watch", | ||
| "postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz", | ||
| "prepublishOnly": "rm -rf build && npm run rollup:compile" | ||
| "prepublishOnly": "rm -rf build && npm run build" | ||
| }, | ||
@@ -49,33 +53,35 @@ "peerDependencies": { | ||
| "devDependencies": { | ||
| "@babel/core": "^7.9.0", | ||
| "@babel/preset-env": "^7.9.0", | ||
| "@babel/core": "^7.9.6", | ||
| "@babel/preset-env": "^7.9.6", | ||
| "@babel/preset-react": "^7.9.4", | ||
| "@rollup/plugin-commonjs": "^11.0.2", | ||
| "@rollup/plugin-node-resolve": "^7.1.1", | ||
| "autoprefixer": "^9.7.5", | ||
| "@rollup/plugin-commonjs": "^12.0.0", | ||
| "@rollup/plugin-node-resolve": "^8.0.0", | ||
| "autoprefixer": "^9.8.0", | ||
| "babel-loader": "^8.1.0", | ||
| "docz": "^2.2.0", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-airbnb": "^18.0.1", | ||
| "eslint-config-prettier": "^6.10.0", | ||
| "eslint-plugin-import": "^2.20.1", | ||
| "docz": "^2.3.1", | ||
| "eslint": "^7.1.0", | ||
| "eslint-config-airbnb": "^18.1.0", | ||
| "eslint-config-prettier": "^6.11.0", | ||
| "eslint-plugin-import": "^2.20.2", | ||
| "eslint-plugin-jsx-a11y": "^6.2.3", | ||
| "eslint-plugin-prettier": "^3.1.2", | ||
| "eslint-plugin-react": "^7.18.3", | ||
| "eslint-plugin-react-hooks": "^1.7.0", | ||
| "node-sass": "^4.13.1", | ||
| "prettier": "^1.19.1", | ||
| "react": "^16.8.0", | ||
| "react-dom": "^16.8.0", | ||
| "prop-types": "^15.5.7", | ||
| "rollup": "^2.3.1", | ||
| "eslint-plugin-prettier": "^3.1.3", | ||
| "eslint-plugin-react": "^7.20.0", | ||
| "eslint-plugin-react-hooks": "^4.0.2", | ||
| "node-sass": "^4.14.1", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^2.0.5", | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "rollup": "^2.10.9", | ||
| "rollup-plugin-babel": "^4.4.0", | ||
| "rollup-plugin-peer-deps-external": "^2.2.2", | ||
| "rollup-plugin-postcss": "^2.5.0", | ||
| "rollup-plugin-terser": "^5.3.0", | ||
| "rollup-plugin-uglify": "^6.0.4" | ||
| "rollup-plugin-postcss": "^3.1.1", | ||
| "rollup-plugin-terser": "^6.0.1", | ||
| "tslib": "^2.0.0", | ||
| "typescript": "^3.9.3" | ||
| }, | ||
| "dependencies": { | ||
| "lottie-web": "^5.6.7" | ||
| "lottie-web": "^5.6.10" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by25%
15
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-4.64%
124497
- Dev dependency count
- increased by7.41%
29
- Lines of code
- decreased by-3.08%
1477
Dependency changes
Updatedlottie-web@^5.6.10