UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

1 lines 4 kB
{"version":3,"file":"filter-props.mjs","sources":["../../../../../src/render/dom/utils/filter-props.ts"],"sourcesContent":["import type { MotionProps } from \"../../../motion/types\"\nimport { isValidMotionProp } from \"../../../motion/utils/valid-prop\"\n\nlet shouldForward = (key: string) => !isValidMotionProp(key)\n\nexport type IsValidProp = (key: string) => boolean\n\nexport function loadExternalIsValidProp(isValidProp?: IsValidProp) {\n if (typeof isValidProp !== \"function\") return\n\n // Explicitly filter our events\n shouldForward = (key: string) =>\n key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key)\n}\n\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default)\n} catch {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\n\nexport function filterProps(\n props: MotionProps,\n isDom: boolean,\n forwardMotionProps: boolean\n) {\n const filteredProps: MotionProps = {}\n\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\") continue\n\n if (\n shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\" as keyof MotionProps] &&\n key.startsWith(\"onDrag\"))\n ) {\n filteredProps[key as keyof MotionProps] =\n props[key as keyof MotionProps]\n }\n }\n\n return filteredProps\n}\n"],"names":[],"mappings":";;AAGA,IAAI,aAAa,GAAG,CAAC,GAAW,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAA;AAItD,SAAU,uBAAuB,CAAC,WAAyB,EAAA;IAC7D,IAAI,OAAO,WAAW,KAAK,UAAU;QAAE,OAAM;;IAG7C,aAAa,GAAG,CAAC,GAAW,KACxB,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;AACzE,CAAC;AAED;;;;;;;;;;;;AAYG;AACH,IAAI;AACA;;;;AAIG;IACH,uBAAuB,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,CAAA;AACtE,CAAC;AAAC,MAAM;;AAER,CAAC;SAEe,WAAW,CACvB,KAAkB,EAClB,KAAc,EACd,kBAA2B,EAAA;IAE3B,MAAM,aAAa,GAAgB,EAAE,CAAA;AAErC,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACrB;;;;;;AAMG;QACH,IAAI,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;YAAE,SAAQ;QAElE,IACI,aAAa,CAAC,GAAG,CAAC;aACjB,kBAAkB,KAAK,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC;aACtD,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;;aAElC,KAAK,CAAC,WAAgC,CAAC;AACpC,gBAAA,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAC/B;YACE,aAAa,CAAC,GAAwB,CAAC;gBACnC,KAAK,CAAC,GAAwB,CAAC,CAAA;SACtC;KACJ;AAED,IAAA,OAAO,aAAa,CAAA;AACxB;;;;"}