framer-motion/dist/es/value/use-inverted-scale.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"use-inverted-scale.mjs","sources":["../../../src/value/use-inverted-scale.ts"],"sourcesContent":["\"use client\"\n\nimport { MotionValue } from \"motion-dom\"\nimport { invariant, warning } from \"motion-utils\"\nimport { useContext } from \"react\"\nimport { MotionContext } from \"../context/MotionContext\"\nimport { useMotionValue } from \"./use-motion-value\"\nimport { useTransform } from \"./use-transform\"\n\ninterface ScaleMotionValues {\n    scaleX: MotionValue<number>\n    scaleY: MotionValue<number>\n}\n\n// Keep things reasonable and avoid scale: Infinity. In practise we might need\n// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]\n// to simply hide content at unreasonable scales.\nconst maxScale = 100000\nexport const invertScale = (scale: number) =>\n    scale > 0.001 ? 1 / scale : maxScale\n\nlet hasWarned = false\n\n/**\n * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse\n * of their respective parent scales.\n *\n * This is useful for undoing the distortion of content when scaling a parent component.\n *\n * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.\n * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output\n * of those instead.\n *\n * ```jsx\n * const MyComponent = () => {\n *   const { scaleX, scaleY } = useInvertedScale()\n *   return <motion.div style={{ scaleX, scaleY }} />\n * }\n * ```\n *\n * @deprecated\n */\nexport function useInvertedScale(\n    scale?: Partial<ScaleMotionValues>\n): ScaleMotionValues {\n    let parentScaleX = useMotionValue(1)\n    let parentScaleY = useMotionValue(1)\n    const { visualElement } = useContext(MotionContext)\n\n    invariant(\n        !!(scale || visualElement),\n        \"If no scale values are provided, useInvertedScale must be used within a child of another motion component.\"\n    )\n\n    warning(\n        hasWarned,\n        \"useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.\"\n    )\n\n    hasWarned = true\n\n    if (scale) {\n        parentScaleX = scale.scaleX || parentScaleX\n        parentScaleY = scale.scaleY || parentScaleY\n    } else if (visualElement) {\n        parentScaleX = visualElement.getValue(\"scaleX\", 1)\n        parentScaleY = visualElement.getValue(\"scaleY\", 1)\n    }\n\n    const scaleX = useTransform(parentScaleX, invertScale)\n    const scaleY = useTransform(parentScaleY, invertScale)\n\n    return { scaleX, scaleY }\n}\n"],"names":[],"mappings":";;;;;;;AAcA;AACA;AACA;AACA;;AAIA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAGF;AACA;;;AAQA;;;AAQI;AACA;;;;;;;;AASJ;AACJ;;"}