framer-motion/dist/es/value/use-motion-template.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"use-motion-template.mjs","sources":["../../../src/value/use-motion-template.ts"],"sourcesContent":["\"use client\"\n\nimport { isMotionValue, MotionValue } from \"motion-dom\"\nimport { useCombineMotionValues } from \"./use-combine-values\"\n\n/**\n * Combine multiple motion values into a new one using a string template literal.\n *\n * ```jsx\n * import {\n *   motion,\n *   useSpring,\n *   useMotionValue,\n *   useMotionTemplate\n * } from \"framer-motion\"\n *\n * function Component() {\n *   const shadowX = useSpring(0)\n *   const shadowY = useMotionValue(0)\n *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`\n *\n *   return <motion.div style={{ filter: shadow }} />\n * }\n * ```\n *\n * @public\n */\nexport function useMotionTemplate(\n    fragments: TemplateStringsArray,\n    ...values: Array<MotionValue | number | string>\n) {\n    /**\n     * Create a function that will build a string from the latest motion values.\n     */\n    const numFragments = fragments.length\n\n    function buildValue() {\n        let output = ``\n\n        for (let i = 0; i < numFragments; i++) {\n            output += fragments[i]\n            const value = values[i]\n            if (value) {\n                output += isMotionValue(value) ? value.get() : value\n            }\n        }\n\n        return output\n    }\n\n    return useCombineMotionValues(values.filter(isMotionValue), buildValue)\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AAKC;;AAEG;AACH;AAEA;;AAGI;AACI;AACA;;AAEI;;;AAIR;;;AAIR;;"}