@yamada-ui/react/dist/esm/hooks/use-animation/index.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { useSystem } from "../../core/system/system-provider.js";
import { animation } from "../../core/css/animation.js";
import { css } from "../../core/css/css.js";
import { useCallback, useRef, useState } from "react";

//#region src/hooks/use-animation/index.ts
/**
* `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.
*
* @see https://yamada-ui.com/docs/hooks/use-animation
*/
const useAnimation = (cssObj) => {
	const system = useSystem();
	if ((0, utils_exports.isArray)(cssObj)) return cssObj.map((cssObj$1) => animation(cssObj$1, {
		css,
		system
	})).join(", ");
	else return animation(cssObj, {
		css,
		system
	});
};
/**
* `useDynamicAnimation` is a custom hook used to switch animations.
*
* @see https://yamada-ui.com/docs/hooks/use-dynamic-animation
*/
const useDynamicAnimation = (arrayOrObj, init) => {
	const system = useSystem();
	const keys = useRef(!(0, utils_exports.isUndefined)(init) ? (0, utils_exports.isArray)(init) ? init.map(String) : String(init) : void 0);
	const cache = useRef(/* @__PURE__ */ new Map());
	const [animations, setAnimations] = useState(() => {
		for (const [key, styles] of Object.entries(arrayOrObj)) {
			if (cache.current.has(key)) return;
			if ((0, utils_exports.isArray)(styles)) cache.current.set(key, styles.map((style) => animation(style, {
				css,
				system
			})).join(", "));
			else cache.current.set(key, animation(styles, {
				css,
				system
			}));
		}
		if ((0, utils_exports.isArray)(keys.current)) return keys.current.map((key) => cache.current.get(key)).join(", ");
		else return cache.current.get(keys.current ?? "");
	});
	return [animations, useCallback((keysOrFunc) => {
		const keyOrArray = (0, utils_exports.runIfFn)(keysOrFunc, (() => {
			if (!(0, utils_exports.isUndefined)(keys.current) && (0, utils_exports.isArray)(arrayOrObj)) return (0, utils_exports.isArray)(keys.current) ? keys.current.map(Number) : Number(keys.current);
			else return keys.current;
		})());
		keys.current = (0, utils_exports.isArray)(keyOrArray) ? keyOrArray.map(String) : String(keyOrArray);
		if ((0, utils_exports.isArray)(keys.current)) setAnimations(keys.current.map((key) => cache.current.get(key)).join(", "));
		else setAnimations(cache.current.get(keys.current));
	}, [arrayOrObj])];
};

//#endregion
export { useAnimation, useDynamicAnimation };
//# sourceMappingURL=index.js.map