@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/_vendor/lottie-react/build/index.es.js

@@ -0,0 +1,537 @@
+import { __toESM } from "../../../_virtual/_rolldown/runtime.js";
+import { require_lottie } from "../../lottie-web/build/player/lottie.js";
+import React, { useEffect, useRef, useState } from "react";
+//#region node_modules/lottie-react/build/index.es.js
+var import_lottie = /* @__PURE__ */ __toESM(require_lottie());
+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 _useState2 = _slicedToArray(useState(false), 2), animationLoaded = _useState2[0], setAnimationLoaded = _useState2[1];
+	var animationInstanceRef = useRef();
+	var animationContainer = useRef(null);
+	/**
+	* Play
+	*/
+	var play = function play() {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === void 0 || _a.play();
+	};
+	/**
+	* Stop
+	*/
+	var stop = function stop() {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === void 0 || _a.stop();
+	};
+	/**
+	* Pause
+	*/
+	var pause = function pause() {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === void 0 || _a.pause();
+	};
+	/**
+	* Set animation speed
+	* @param speed
+	*/
+	var setSpeed = function setSpeed(speed) {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === 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 || _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 || _a.goToAndStop(value, isFrame);
+	};
+	/**
+	* Set animation direction
+	* @param direction
+	*/
+	var setDirection = function setDirection(direction) {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === 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 || _a.playSegments(segments, forceFlag);
+	};
+	/**
+	* Set sub frames
+	* @param useSubFrames
+	*/
+	var setSubframe = function setSubframe(useSubFrames) {
+		var _a;
+		(_a = animationInstanceRef.current) === null || _a === 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 || _a.destroy();
+		animationInstanceRef.current = void 0;
+	};
+	/**
+	* 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] !== void 0 ? arguments[0] : {};
+		var _a;
+		if (!animationContainer.current) return;
+		(_a = animationInstanceRef.current) === null || _a === void 0 || _a.destroy();
+		var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, { container: animationContainer.current });
+		animationInstanceRef.current = import_lottie.default.loadAnimation(config);
+		setAnimationLoaded(!!animationInstanceRef.current);
+		return function() {
+			var _a;
+			(_a = animationInstanceRef.current) === null || _a === void 0 || _a.destroy();
+			animationInstanceRef.current = void 0;
+		};
+	};
+	/**
+	* (Re)Initialize when animation data changed
+	*/
+	useEffect(function() {
+		var onUnmount = loadAnimation();
+		return function() {
+			return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+		};
+	}, [animationData, loop]);
+	useEffect(function() {
+		if (!animationInstanceRef.current) return;
+		animationInstanceRef.current.autoplay = !!autoplay;
+	}, [autoplay]);
+	useEffect(function() {
+		if (!animationInstanceRef.current) return;
+		if (!initialSegment) {
+			animationInstanceRef.current.resetSegments(true);
+			return;
+		}
+		if (!Array.isArray(initialSegment) || !initialSegment.length) return;
+		if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) animationInstanceRef.current.currentRawFrame = initialSegment[0];
+		animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
+	}, [initialSegment]);
+	/**
+	* Reinitialize listener on change
+	*/
+	useEffect(function() {
+		var listeners = [
+			{
+				name: "complete",
+				handler: onComplete
+			},
+			{
+				name: "loopComplete",
+				handler: onLoopComplete
+			},
+			{
+				name: "enterFrame",
+				handler: onEnterFrame
+			},
+			{
+				name: "segmentStart",
+				handler: onSegmentStart
+			},
+			{
+				name: "config_ready",
+				handler: onConfigReady
+			},
+			{
+				name: "data_ready",
+				handler: onDataReady
+			},
+			{
+				name: "data_failed",
+				handler: onDataFailed
+			},
+			{
+				name: "loaded_images",
+				handler: onLoadedImages
+			},
+			{
+				name: "DOMLoaded",
+				handler: onDOMLoaded
+			},
+			{
+				name: "destroy",
+				handler: onDestroy
+			}
+		].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 || _a.addEventListener(listener.name, listener.handler);
+				return function() {
+					var _a;
+					(_a = animationInstanceRef.current) === null || _a === void 0 || _a.removeEventListener(listener.name, listener.handler);
+				};
+			}
+		);
+		return function() {
+			deregisterList.forEach(function(deregister) {
+				return deregister();
+			});
+		};
+	}, [
+		onComplete,
+		onLoopComplete,
+		onEnterFrame,
+		onSegmentStart,
+		onConfigReady,
+		onDataReady,
+		onDataFailed,
+		onLoadedImages,
+		onDOMLoaded,
+		onDestroy
+	]);
+	return {
+		View: /* @__PURE__ */ React.createElement("div", _objectSpread2({
+			style,
+			ref: animationContainer
+		}, rest)),
+		play,
+		stop,
+		pause,
+		setSpeed,
+		goToAndStop,
+		goToAndPlay,
+		setDirection,
+		playSegments,
+		setSubframe,
+		getDuration,
+		destroy,
+		animationContainerRef: animationContainer,
+		animationLoaded,
+		animationItem: animationInstanceRef.current
+	};
+};
+function getContainerVisibility(container) {
+	var _container$getBoundin = container.getBoundingClientRect(), top = _container$getBoundin.top, height = _container$getBoundin.height;
+	return (window.innerHeight - top) / (window.innerHeight + height);
+}
+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;
+	return {
+		x: (cursorX - left) / width,
+		y: (cursorY - top) / height
+	};
+}
+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);
+				var action = actions.find(function(_ref2) {
+					var visibility = _ref2.visibility;
+					return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
+				});
+				if (!action) return;
+				if (action.type === "seek" && action.visibility && action.frames.length === 2) {
+					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") {
+					if (assignedSegment === null) {
+						animationItem.playSegments(action.frames, true);
+						assignedSegment = action.frames;
+					} else if (assignedSegment !== action.frames) {
+						animationItem.playSegments(action.frames, true);
+						assignedSegment = action.frames;
+					} else if (animationItem.isPaused) {
+						animationItem.playSegments(action.frames, true);
+						assignedSegment = action.frames;
+					}
+				}
+				if (action.type === "play" && animationItem.isPaused) {
+					animationItem.resetSegments(true);
+					animationItem.play();
+				}
+				if (action.type === "stop") 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;
+				if (x !== -1 && y !== -1) {
+					var pos = getContainerCursorPosition(wrapper, x, y);
+					x = pos.x;
+					y = pos.y;
+				}
+				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;
+				});
+				if (!action) return;
+				if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
+					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") {
+					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();
+		}
+	}, [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,
+		animationItem,
+		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;
+	/**
+	* Initialize the 'useLottie' hook
+	*/
+	var _useLottie = useLottie(_objectWithoutProperties(props, _excluded), 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,
+			stop,
+			pause,
+			setSpeed,
+			goToAndPlay,
+			goToAndStop,
+			setDirection,
+			playSegments,
+			setSubframe,
+			getDuration,
+			destroy,
+			animationContainerRef,
+			animationLoaded,
+			animationItem
+		};
+	}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
+	return useLottieInteractivity({
+		lottieObj: {
+			View,
+			play,
+			stop,
+			pause,
+			setSpeed,
+			goToAndStop,
+			goToAndPlay,
+			setDirection,
+			playSegments,
+			setSubframe,
+			getDuration,
+			destroy,
+			animationContainerRef,
+			animationLoaded,
+			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"
+	});
+};
+//#endregion
+export { Lottie as default, useLottie, useLottieInteractivity };