including-modules
This commit is contained in:
Kismet Hasanaj
+46
@@ -0,0 +1,46 @@
|
||||
The MIT License
|
||||
|
||||
Copyright David Gamote and other contributors.
|
||||
|
||||
This software consists of voluntary contributions made by many
|
||||
individuals. For exact contribution history, see the revision history
|
||||
available on GitHub.
|
||||
|
||||
The following license applies to all parts of this software except as
|
||||
documented below:
|
||||
|
||||
====
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
====
|
||||
|
||||
Copyright and related rights for sample code are waived via CC0. Sample
|
||||
code is defined as all source code displayed within the prose of the
|
||||
documentation.
|
||||
|
||||
CC0: http://creativecommons.org/publicdomain/zero/1.0/
|
||||
|
||||
====
|
||||
|
||||
Files located in the node_modules and vendor directories are externally
|
||||
maintained libraries used by this software which have their own
|
||||
licenses; we recommend you read them, as their terms may differ from the
|
||||
terms above.
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
# lottie-react
|
||||
|
||||
[](https://www.npmjs.com/package/lottie-react) [](https://www.npmjs.com/package/lottie-react) [](https://snyk.io/test/github/Gamote/lottie-react?targetFile=package.json) [](https://coveralls.io/github/Gamote/lottie-react?branch=master) [](https://github.com/facebook/jest) [](https://github.com/Gamote/lottie-react/blob/master/LICENSE)
|
||||
|
||||
This project is meant to give developers full control over **[Lottie](https://airbnb.design/lottie/)** instance with minimal implementation by wrapping **[lottie-web](https://github.com/airbnb/lottie-web)** in a Component or Hook that can be easily used in **React** applications.
|
||||
|
||||
## Installation
|
||||
|
||||
1. Make sure you have the peer-dependencies installed: `react` and `react-dom`.
|
||||
|
||||
> _**Note:** This library is using React Hooks so the **minimum** version required for both **react** and **react-dom** is **v16.8.0**._
|
||||
|
||||
2. Install `lottie-react` using **yarn**
|
||||
|
||||
```shell
|
||||
yarn add lottie-react
|
||||
```
|
||||
|
||||
or **npm**
|
||||
|
||||
```shell
|
||||
npm i lottie-react
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Using the component ([try it](https://codesandbox.io/s/lottie-react-component-2k13t))
|
||||
|
||||
```tsx
|
||||
import React from "react";
|
||||
import Lottie from "lottie-react";
|
||||
import groovyWalkAnimation from "./groovyWalk.json";
|
||||
|
||||
const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
### Using the Hook ([try it](https://codesandbox.io/s/lottie-react-hook-13nio))
|
||||
|
||||
```tsx
|
||||
import React from "react";
|
||||
import { useLottie } from "lottie-react";
|
||||
import groovyWalkAnimation from "./groovyWalk.json";
|
||||
|
||||
const App = () => {
|
||||
const options = {
|
||||
animationData: groovyWalkAnimation,
|
||||
loop: true
|
||||
};
|
||||
|
||||
const { View } = useLottie(options);
|
||||
|
||||
return <>{View}</>;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
### 📄 Documentation
|
||||
|
||||
Checkout the [**documentation**](https://lottiereact.com) at [**https://lottiereact.com**](https://lottiereact.com) for more information and examples.
|
||||
|
||||
## Tests
|
||||
|
||||
Run the tests using the `yarn test` command.
|
||||
|
||||
### Coverage report
|
||||
```text
|
||||
-----------------------------|---------|----------|---------|---------|-------------------
|
||||
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
|
||||
-----------------------------|---------|----------|---------|---------|-------------------
|
||||
All files | 100 | 100 | 100 | 100 |
|
||||
components | 100 | 100 | 100 | 100 |
|
||||
Lottie.ts | 100 | 100 | 100 | 100 |
|
||||
hooks | 100 | 100 | 100 | 100 |
|
||||
useLottie.tsx | 100 | 100 | 100 | 100 |
|
||||
useLottieInteractivity.tsx | 100 | 100 | 100 | 100 |
|
||||
-----------------------------|---------|----------|---------|---------|-------------------
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/Gamote/lottie-react/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/issues) tab, and we will do our best to investigate it and fix it. Any **solutions**? You are very welcomed to open a [**pull request**](https://github.com/Gamote/lottie-react/pulls).
|
||||
|
||||
> 👩💻 `v3` is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the `v3` branch. And of course, you are encouraged to contribute. :)
|
||||
|
||||
Thank you for investing your time in contributing to our project! ✨
|
||||
|
||||
## Projects to check out
|
||||
|
||||
- [lottie-web](https://github.com/airbnb/lottie-web) - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
|
||||
- [lottie-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android
|
||||
- [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS
|
||||
- [lottie-react-native](https://github.com/react-native-community/lottie-react-native) - Lottie implementation for React Native
|
||||
- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations files? LottieFiles has a lot of them!
|
||||
|
||||
## License
|
||||
|
||||
**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/main/LICENSE).
|
||||
|
||||
Thanks to [David Probst Jr](https://lottiefiles.com/davidprobstjr) for the animations used in the examples.
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
/// <reference types="react" />
|
||||
import { AnimationDirection, AnimationSegment, AnimationItem, RendererType, AnimationConfigWithData, AnimationEventCallback, AnimationEvents, AnimationEventName } from 'lottie-web';
|
||||
export { default as LottiePlayer } from 'lottie-web';
|
||||
import * as react from 'react';
|
||||
import react__default, { RefObject, MutableRefObject, ReactElement, CSSProperties } from 'react';
|
||||
|
||||
type LottieRefCurrentProps = {
|
||||
play: () => void;
|
||||
stop: () => void;
|
||||
pause: () => void;
|
||||
setSpeed: (speed: number) => void;
|
||||
goToAndStop: (value: number, isFrame?: boolean) => void;
|
||||
goToAndPlay: (value: number, isFrame?: boolean) => void;
|
||||
setDirection: (direction: AnimationDirection) => void;
|
||||
playSegments: (segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean) => void;
|
||||
setSubframe: (useSubFrames: boolean) => void;
|
||||
getDuration: (inFrames?: boolean) => number | undefined;
|
||||
destroy: () => void;
|
||||
animationContainerRef: RefObject<HTMLDivElement>;
|
||||
animationLoaded: boolean;
|
||||
animationItem: AnimationItem | undefined;
|
||||
};
|
||||
type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
|
||||
type LottieOptions<T extends RendererType = "svg"> = Omit<AnimationConfigWithData<T>, "container" | "animationData"> & {
|
||||
animationData: unknown;
|
||||
lottieRef?: LottieRef;
|
||||
onComplete?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onLoopComplete?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onEnterFrame?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onSegmentStart?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onConfigReady?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onDataReady?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onDataFailed?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onLoadedImages?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onDOMLoaded?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
onDestroy?: AnimationEventCallback<AnimationEvents[AnimationEventName]> | null;
|
||||
} & Omit<react__default.HTMLProps<HTMLDivElement>, "loop">;
|
||||
type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
|
||||
animationData?: LottieOptions["animationData"];
|
||||
};
|
||||
type Axis = "x" | "y";
|
||||
type Position = {
|
||||
[key in Axis]: number | [number, number];
|
||||
};
|
||||
type Action = {
|
||||
type: "seek" | "play" | "stop" | "loop";
|
||||
frames: [number] | [number, number];
|
||||
visibility?: [number, number];
|
||||
position?: Position;
|
||||
};
|
||||
type InteractivityProps = {
|
||||
lottieObj: {
|
||||
View: ReactElement;
|
||||
} & LottieRefCurrentProps;
|
||||
actions: Action[];
|
||||
mode: "scroll" | "cursor";
|
||||
};
|
||||
type LottieComponentProps = LottieOptions & {
|
||||
interactivity?: Omit<InteractivityProps, "lottieObj">;
|
||||
};
|
||||
type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
|
||||
animationData?: LottieOptions["animationData"];
|
||||
};
|
||||
type Listener = {
|
||||
name: AnimationEventName;
|
||||
handler: AnimationEventCallback<AnimationEvents[AnimationEventName]>;
|
||||
};
|
||||
type PartialListener = Omit<Listener, "handler"> & {
|
||||
handler?: Listener["handler"] | null;
|
||||
};
|
||||
|
||||
declare const Lottie: (props: LottieComponentProps) => react.ReactElement<any, string | react.JSXElementConstructor<any>>;
|
||||
|
||||
declare const useLottie: <T extends RendererType = "svg">(props: LottieOptions<T>, style?: CSSProperties) => {
|
||||
View: ReactElement;
|
||||
} & LottieRefCurrentProps;
|
||||
|
||||
declare const useLottieInteractivity: ({ actions, mode, lottieObj, }: InteractivityProps) => ReactElement;
|
||||
|
||||
export { Action, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, Lottie as default, useLottie, useLottieInteractivity };
|
||||
+653
@@ -0,0 +1,653 @@
|
||||
import lottie from 'lottie-web';
|
||||
export { default as LottiePlayer } from 'lottie-web';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
|
||||
function _arrayLikeToArray(r, a) {
|
||||
(null == a || a > r.length) && (a = r.length);
|
||||
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
||||
return n;
|
||||
}
|
||||
function _arrayWithHoles(r) {
|
||||
if (Array.isArray(r)) return r;
|
||||
}
|
||||
function _defineProperty(e, r, t) {
|
||||
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
||||
value: t,
|
||||
enumerable: !0,
|
||||
configurable: !0,
|
||||
writable: !0
|
||||
}) : e[r] = t, e;
|
||||
}
|
||||
function _iterableToArrayLimit(r, l) {
|
||||
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
||||
if (null != t) {
|
||||
var e,
|
||||
n,
|
||||
i,
|
||||
u,
|
||||
a = [],
|
||||
f = !0,
|
||||
o = !1;
|
||||
try {
|
||||
if (i = (t = t.call(r)).next, 0 === l) {
|
||||
if (Object(t) !== t) return;
|
||||
f = !1;
|
||||
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
||||
} catch (r) {
|
||||
o = !0, n = r;
|
||||
} finally {
|
||||
try {
|
||||
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
||||
} finally {
|
||||
if (o) throw n;
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _objectWithoutProperties(e, t) {
|
||||
if (null == e) return {};
|
||||
var o,
|
||||
r,
|
||||
i = _objectWithoutPropertiesLoose(e, t);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var s = Object.getOwnPropertySymbols(e);
|
||||
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
||||
}
|
||||
return i;
|
||||
}
|
||||
function _objectWithoutPropertiesLoose(r, e) {
|
||||
if (null == r) return {};
|
||||
var t = {};
|
||||
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
||||
if (e.includes(n)) continue;
|
||||
t[n] = r[n];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _slicedToArray(r, e) {
|
||||
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _unsupportedIterableToArray(r, a) {
|
||||
if (r) {
|
||||
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
||||
var t = {}.toString.call(r).slice(8, -1);
|
||||
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
||||
}
|
||||
}
|
||||
|
||||
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
|
||||
var useLottie = function useLottie(props, style) {
|
||||
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;
|
||||
props.lottieRef;
|
||||
props.renderer;
|
||||
props.name;
|
||||
props.assetsPath;
|
||||
props.rendererSettings;
|
||||
var rest = _objectWithoutProperties(props, _excluded$1);
|
||||
var _useState = useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
animationLoaded = _useState2[0],
|
||||
setAnimationLoaded = _useState2[1];
|
||||
var animationInstanceRef = useRef();
|
||||
var animationContainer = useRef(null);
|
||||
/*
|
||||
======================================
|
||||
INTERACTION METHODS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Play
|
||||
*/
|
||||
var play = function play() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
||||
};
|
||||
/**
|
||||
* Stop
|
||||
*/
|
||||
var stop = function stop() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
|
||||
};
|
||||
/**
|
||||
* Pause
|
||||
*/
|
||||
var pause = function pause() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
||||
};
|
||||
/**
|
||||
* Set animation speed
|
||||
* @param speed
|
||||
*/
|
||||
var setSpeed = function setSpeed(speed) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
|
||||
};
|
||||
/**
|
||||
* Got to frame and play
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndPlay = function goToAndPlay(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Got to frame and stop
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndStop = function goToAndStop(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Set animation direction
|
||||
* @param direction
|
||||
*/
|
||||
var setDirection = function setDirection(direction) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
|
||||
};
|
||||
/**
|
||||
* Play animation segments
|
||||
* @param segments
|
||||
* @param forceFlag
|
||||
*/
|
||||
var playSegments = function playSegments(segments, forceFlag) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
|
||||
};
|
||||
/**
|
||||
* Set sub frames
|
||||
* @param useSubFrames
|
||||
*/
|
||||
var setSubframe = function setSubframe(useSubFrames) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
|
||||
};
|
||||
/**
|
||||
* Get animation duration
|
||||
* @param inFrames
|
||||
*/
|
||||
var getDuration = function getDuration(inFrames) {
|
||||
var _a;
|
||||
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
|
||||
};
|
||||
/**
|
||||
* Destroy animation
|
||||
*/
|
||||
var destroy = function destroy() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Removing the reference to the animation so separate cleanups are skipped.
|
||||
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
/*
|
||||
======================================
|
||||
LOTTIE
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Load a new animation, and if it's the case, destroy the previous one
|
||||
* @param {Object} forcedConfigs
|
||||
*/
|
||||
var loadAnimation = function loadAnimation() {
|
||||
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var _a;
|
||||
// Return if the container ref is null
|
||||
if (!animationContainer.current) {
|
||||
return;
|
||||
}
|
||||
// Destroy any previous instance
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Build the animation configuration
|
||||
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
|
||||
container: animationContainer.current
|
||||
});
|
||||
// Save the animation instance
|
||||
animationInstanceRef.current = lottie.loadAnimation(config);
|
||||
setAnimationLoaded(!!animationInstanceRef.current);
|
||||
// Return a function that will clean up
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* (Re)Initialize when animation data changed
|
||||
*/
|
||||
useEffect(function () {
|
||||
var onUnmount = loadAnimation();
|
||||
// Clean up on unmount
|
||||
return function () {
|
||||
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [animationData, loop]);
|
||||
// Update the autoplay state
|
||||
useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
animationInstanceRef.current.autoplay = !!autoplay;
|
||||
}, [autoplay]);
|
||||
// Update the initial segment state
|
||||
useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
// When null should reset to default animation length
|
||||
if (!initialSegment) {
|
||||
animationInstanceRef.current.resetSegments(true);
|
||||
return;
|
||||
}
|
||||
// If it's not a valid segment, do nothing
|
||||
if (!Array.isArray(initialSegment) || !initialSegment.length) {
|
||||
return;
|
||||
}
|
||||
// If the current position it's not in the new segment
|
||||
// set the current position to start
|
||||
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
|
||||
animationInstanceRef.current.currentRawFrame = initialSegment[0];
|
||||
}
|
||||
// Update the segment
|
||||
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
|
||||
}, [initialSegment]);
|
||||
/*
|
||||
======================================
|
||||
EVENTS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Reinitialize listener on change
|
||||
*/
|
||||
useEffect(function () {
|
||||
var partialListeners = [{
|
||||
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 listeners = partialListeners.filter(function (listener) {
|
||||
return listener.handler != null;
|
||||
});
|
||||
if (!listeners.length) {
|
||||
return;
|
||||
}
|
||||
var deregisterList = listeners.map(
|
||||
/**
|
||||
* Handle the process of adding an event listener
|
||||
* @param {Listener} listener
|
||||
* @return {Function} Function that deregister the listener
|
||||
*/
|
||||
function (listener) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
|
||||
// Return a function to deregister this listener
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
|
||||
};
|
||||
});
|
||||
// Deregister listeners on unmount
|
||||
return function () {
|
||||
deregisterList.forEach(function (deregister) {
|
||||
return deregister();
|
||||
});
|
||||
};
|
||||
}, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
|
||||
/**
|
||||
* Build the animation view
|
||||
*/
|
||||
var View = /*#__PURE__*/React.createElement("div", _objectSpread2({
|
||||
style: style,
|
||||
ref: animationContainer
|
||||
}, rest));
|
||||
return {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainer,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationInstanceRef.current
|
||||
};
|
||||
};
|
||||
|
||||
// helpers
|
||||
function getContainerVisibility(container) {
|
||||
var _container$getBoundin = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin.top,
|
||||
height = _container$getBoundin.height;
|
||||
var current = window.innerHeight - top;
|
||||
var max = window.innerHeight + height;
|
||||
return current / max;
|
||||
}
|
||||
function getContainerCursorPosition(container, cursorX, cursorY) {
|
||||
var _container$getBoundin2 = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin2.top,
|
||||
left = _container$getBoundin2.left,
|
||||
width = _container$getBoundin2.width,
|
||||
height = _container$getBoundin2.height;
|
||||
var x = (cursorX - left) / width;
|
||||
var y = (cursorY - top) / height;
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
}
|
||||
var useInitInteractivity = function useInitInteractivity(_ref) {
|
||||
var wrapperRef = _ref.wrapperRef,
|
||||
animationItem = _ref.animationItem,
|
||||
mode = _ref.mode,
|
||||
actions = _ref.actions;
|
||||
useEffect(function () {
|
||||
var wrapper = wrapperRef.current;
|
||||
if (!wrapper || !animationItem || !actions.length) {
|
||||
return;
|
||||
}
|
||||
animationItem.stop();
|
||||
var scrollModeHandler = function scrollModeHandler() {
|
||||
var assignedSegment = null;
|
||||
var scrollHandler = function scrollHandler() {
|
||||
var currentPercent = getContainerVisibility(wrapper);
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref2) {
|
||||
var visibility = _ref2.visibility;
|
||||
return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
if (action.type === "seek" && action.visibility && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]);
|
||||
//! goToAndStop must be relative to the start of the current segment
|
||||
animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
// Loop: Loop a given frames
|
||||
if (assignedSegment === null) {
|
||||
// if not playing any segments currently. play those segments and save to state
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else {
|
||||
// if playing any segments currently.
|
||||
//check if segments in state are equal to the frames selected by action
|
||||
if (assignedSegment !== action.frames) {
|
||||
// if they are not equal. new segments are to be loaded
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else if (animationItem.isPaused) {
|
||||
// if they are equal the play method must be called only if lottie is paused
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (action.type === "play" && animationItem.isPaused) {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
animationItem.resetSegments(true);
|
||||
animationItem.play();
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
// Stop: Stop playback
|
||||
animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("scroll", scrollHandler);
|
||||
return function () {
|
||||
document.removeEventListener("scroll", scrollHandler);
|
||||
};
|
||||
};
|
||||
var cursorModeHandler = function cursorModeHandler() {
|
||||
var handleCursor = function handleCursor(_x, _y) {
|
||||
var x = _x;
|
||||
var y = _y;
|
||||
// Resolve cursor position if cursor is inside container
|
||||
if (x !== -1 && y !== -1) {
|
||||
// Get container cursor position
|
||||
var pos = getContainerCursorPosition(wrapper, x, y);
|
||||
// Use the resolved position
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref3) {
|
||||
var position = _ref3.position;
|
||||
if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
|
||||
return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
|
||||
}
|
||||
if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
|
||||
return x === position.x && y === position.y;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
// Process action types:
|
||||
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
|
||||
var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
|
||||
animationItem.playSegments(action.frames, true);
|
||||
animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
animationItem.playSegments(action.frames, true);
|
||||
}
|
||||
if (action.type === "play") {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
if (animationItem.isPaused) {
|
||||
animationItem.resetSegments(false);
|
||||
}
|
||||
animationItem.playSegments(action.frames);
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
animationItem.goToAndStop(action.frames[0], true);
|
||||
}
|
||||
};
|
||||
var mouseMoveHandler = function mouseMoveHandler(ev) {
|
||||
handleCursor(ev.clientX, ev.clientY);
|
||||
};
|
||||
var mouseOutHandler = function mouseOutHandler() {
|
||||
handleCursor(-1, -1);
|
||||
};
|
||||
wrapper.addEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.addEventListener("mouseout", mouseOutHandler);
|
||||
return function () {
|
||||
wrapper.removeEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.removeEventListener("mouseout", mouseOutHandler);
|
||||
};
|
||||
};
|
||||
switch (mode) {
|
||||
case "scroll":
|
||||
return scrollModeHandler();
|
||||
case "cursor":
|
||||
return cursorModeHandler();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode, animationItem]);
|
||||
};
|
||||
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
|
||||
var actions = _ref4.actions,
|
||||
mode = _ref4.mode,
|
||||
lottieObj = _ref4.lottieObj;
|
||||
var animationItem = lottieObj.animationItem,
|
||||
View = lottieObj.View,
|
||||
animationContainerRef = lottieObj.animationContainerRef;
|
||||
useInitInteractivity({
|
||||
actions: actions,
|
||||
animationItem: animationItem,
|
||||
mode: mode,
|
||||
wrapperRef: animationContainerRef
|
||||
});
|
||||
return View;
|
||||
};
|
||||
|
||||
var _excluded = ["style", "interactivity"];
|
||||
var Lottie = function Lottie(props) {
|
||||
var _a, _b, _c;
|
||||
var style = props.style,
|
||||
interactivity = props.interactivity,
|
||||
lottieProps = _objectWithoutProperties(props, _excluded);
|
||||
/**
|
||||
* 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,
|
||||
getDuration = _useLottie.getDuration,
|
||||
destroy = _useLottie.destroy,
|
||||
animationContainerRef = _useLottie.animationContainerRef,
|
||||
animationLoaded = _useLottie.animationLoaded,
|
||||
animationItem = _useLottie.animationItem;
|
||||
/**
|
||||
* Make the hook variables/methods available through the provided 'lottieRef'
|
||||
*/
|
||||
useEffect(function () {
|
||||
if (props.lottieRef) {
|
||||
props.lottieRef.current = {
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndPlay: goToAndPlay,
|
||||
goToAndStop: goToAndStop,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
};
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
|
||||
return useLottieInteractivity({
|
||||
lottieObj: {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
},
|
||||
actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
|
||||
mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
|
||||
});
|
||||
};
|
||||
|
||||
export { Lottie as default, useLottie, useLottieInteractivity };
|
||||
//# sourceMappingURL=index.es.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
File diff suppressed because one or more lines are too long
+667
@@ -0,0 +1,667 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var lottie = require('lottie-web');
|
||||
var React = require('react');
|
||||
|
||||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
||||
|
||||
var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
|
||||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
||||
|
||||
function _arrayLikeToArray(r, a) {
|
||||
(null == a || a > r.length) && (a = r.length);
|
||||
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
||||
return n;
|
||||
}
|
||||
function _arrayWithHoles(r) {
|
||||
if (Array.isArray(r)) return r;
|
||||
}
|
||||
function _defineProperty(e, r, t) {
|
||||
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
||||
value: t,
|
||||
enumerable: !0,
|
||||
configurable: !0,
|
||||
writable: !0
|
||||
}) : e[r] = t, e;
|
||||
}
|
||||
function _iterableToArrayLimit(r, l) {
|
||||
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
||||
if (null != t) {
|
||||
var e,
|
||||
n,
|
||||
i,
|
||||
u,
|
||||
a = [],
|
||||
f = !0,
|
||||
o = !1;
|
||||
try {
|
||||
if (i = (t = t.call(r)).next, 0 === l) {
|
||||
if (Object(t) !== t) return;
|
||||
f = !1;
|
||||
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
||||
} catch (r) {
|
||||
o = !0, n = r;
|
||||
} finally {
|
||||
try {
|
||||
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
||||
} finally {
|
||||
if (o) throw n;
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _objectWithoutProperties(e, t) {
|
||||
if (null == e) return {};
|
||||
var o,
|
||||
r,
|
||||
i = _objectWithoutPropertiesLoose(e, t);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var s = Object.getOwnPropertySymbols(e);
|
||||
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
||||
}
|
||||
return i;
|
||||
}
|
||||
function _objectWithoutPropertiesLoose(r, e) {
|
||||
if (null == r) return {};
|
||||
var t = {};
|
||||
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
||||
if (e.includes(n)) continue;
|
||||
t[n] = r[n];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _slicedToArray(r, e) {
|
||||
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _unsupportedIterableToArray(r, a) {
|
||||
if (r) {
|
||||
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
||||
var t = {}.toString.call(r).slice(8, -1);
|
||||
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
||||
}
|
||||
}
|
||||
|
||||
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
|
||||
var useLottie = function useLottie(props, style) {
|
||||
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;
|
||||
props.lottieRef;
|
||||
props.renderer;
|
||||
props.name;
|
||||
props.assetsPath;
|
||||
props.rendererSettings;
|
||||
var rest = _objectWithoutProperties(props, _excluded$1);
|
||||
var _useState = React.useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
animationLoaded = _useState2[0],
|
||||
setAnimationLoaded = _useState2[1];
|
||||
var animationInstanceRef = React.useRef();
|
||||
var animationContainer = React.useRef(null);
|
||||
/*
|
||||
======================================
|
||||
INTERACTION METHODS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Play
|
||||
*/
|
||||
var play = function play() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
||||
};
|
||||
/**
|
||||
* Stop
|
||||
*/
|
||||
var stop = function stop() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
|
||||
};
|
||||
/**
|
||||
* Pause
|
||||
*/
|
||||
var pause = function pause() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
||||
};
|
||||
/**
|
||||
* Set animation speed
|
||||
* @param speed
|
||||
*/
|
||||
var setSpeed = function setSpeed(speed) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
|
||||
};
|
||||
/**
|
||||
* Got to frame and play
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndPlay = function goToAndPlay(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Got to frame and stop
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndStop = function goToAndStop(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Set animation direction
|
||||
* @param direction
|
||||
*/
|
||||
var setDirection = function setDirection(direction) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
|
||||
};
|
||||
/**
|
||||
* Play animation segments
|
||||
* @param segments
|
||||
* @param forceFlag
|
||||
*/
|
||||
var playSegments = function playSegments(segments, forceFlag) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
|
||||
};
|
||||
/**
|
||||
* Set sub frames
|
||||
* @param useSubFrames
|
||||
*/
|
||||
var setSubframe = function setSubframe(useSubFrames) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
|
||||
};
|
||||
/**
|
||||
* Get animation duration
|
||||
* @param inFrames
|
||||
*/
|
||||
var getDuration = function getDuration(inFrames) {
|
||||
var _a;
|
||||
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
|
||||
};
|
||||
/**
|
||||
* Destroy animation
|
||||
*/
|
||||
var destroy = function destroy() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Removing the reference to the animation so separate cleanups are skipped.
|
||||
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
/*
|
||||
======================================
|
||||
LOTTIE
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Load a new animation, and if it's the case, destroy the previous one
|
||||
* @param {Object} forcedConfigs
|
||||
*/
|
||||
var loadAnimation = function loadAnimation() {
|
||||
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var _a;
|
||||
// Return if the container ref is null
|
||||
if (!animationContainer.current) {
|
||||
return;
|
||||
}
|
||||
// Destroy any previous instance
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Build the animation configuration
|
||||
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
|
||||
container: animationContainer.current
|
||||
});
|
||||
// Save the animation instance
|
||||
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
|
||||
setAnimationLoaded(!!animationInstanceRef.current);
|
||||
// Return a function that will clean up
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* (Re)Initialize when animation data changed
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
var onUnmount = loadAnimation();
|
||||
// Clean up on unmount
|
||||
return function () {
|
||||
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [animationData, loop]);
|
||||
// Update the autoplay state
|
||||
React.useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
animationInstanceRef.current.autoplay = !!autoplay;
|
||||
}, [autoplay]);
|
||||
// Update the initial segment state
|
||||
React.useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
// When null should reset to default animation length
|
||||
if (!initialSegment) {
|
||||
animationInstanceRef.current.resetSegments(true);
|
||||
return;
|
||||
}
|
||||
// If it's not a valid segment, do nothing
|
||||
if (!Array.isArray(initialSegment) || !initialSegment.length) {
|
||||
return;
|
||||
}
|
||||
// If the current position it's not in the new segment
|
||||
// set the current position to start
|
||||
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
|
||||
animationInstanceRef.current.currentRawFrame = initialSegment[0];
|
||||
}
|
||||
// Update the segment
|
||||
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
|
||||
}, [initialSegment]);
|
||||
/*
|
||||
======================================
|
||||
EVENTS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Reinitialize listener on change
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
var partialListeners = [{
|
||||
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 listeners = partialListeners.filter(function (listener) {
|
||||
return listener.handler != null;
|
||||
});
|
||||
if (!listeners.length) {
|
||||
return;
|
||||
}
|
||||
var deregisterList = listeners.map(
|
||||
/**
|
||||
* Handle the process of adding an event listener
|
||||
* @param {Listener} listener
|
||||
* @return {Function} Function that deregister the listener
|
||||
*/
|
||||
function (listener) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
|
||||
// Return a function to deregister this listener
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
|
||||
};
|
||||
});
|
||||
// Deregister listeners on unmount
|
||||
return function () {
|
||||
deregisterList.forEach(function (deregister) {
|
||||
return deregister();
|
||||
});
|
||||
};
|
||||
}, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
|
||||
/**
|
||||
* Build the animation view
|
||||
*/
|
||||
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({
|
||||
style: style,
|
||||
ref: animationContainer
|
||||
}, rest));
|
||||
return {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainer,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationInstanceRef.current
|
||||
};
|
||||
};
|
||||
|
||||
// helpers
|
||||
function getContainerVisibility(container) {
|
||||
var _container$getBoundin = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin.top,
|
||||
height = _container$getBoundin.height;
|
||||
var current = window.innerHeight - top;
|
||||
var max = window.innerHeight + height;
|
||||
return current / max;
|
||||
}
|
||||
function getContainerCursorPosition(container, cursorX, cursorY) {
|
||||
var _container$getBoundin2 = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin2.top,
|
||||
left = _container$getBoundin2.left,
|
||||
width = _container$getBoundin2.width,
|
||||
height = _container$getBoundin2.height;
|
||||
var x = (cursorX - left) / width;
|
||||
var y = (cursorY - top) / height;
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
}
|
||||
var useInitInteractivity = function useInitInteractivity(_ref) {
|
||||
var wrapperRef = _ref.wrapperRef,
|
||||
animationItem = _ref.animationItem,
|
||||
mode = _ref.mode,
|
||||
actions = _ref.actions;
|
||||
React.useEffect(function () {
|
||||
var wrapper = wrapperRef.current;
|
||||
if (!wrapper || !animationItem || !actions.length) {
|
||||
return;
|
||||
}
|
||||
animationItem.stop();
|
||||
var scrollModeHandler = function scrollModeHandler() {
|
||||
var assignedSegment = null;
|
||||
var scrollHandler = function scrollHandler() {
|
||||
var currentPercent = getContainerVisibility(wrapper);
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref2) {
|
||||
var visibility = _ref2.visibility;
|
||||
return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
if (action.type === "seek" && action.visibility && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]);
|
||||
//! goToAndStop must be relative to the start of the current segment
|
||||
animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
// Loop: Loop a given frames
|
||||
if (assignedSegment === null) {
|
||||
// if not playing any segments currently. play those segments and save to state
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else {
|
||||
// if playing any segments currently.
|
||||
//check if segments in state are equal to the frames selected by action
|
||||
if (assignedSegment !== action.frames) {
|
||||
// if they are not equal. new segments are to be loaded
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else if (animationItem.isPaused) {
|
||||
// if they are equal the play method must be called only if lottie is paused
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (action.type === "play" && animationItem.isPaused) {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
animationItem.resetSegments(true);
|
||||
animationItem.play();
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
// Stop: Stop playback
|
||||
animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("scroll", scrollHandler);
|
||||
return function () {
|
||||
document.removeEventListener("scroll", scrollHandler);
|
||||
};
|
||||
};
|
||||
var cursorModeHandler = function cursorModeHandler() {
|
||||
var handleCursor = function handleCursor(_x, _y) {
|
||||
var x = _x;
|
||||
var y = _y;
|
||||
// Resolve cursor position if cursor is inside container
|
||||
if (x !== -1 && y !== -1) {
|
||||
// Get container cursor position
|
||||
var pos = getContainerCursorPosition(wrapper, x, y);
|
||||
// Use the resolved position
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref3) {
|
||||
var position = _ref3.position;
|
||||
if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
|
||||
return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
|
||||
}
|
||||
if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
|
||||
return x === position.x && y === position.y;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
// Process action types:
|
||||
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
|
||||
var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
|
||||
animationItem.playSegments(action.frames, true);
|
||||
animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
animationItem.playSegments(action.frames, true);
|
||||
}
|
||||
if (action.type === "play") {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
if (animationItem.isPaused) {
|
||||
animationItem.resetSegments(false);
|
||||
}
|
||||
animationItem.playSegments(action.frames);
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
animationItem.goToAndStop(action.frames[0], true);
|
||||
}
|
||||
};
|
||||
var mouseMoveHandler = function mouseMoveHandler(ev) {
|
||||
handleCursor(ev.clientX, ev.clientY);
|
||||
};
|
||||
var mouseOutHandler = function mouseOutHandler() {
|
||||
handleCursor(-1, -1);
|
||||
};
|
||||
wrapper.addEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.addEventListener("mouseout", mouseOutHandler);
|
||||
return function () {
|
||||
wrapper.removeEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.removeEventListener("mouseout", mouseOutHandler);
|
||||
};
|
||||
};
|
||||
switch (mode) {
|
||||
case "scroll":
|
||||
return scrollModeHandler();
|
||||
case "cursor":
|
||||
return cursorModeHandler();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode, animationItem]);
|
||||
};
|
||||
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
|
||||
var actions = _ref4.actions,
|
||||
mode = _ref4.mode,
|
||||
lottieObj = _ref4.lottieObj;
|
||||
var animationItem = lottieObj.animationItem,
|
||||
View = lottieObj.View,
|
||||
animationContainerRef = lottieObj.animationContainerRef;
|
||||
useInitInteractivity({
|
||||
actions: actions,
|
||||
animationItem: animationItem,
|
||||
mode: mode,
|
||||
wrapperRef: animationContainerRef
|
||||
});
|
||||
return View;
|
||||
};
|
||||
|
||||
var _excluded = ["style", "interactivity"];
|
||||
var Lottie = function Lottie(props) {
|
||||
var _a, _b, _c;
|
||||
var style = props.style,
|
||||
interactivity = props.interactivity,
|
||||
lottieProps = _objectWithoutProperties(props, _excluded);
|
||||
/**
|
||||
* 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,
|
||||
getDuration = _useLottie.getDuration,
|
||||
destroy = _useLottie.destroy,
|
||||
animationContainerRef = _useLottie.animationContainerRef,
|
||||
animationLoaded = _useLottie.animationLoaded,
|
||||
animationItem = _useLottie.animationItem;
|
||||
/**
|
||||
* Make the hook variables/methods available through the provided 'lottieRef'
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
if (props.lottieRef) {
|
||||
props.lottieRef.current = {
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndPlay: goToAndPlay,
|
||||
goToAndStop: goToAndStop,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
};
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
|
||||
return useLottieInteractivity({
|
||||
lottieObj: {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
},
|
||||
actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
|
||||
mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
|
||||
});
|
||||
};
|
||||
|
||||
Object.defineProperty(exports, 'LottiePlayer', {
|
||||
enumerable: true,
|
||||
get: function () { return lottie__default["default"]; }
|
||||
});
|
||||
exports["default"] = Lottie;
|
||||
exports.useLottie = useLottie;
|
||||
exports.useLottieInteractivity = useLottieInteractivity;
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
File diff suppressed because one or more lines are too long
+670
@@ -0,0 +1,670 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web'), require('react')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'lottie-web', 'react'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["lottie-react"] = {}, global.Lottie, global.React));
|
||||
})(this, (function (exports, lottie, React) { 'use strict';
|
||||
|
||||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
||||
|
||||
var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
|
||||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
||||
|
||||
function _arrayLikeToArray(r, a) {
|
||||
(null == a || a > r.length) && (a = r.length);
|
||||
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
||||
return n;
|
||||
}
|
||||
function _arrayWithHoles(r) {
|
||||
if (Array.isArray(r)) return r;
|
||||
}
|
||||
function _defineProperty(e, r, t) {
|
||||
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
||||
value: t,
|
||||
enumerable: !0,
|
||||
configurable: !0,
|
||||
writable: !0
|
||||
}) : e[r] = t, e;
|
||||
}
|
||||
function _iterableToArrayLimit(r, l) {
|
||||
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
||||
if (null != t) {
|
||||
var e,
|
||||
n,
|
||||
i,
|
||||
u,
|
||||
a = [],
|
||||
f = !0,
|
||||
o = !1;
|
||||
try {
|
||||
if (i = (t = t.call(r)).next, 0 === l) {
|
||||
if (Object(t) !== t) return;
|
||||
f = !1;
|
||||
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
||||
} catch (r) {
|
||||
o = !0, n = r;
|
||||
} finally {
|
||||
try {
|
||||
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
||||
} finally {
|
||||
if (o) throw n;
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
}
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
||||
}
|
||||
function ownKeys(e, r) {
|
||||
var t = Object.keys(e);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var o = Object.getOwnPropertySymbols(e);
|
||||
r && (o = o.filter(function (r) {
|
||||
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
||||
})), t.push.apply(t, o);
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _objectSpread2(e) {
|
||||
for (var r = 1; r < arguments.length; r++) {
|
||||
var t = null != arguments[r] ? arguments[r] : {};
|
||||
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
||||
_defineProperty(e, r, t[r]);
|
||||
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
||||
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
||||
});
|
||||
}
|
||||
return e;
|
||||
}
|
||||
function _objectWithoutProperties(e, t) {
|
||||
if (null == e) return {};
|
||||
var o,
|
||||
r,
|
||||
i = _objectWithoutPropertiesLoose(e, t);
|
||||
if (Object.getOwnPropertySymbols) {
|
||||
var s = Object.getOwnPropertySymbols(e);
|
||||
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
||||
}
|
||||
return i;
|
||||
}
|
||||
function _objectWithoutPropertiesLoose(r, e) {
|
||||
if (null == r) return {};
|
||||
var t = {};
|
||||
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
||||
if (e.includes(n)) continue;
|
||||
t[n] = r[n];
|
||||
}
|
||||
return t;
|
||||
}
|
||||
function _slicedToArray(r, e) {
|
||||
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
||||
}
|
||||
function _toPrimitive(t, r) {
|
||||
if ("object" != typeof t || !t) return t;
|
||||
var e = t[Symbol.toPrimitive];
|
||||
if (void 0 !== e) {
|
||||
var i = e.call(t, r || "default");
|
||||
if ("object" != typeof i) return i;
|
||||
throw new TypeError("@@toPrimitive must return a primitive value.");
|
||||
}
|
||||
return ("string" === r ? String : Number)(t);
|
||||
}
|
||||
function _toPropertyKey(t) {
|
||||
var i = _toPrimitive(t, "string");
|
||||
return "symbol" == typeof i ? i : i + "";
|
||||
}
|
||||
function _unsupportedIterableToArray(r, a) {
|
||||
if (r) {
|
||||
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
||||
var t = {}.toString.call(r).slice(8, -1);
|
||||
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
||||
}
|
||||
}
|
||||
|
||||
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
|
||||
var useLottie = function useLottie(props, style) {
|
||||
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;
|
||||
props.lottieRef;
|
||||
props.renderer;
|
||||
props.name;
|
||||
props.assetsPath;
|
||||
props.rendererSettings;
|
||||
var rest = _objectWithoutProperties(props, _excluded$1);
|
||||
var _useState = React.useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
animationLoaded = _useState2[0],
|
||||
setAnimationLoaded = _useState2[1];
|
||||
var animationInstanceRef = React.useRef();
|
||||
var animationContainer = React.useRef(null);
|
||||
/*
|
||||
======================================
|
||||
INTERACTION METHODS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Play
|
||||
*/
|
||||
var play = function play() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
||||
};
|
||||
/**
|
||||
* Stop
|
||||
*/
|
||||
var stop = function stop() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
|
||||
};
|
||||
/**
|
||||
* Pause
|
||||
*/
|
||||
var pause = function pause() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
||||
};
|
||||
/**
|
||||
* Set animation speed
|
||||
* @param speed
|
||||
*/
|
||||
var setSpeed = function setSpeed(speed) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
|
||||
};
|
||||
/**
|
||||
* Got to frame and play
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndPlay = function goToAndPlay(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Got to frame and stop
|
||||
* @param value
|
||||
* @param isFrame
|
||||
*/
|
||||
var goToAndStop = function goToAndStop(value, isFrame) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
|
||||
};
|
||||
/**
|
||||
* Set animation direction
|
||||
* @param direction
|
||||
*/
|
||||
var setDirection = function setDirection(direction) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
|
||||
};
|
||||
/**
|
||||
* Play animation segments
|
||||
* @param segments
|
||||
* @param forceFlag
|
||||
*/
|
||||
var playSegments = function playSegments(segments, forceFlag) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
|
||||
};
|
||||
/**
|
||||
* Set sub frames
|
||||
* @param useSubFrames
|
||||
*/
|
||||
var setSubframe = function setSubframe(useSubFrames) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
|
||||
};
|
||||
/**
|
||||
* Get animation duration
|
||||
* @param inFrames
|
||||
*/
|
||||
var getDuration = function getDuration(inFrames) {
|
||||
var _a;
|
||||
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
|
||||
};
|
||||
/**
|
||||
* Destroy animation
|
||||
*/
|
||||
var destroy = function destroy() {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Removing the reference to the animation so separate cleanups are skipped.
|
||||
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
/*
|
||||
======================================
|
||||
LOTTIE
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Load a new animation, and if it's the case, destroy the previous one
|
||||
* @param {Object} forcedConfigs
|
||||
*/
|
||||
var loadAnimation = function loadAnimation() {
|
||||
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
var _a;
|
||||
// Return if the container ref is null
|
||||
if (!animationContainer.current) {
|
||||
return;
|
||||
}
|
||||
// Destroy any previous instance
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
// Build the animation configuration
|
||||
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
|
||||
container: animationContainer.current
|
||||
});
|
||||
// Save the animation instance
|
||||
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
|
||||
setAnimationLoaded(!!animationInstanceRef.current);
|
||||
// Return a function that will clean up
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
animationInstanceRef.current = undefined;
|
||||
};
|
||||
};
|
||||
/**
|
||||
* (Re)Initialize when animation data changed
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
var onUnmount = loadAnimation();
|
||||
// Clean up on unmount
|
||||
return function () {
|
||||
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [animationData, loop]);
|
||||
// Update the autoplay state
|
||||
React.useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
animationInstanceRef.current.autoplay = !!autoplay;
|
||||
}, [autoplay]);
|
||||
// Update the initial segment state
|
||||
React.useEffect(function () {
|
||||
if (!animationInstanceRef.current) {
|
||||
return;
|
||||
}
|
||||
// When null should reset to default animation length
|
||||
if (!initialSegment) {
|
||||
animationInstanceRef.current.resetSegments(true);
|
||||
return;
|
||||
}
|
||||
// If it's not a valid segment, do nothing
|
||||
if (!Array.isArray(initialSegment) || !initialSegment.length) {
|
||||
return;
|
||||
}
|
||||
// If the current position it's not in the new segment
|
||||
// set the current position to start
|
||||
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
|
||||
animationInstanceRef.current.currentRawFrame = initialSegment[0];
|
||||
}
|
||||
// Update the segment
|
||||
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
|
||||
}, [initialSegment]);
|
||||
/*
|
||||
======================================
|
||||
EVENTS
|
||||
======================================
|
||||
*/
|
||||
/**
|
||||
* Reinitialize listener on change
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
var partialListeners = [{
|
||||
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 listeners = partialListeners.filter(function (listener) {
|
||||
return listener.handler != null;
|
||||
});
|
||||
if (!listeners.length) {
|
||||
return;
|
||||
}
|
||||
var deregisterList = listeners.map(
|
||||
/**
|
||||
* Handle the process of adding an event listener
|
||||
* @param {Listener} listener
|
||||
* @return {Function} Function that deregister the listener
|
||||
*/
|
||||
function (listener) {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
|
||||
// Return a function to deregister this listener
|
||||
return function () {
|
||||
var _a;
|
||||
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
|
||||
};
|
||||
});
|
||||
// Deregister listeners on unmount
|
||||
return function () {
|
||||
deregisterList.forEach(function (deregister) {
|
||||
return deregister();
|
||||
});
|
||||
};
|
||||
}, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
|
||||
/**
|
||||
* Build the animation view
|
||||
*/
|
||||
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({
|
||||
style: style,
|
||||
ref: animationContainer
|
||||
}, rest));
|
||||
return {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainer,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationInstanceRef.current
|
||||
};
|
||||
};
|
||||
|
||||
// helpers
|
||||
function getContainerVisibility(container) {
|
||||
var _container$getBoundin = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin.top,
|
||||
height = _container$getBoundin.height;
|
||||
var current = window.innerHeight - top;
|
||||
var max = window.innerHeight + height;
|
||||
return current / max;
|
||||
}
|
||||
function getContainerCursorPosition(container, cursorX, cursorY) {
|
||||
var _container$getBoundin2 = container.getBoundingClientRect(),
|
||||
top = _container$getBoundin2.top,
|
||||
left = _container$getBoundin2.left,
|
||||
width = _container$getBoundin2.width,
|
||||
height = _container$getBoundin2.height;
|
||||
var x = (cursorX - left) / width;
|
||||
var y = (cursorY - top) / height;
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
}
|
||||
var useInitInteractivity = function useInitInteractivity(_ref) {
|
||||
var wrapperRef = _ref.wrapperRef,
|
||||
animationItem = _ref.animationItem,
|
||||
mode = _ref.mode,
|
||||
actions = _ref.actions;
|
||||
React.useEffect(function () {
|
||||
var wrapper = wrapperRef.current;
|
||||
if (!wrapper || !animationItem || !actions.length) {
|
||||
return;
|
||||
}
|
||||
animationItem.stop();
|
||||
var scrollModeHandler = function scrollModeHandler() {
|
||||
var assignedSegment = null;
|
||||
var scrollHandler = function scrollHandler() {
|
||||
var currentPercent = getContainerVisibility(wrapper);
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref2) {
|
||||
var visibility = _ref2.visibility;
|
||||
return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
if (action.type === "seek" && action.visibility && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]);
|
||||
//! goToAndStop must be relative to the start of the current segment
|
||||
animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
// Loop: Loop a given frames
|
||||
if (assignedSegment === null) {
|
||||
// if not playing any segments currently. play those segments and save to state
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else {
|
||||
// if playing any segments currently.
|
||||
//check if segments in state are equal to the frames selected by action
|
||||
if (assignedSegment !== action.frames) {
|
||||
// if they are not equal. new segments are to be loaded
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
} else if (animationItem.isPaused) {
|
||||
// if they are equal the play method must be called only if lottie is paused
|
||||
animationItem.playSegments(action.frames, true);
|
||||
assignedSegment = action.frames;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (action.type === "play" && animationItem.isPaused) {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
animationItem.resetSegments(true);
|
||||
animationItem.play();
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
// Stop: Stop playback
|
||||
animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("scroll", scrollHandler);
|
||||
return function () {
|
||||
document.removeEventListener("scroll", scrollHandler);
|
||||
};
|
||||
};
|
||||
var cursorModeHandler = function cursorModeHandler() {
|
||||
var handleCursor = function handleCursor(_x, _y) {
|
||||
var x = _x;
|
||||
var y = _y;
|
||||
// Resolve cursor position if cursor is inside container
|
||||
if (x !== -1 && y !== -1) {
|
||||
// Get container cursor position
|
||||
var pos = getContainerCursorPosition(wrapper, x, y);
|
||||
// Use the resolved position
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
// Find the first action that satisfies the current position conditions
|
||||
var action = actions.find(function (_ref3) {
|
||||
var position = _ref3.position;
|
||||
if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
|
||||
return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
|
||||
}
|
||||
if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
|
||||
return x === position.x && y === position.y;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
// Skip if no matching action was found!
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
// Process action types:
|
||||
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
|
||||
// Seek: Go to a frame based on player scroll position action
|
||||
var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
|
||||
var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
|
||||
animationItem.playSegments(action.frames, true);
|
||||
animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
|
||||
}
|
||||
if (action.type === "loop") {
|
||||
animationItem.playSegments(action.frames, true);
|
||||
}
|
||||
if (action.type === "play") {
|
||||
// Play: Reset segments and continue playing full animation from current position
|
||||
if (animationItem.isPaused) {
|
||||
animationItem.resetSegments(false);
|
||||
}
|
||||
animationItem.playSegments(action.frames);
|
||||
}
|
||||
if (action.type === "stop") {
|
||||
animationItem.goToAndStop(action.frames[0], true);
|
||||
}
|
||||
};
|
||||
var mouseMoveHandler = function mouseMoveHandler(ev) {
|
||||
handleCursor(ev.clientX, ev.clientY);
|
||||
};
|
||||
var mouseOutHandler = function mouseOutHandler() {
|
||||
handleCursor(-1, -1);
|
||||
};
|
||||
wrapper.addEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.addEventListener("mouseout", mouseOutHandler);
|
||||
return function () {
|
||||
wrapper.removeEventListener("mousemove", mouseMoveHandler);
|
||||
wrapper.removeEventListener("mouseout", mouseOutHandler);
|
||||
};
|
||||
};
|
||||
switch (mode) {
|
||||
case "scroll":
|
||||
return scrollModeHandler();
|
||||
case "cursor":
|
||||
return cursorModeHandler();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode, animationItem]);
|
||||
};
|
||||
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
|
||||
var actions = _ref4.actions,
|
||||
mode = _ref4.mode,
|
||||
lottieObj = _ref4.lottieObj;
|
||||
var animationItem = lottieObj.animationItem,
|
||||
View = lottieObj.View,
|
||||
animationContainerRef = lottieObj.animationContainerRef;
|
||||
useInitInteractivity({
|
||||
actions: actions,
|
||||
animationItem: animationItem,
|
||||
mode: mode,
|
||||
wrapperRef: animationContainerRef
|
||||
});
|
||||
return View;
|
||||
};
|
||||
|
||||
var _excluded = ["style", "interactivity"];
|
||||
var Lottie = function Lottie(props) {
|
||||
var _a, _b, _c;
|
||||
var style = props.style,
|
||||
interactivity = props.interactivity,
|
||||
lottieProps = _objectWithoutProperties(props, _excluded);
|
||||
/**
|
||||
* 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,
|
||||
getDuration = _useLottie.getDuration,
|
||||
destroy = _useLottie.destroy,
|
||||
animationContainerRef = _useLottie.animationContainerRef,
|
||||
animationLoaded = _useLottie.animationLoaded,
|
||||
animationItem = _useLottie.animationItem;
|
||||
/**
|
||||
* Make the hook variables/methods available through the provided 'lottieRef'
|
||||
*/
|
||||
React.useEffect(function () {
|
||||
if (props.lottieRef) {
|
||||
props.lottieRef.current = {
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndPlay: goToAndPlay,
|
||||
goToAndStop: goToAndStop,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
};
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
|
||||
return useLottieInteractivity({
|
||||
lottieObj: {
|
||||
View: View,
|
||||
play: play,
|
||||
stop: stop,
|
||||
pause: pause,
|
||||
setSpeed: setSpeed,
|
||||
goToAndStop: goToAndStop,
|
||||
goToAndPlay: goToAndPlay,
|
||||
setDirection: setDirection,
|
||||
playSegments: playSegments,
|
||||
setSubframe: setSubframe,
|
||||
getDuration: getDuration,
|
||||
destroy: destroy,
|
||||
animationContainerRef: animationContainerRef,
|
||||
animationLoaded: animationLoaded,
|
||||
animationItem: animationItem
|
||||
},
|
||||
actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
|
||||
mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
|
||||
});
|
||||
};
|
||||
|
||||
Object.defineProperty(exports, 'LottiePlayer', {
|
||||
enumerable: true,
|
||||
get: function () { return lottie__default["default"]; }
|
||||
});
|
||||
exports["default"] = Lottie;
|
||||
exports.useLottie = useLottie;
|
||||
exports.useLottieInteractivity = useLottieInteractivity;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=index.umd.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+3
File diff suppressed because one or more lines are too long
+106
@@ -0,0 +1,106 @@
|
||||
{
|
||||
"name": "lottie-react",
|
||||
"version": "2.4.1",
|
||||
"description": "Lottie for React",
|
||||
"keywords": [
|
||||
"lottie",
|
||||
"react",
|
||||
"lottie react",
|
||||
"react lottie",
|
||||
"lottie web",
|
||||
"animation",
|
||||
"component",
|
||||
"hook"
|
||||
],
|
||||
"homepage": "https://lottiereact.com",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Gamote/lottie-react/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Gamote/lottie-react.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "David Gamote",
|
||||
"main": "build/index.js",
|
||||
"module": "build/index.es.js",
|
||||
"browser": "build/index.umd.js",
|
||||
"types": "build/index.d.ts",
|
||||
"style": "build/index.css",
|
||||
"files": [
|
||||
"/build"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "run-s tsc:compile rollup:compile",
|
||||
"postbuild": "npm pack && tar -xvzf *.tgz && rm -rf package *.tgz",
|
||||
"build:watch": "run-p tsc:compile:watch rollup:compile:watch",
|
||||
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
|
||||
"docz:build": "docz build",
|
||||
"deploy:docs": "echo 'lottiereact.com' > ./docs-dist/CNAME && gh-pages -d docs-dist",
|
||||
"docz:dev": "docz dev",
|
||||
"docz:serve": "docz build && docz serve",
|
||||
"prepublishOnly": "rm -rf build && yarn build",
|
||||
"rollup:compile": "rollup -c",
|
||||
"rollup:compile:watch": "rollup -c -w",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"tsc:compile": "tsc",
|
||||
"tsc:compile:watch": "tsc --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"lottie-web": "^5.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.7",
|
||||
"@babel/preset-env": "^7.16.8",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"@jest/types": "^27.4.2",
|
||||
"@rollup/plugin-commonjs": "^21.0.1",
|
||||
"@rollup/plugin-node-resolve": "^13.1.3",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/react-hooks": "^7.0.2",
|
||||
"@types/jest": "^27.4.0",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.29.0",
|
||||
"@typescript-eslint/parser": "^5.29.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"babel-loader": "^8.2.3",
|
||||
"coveralls": "^3.1.1",
|
||||
"docz": "^2.3.1",
|
||||
"eslint": "^8.18.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-promise": "^6.0.0",
|
||||
"eslint-plugin-react": "^7.30.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"get-pkg-repo": "^5.0.0",
|
||||
"gh-pages": "^3.2.3",
|
||||
"jest": "^27.4.7",
|
||||
"jest-canvas-mock": "^2.3.1",
|
||||
"sass": "^1.83.4",
|
||||
"npm-run-all": "4.1.5",
|
||||
"prettier": "^2.8.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"rollup": "^2.64.0",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
"rollup-plugin-dts": "^4.1.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.4",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"ts-jest": "^27.1.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"tslib": "^2.5.0",
|
||||
"typescript": "^4.9.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
Reference in New Issue
Block a user