UNPKG

@yamada-ui/react

Version:

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

1 lines 4.64 kB
{"version":3,"file":"index.cjs","names":["useSystem","animation","cssObj"],"sources":["../../../../src/hooks/use-animation/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { CSSAnimationObject, Token } from \"../../core\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { animation, css, useSystem } from \"../../core\"\nimport { isArray, isUndefined, runIfFn } from \"../../utils\"\n\ntype CSSObject =\n | Token<CSSAnimationObject, \"animations\">\n | Token<CSSAnimationObject, \"animations\">[]\n\n/**\n * `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.\n *\n * @see https://yamada-ui.com/docs/hooks/use-animation\n */\nexport const useAnimation = (cssObj: CSSObject): string => {\n const system = useSystem()\n\n if (isArray(cssObj)) {\n return cssObj.map((cssObj) => animation(cssObj, { css, system })).join(\", \")\n } else {\n return animation(cssObj, { css, system })\n }\n}\n\n/**\n * `useDynamicAnimation` is a custom hook used to switch animations.\n *\n * @see https://yamada-ui.com/docs/hooks/use-dynamic-animation\n */\nexport const useDynamicAnimation = <\n Y extends\n | Token<CSSAnimationObject, \"animations\">[]\n | { [key: string]: CSSObject },\n>(\n arrayOrObj: Y,\n init?: (keyof Y)[] | keyof Y,\n): [\n string | undefined,\n (\n key:\n | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n | (keyof Y)[]\n | keyof Y,\n ) => void,\n] => {\n const system = useSystem()\n\n const keys = useRef<string | string[] | undefined>(\n !isUndefined(init)\n ? isArray(init)\n ? init.map(String)\n : String(init)\n : undefined,\n )\n const cache = useRef<Map<string, string>>(new Map<string, string>())\n\n const [animations, setAnimations] = useState<string | undefined>(() => {\n for (const [key, styles] of Object.entries(arrayOrObj)) {\n if (cache.current.has(key)) return\n\n if (isArray(styles)) {\n cache.current.set(\n key,\n styles.map((style) => animation(style, { css, system })).join(\", \"),\n )\n } else {\n cache.current.set(key, animation(styles, { css, system }))\n }\n }\n\n if (isArray(keys.current)) {\n return keys.current.map((key) => cache.current.get(key)).join(\", \")\n } else {\n return cache.current.get(keys.current ?? \"\")\n }\n })\n\n const setAnimation = useCallback(\n (\n keysOrFunc:\n | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n | (keyof Y)[]\n | keyof Y,\n ) => {\n const args = (() => {\n if (!isUndefined(keys.current) && isArray(arrayOrObj)) {\n return isArray(keys.current)\n ? keys.current.map(Number)\n : Number(keys.current)\n } else {\n return keys.current\n }\n })() as (keyof Y)[] | keyof Y | undefined\n\n const keyOrArray = runIfFn(keysOrFunc, args)\n\n keys.current = isArray(keyOrArray)\n ? keyOrArray.map(String)\n : String(keyOrArray)\n\n if (isArray(keys.current)) {\n setAnimations(\n keys.current.map((key) => cache.current.get(key)).join(\", \"),\n )\n } else {\n setAnimations(cache.current.get(keys.current))\n }\n },\n [arrayOrObj],\n )\n\n return [animations, setAnimation]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,WAA8B;CACzD,MAAM,SAASA,mCAAW;AAE1B,oDAAY,OAAO,CACjB,QAAO,OAAO,KAAK,aAAWC,4BAAUC,UAAQ;EAAE;EAAK;EAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;KAE5E,QAAOD,4BAAU,QAAQ;EAAE;EAAK;EAAQ,CAAC;;;;;;;AAS7C,MAAa,uBAKX,YACA,SASG;CACH,MAAM,SAASD,mCAAW;CAE1B,MAAM,yBACJ,oDAAa,KAAK,kDACN,KAAK,GACX,KAAK,IAAI,OAAO,GAChB,OAAO,KAAK,GACd,OACL;CACD,MAAM,0CAAoC,IAAI,KAAqB,CAAC;CAEpE,MAAM,CAAC,YAAY,2CAAoD;AACrE,OAAK,MAAM,CAAC,KAAK,WAAW,OAAO,QAAQ,WAAW,EAAE;AACtD,OAAI,MAAM,QAAQ,IAAI,IAAI,CAAE;AAE5B,sDAAY,OAAO,CACjB,OAAM,QAAQ,IACZ,KACA,OAAO,KAAK,UAAUC,4BAAU,OAAO;IAAE;IAAK;IAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,CACpE;OAED,OAAM,QAAQ,IAAI,KAAKA,4BAAU,QAAQ;IAAE;IAAK;IAAQ,CAAC,CAAC;;AAI9D,qDAAY,KAAK,QAAQ,CACvB,QAAO,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK;MAEnE,QAAO,MAAM,QAAQ,IAAI,KAAK,WAAW,GAAG;GAE9C;AAoCF,QAAO,CAAC,oCAhCJ,eAIG;EAWH,MAAM,4DAAqB,mBAVP;AAClB,OAAI,oDAAa,KAAK,QAAQ,mDAAY,WAAW,CACnD,uDAAe,KAAK,QAAQ,GACxB,KAAK,QAAQ,IAAI,OAAO,GACxB,OAAO,KAAK,QAAQ;OAExB,QAAO,KAAK;MAEZ,CAEwC;AAE5C,OAAK,yDAAkB,WAAW,GAC9B,WAAW,IAAI,OAAO,GACtB,OAAO,WAAW;AAEtB,qDAAY,KAAK,QAAQ,CACvB,eACE,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,CAC7D;MAED,eAAc,MAAM,QAAQ,IAAI,KAAK,QAAQ,CAAC;IAGlD,CAAC,WAAW,CACb,CAEgC"}