@lottiefiles/dotlottie-solid
Version:
Solid wrapper around the dotlottie-web library
221 lines (219 loc) • 7.5 kB
JavaScript
// src/dotlottie.tsx
import { createComponent as _$createComponent2 } from "solid-js/web";
import { createEffect as createEffect2, splitProps } from "solid-js";
// src/use-dotlottie.tsx
import { template as _$template } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
import { mergeProps as _$mergeProps } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
import { className as _$className } from "solid-js/web";
import { use as _$use } from "solid-js/web";
import { spread as _$spread } from "solid-js/web";
import { DotLottie } from "@lottiefiles/dotlottie-web";
import { on, createEffect, createSignal, onCleanup } from "solid-js";
var _tmpl$ = /* @__PURE__ */ _$template(`<div><canvas>`);
function DotLottieComponent({
children,
class: className,
setCanvasRef,
setContainerRef,
style,
...rest
}) {
const containerStyle = {
width: "100%",
height: "100%",
...style
};
return (() => {
var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
var _ref$ = setContainerRef;
typeof _ref$ === "function" ? _$use(_ref$, _el$) : setContainerRef = _el$;
_$className(_el$, className);
_$spread(_el$, {
style: containerStyle
}, false, true);
var _ref$2 = setCanvasRef;
typeof _ref$2 === "function" ? _$use(_ref$2, _el$2) : setCanvasRef = _el$2;
_el$2.style.setProperty("width", "100%");
_el$2.style.setProperty("height", "100%");
_$spread(_el$2, rest, false, true);
_$insert(_el$2, children);
return _el$;
})();
}
var useDotLottie = (config) => {
const [dotLottie, setDotLottie] = createSignal(null);
let canvasRef = null;
let containerRef = null;
const hoverHandler = (event) => {
const dotLottieInstance = dotLottie();
if (!config.playOnHover || !dotLottieInstance) return;
if (event.type === "mouseenter") {
dotLottieInstance.play();
} else if (event.type === "mouseleave") {
dotLottieInstance.pause();
}
};
const setCanvasRef = (canvas) => {
if (canvas) {
const dotLottieInstance = new DotLottie({
...config,
canvas
});
setDotLottie(dotLottieInstance);
canvas.addEventListener("mouseenter", hoverHandler);
canvas.addEventListener("mouseleave", hoverHandler);
} else {
dotLottie()?.destroy();
}
canvasRef = canvas;
};
const setContainerRef = (el) => {
containerRef = el;
};
const Component = (props) => {
return _$createComponent(DotLottieComponent, _$mergeProps({
setContainerRef,
setCanvasRef
}, props));
};
onCleanup(() => {
dotLottie()?.destroy();
setDotLottie(null);
if (canvasRef) {
canvasRef.removeEventListener("mouseenter", hoverHandler);
canvasRef.removeEventListener("mouseleave", hoverHandler);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.speed === "number" && config.speed !== dotLottieInstance.speed && dotLottieInstance.isLoaded) {
dotLottieInstance.setSpeed(config.speed);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.mode === "string" && config.mode !== dotLottieInstance.mode && dotLottieInstance.isLoaded) {
dotLottieInstance.setMode(config.mode);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.loop === "boolean" && config.loop !== dotLottieInstance.loop && dotLottieInstance.isLoaded) {
dotLottieInstance.setLoop(config.loop);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.useFrameInterpolation === "boolean" && config.useFrameInterpolation !== dotLottieInstance.useFrameInterpolation && dotLottieInstance.isLoaded) {
dotLottieInstance.setUseFrameInterpolation(config.useFrameInterpolation);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.segment === "object" && Array.isArray(config.segment) && dotLottieInstance.isLoaded) {
const startFrame = config.segment[0];
const endFrame = config.segment[1];
dotLottieInstance.setSegment(startFrame, endFrame);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.backgroundColor === "string" && config.backgroundColor !== dotLottieInstance.backgroundColor && dotLottieInstance.isLoaded) {
dotLottieInstance.setBackgroundColor(config.backgroundColor);
}
});
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.renderConfig === "object") {
dotLottieInstance.setRenderConfig(config.renderConfig);
}
});
createEffect(on(() => config.data, () => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.data === "string") {
dotLottieInstance.load({
data: config.data,
...config
});
}
}));
createEffect(on(() => config.src, () => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.src === "string") {
dotLottieInstance.load({
src: config.src,
...config
});
}
}));
createEffect(() => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (typeof config.marker === "string") {
dotLottieInstance.setMarker(config.marker);
}
});
createEffect(on(() => config.animationId, () => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (dotLottieInstance.isLoaded && config.animationId && dotLottieInstance.activeAnimationId !== config.animationId) {
dotLottieInstance.loadAnimation(config.animationId);
}
}));
createEffect(on(() => config.themeId, () => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (dotLottieInstance.isLoaded && dotLottieInstance.activeThemeId !== config.themeId) {
dotLottieInstance.setTheme(config.themeId || "");
}
}));
createEffect(on(() => config.themeData, () => {
const dotLottieInstance = dotLottie();
if (!dotLottieInstance) return;
if (dotLottieInstance.isLoaded) {
dotLottieInstance.setThemeData(config.themeData || "");
}
}));
return {
dotLottie,
setCanvasRef,
setContainerRef,
canvas: canvasRef,
container: containerRef,
DotLottieComponent: Component
};
};
var setWasmUrl = (url) => {
DotLottie.setWasmUrl(url);
};
// src/dotlottie.tsx
var DotLottieSolid = (props) => {
const [dotLottieProps, restProps] = splitProps(props, ["src", "data", "mode", "loop", "speed", "marker", "segment", "themeId", "autoplay", "themeData", "playOnHover", "animationId", "renderConfig", "dotLottieRefCallback", "useFrameInterpolation"]);
const {
DotLottieComponent: DotLottieComponent2,
dotLottie
} = useDotLottie(dotLottieProps);
createEffect2(() => {
if (typeof dotLottieProps.dotLottieRefCallback === "function" && dotLottie()) {
dotLottieProps.dotLottieRefCallback(dotLottie());
}
});
return _$createComponent2(DotLottieComponent2, restProps);
};
export {
DotLottieSolid,
setWasmUrl,
useDotLottie
};
//# sourceMappingURL=index.js.map