@bounceapp/lottie
Version:
Lottie wrapper for React Native Web
107 lines (105 loc) • 3.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LottieView = void 0;
var _lottieReact = _interopRequireDefault(require("lottie-react"));
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Adapted from lottie-react-native (https://github.com/lottie-react-native/lottie-react-native),
// licensed under the Apache License, Version 2.0. See NOTICE and LICENSE-APACHE.
const parseAnimationData = source => {
if (typeof source === "object" && !("uri" in source)) {
return source;
}
return undefined;
};
const LottieView = exports.LottieView = /*#__PURE__*/(0, _react.forwardRef)(({
source,
speed,
loop,
style,
autoPlay,
hover,
direction,
progress,
onAnimationLoaded,
onAnimationFailure,
onAnimationFinish,
onAnimationLoop
}, ref) => {
const lottieRef = (0, _react.useRef)(null);
const animationData = parseAnimationData(source);
(0, _react.useEffect)(() => {
lottieRef.current?.setSpeed(speed ?? 1);
}, [speed]);
(0, _react.useEffect)(() => {
lottieRef.current?.setDirection(direction === -1 ? -1 : 1);
}, [direction]);
(0, _react.useEffect)(() => {
if (progress != null && __DEV__) {
// biome-ignore lint/suspicious/noConsole: intentional dev-only warning
console.warn("lottie-react-native: progress is not supported on web");
}
}, [progress]);
(0, _react.useImperativeHandle)(ref, () => {
return {
play: (s, e) => {
try {
const bothDefined = s !== undefined && e !== undefined;
const bothUndefined = s === undefined && e === undefined;
const bothEqual = e === s;
if (bothDefined) {
if (bothEqual) {
lottieRef.current?.goToAndPlay(e, true);
return;
}
lottieRef.current?.playSegments([s, e], true);
return;
}
if (s !== undefined && e === undefined) {
lottieRef.current?.goToAndPlay(s, true);
}
if (bothUndefined) {
lottieRef.current?.play();
}
} catch (error) {
// biome-ignore lint/suspicious/noConsole: surface playback errors during development
console.error(error);
}
},
reset: () => {
lottieRef.current?.goToAndPlay(0);
},
pause: () => {
lottieRef.current?.pause();
onAnimationFinish?.(true);
},
resume: () => {
lottieRef.current?.play();
}
};
}, [onAnimationFinish]);
if (!animationData) {
if (__DEV__) {
// biome-ignore lint/suspicious/noConsole: intentional dev-only warning
console.warn("lottie-react-native: string and remote uri sources are not supported on web, pass parsed animation JSON instead");
}
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lottieReact.default, {
lottieRef: lottieRef,
animationData: animationData,
style: style,
autoplay: autoPlay,
loop: loop,
onMouseEnter: hover ? () => lottieRef.current?.play() : undefined,
onMouseLeave: hover ? () => lottieRef.current?.stop() : undefined,
onComplete: () => onAnimationFinish?.(false),
onLoopComplete: () => onAnimationLoop?.(),
onDOMLoaded: () => onAnimationLoaded?.(),
onDataFailed: () => onAnimationFailure?.("Failed to load animation")
});
});
//# sourceMappingURL=LottieView.react.js.map