All files / src/render/html use-props.ts

100% Statements 32/32
100% Branches 16/16
100% Functions 5/5
100% Lines 32/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 9435x   35x   35x   35x 35x   35x         1404x 886x 82x           1400x       1400x 719x   719x             1438x 719x       35x         1400x 1400x         1400x   1400x   1400x 36x     1400x     35x           1400x 1400x   1400x   147x     147x           147x           1400x   1400x    
import { useMemo } from "react"
import { MotionProps } from "../../motion/types"
import { isForcedMotionValue } from "../../motion/utils/is-forced-motion-value"
import { MotionValue } from "../../value"
import { isMotionValue } from "../../value/utils/is-motion-value"
import { ResolvedValues } from "../types"
import { buildHTMLStyles } from "./utils/build-styles"
import { createHtmlRenderState } from "./utils/create-render-state"
 
export function copyRawValuesOnly(
    target: ResolvedValues,
    source: { [key: string]: string | number | MotionValue },
    props: MotionProps
) {
    for (const key in source) {
        if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
            target[key] = source[key] as string | number
        }
    }
}
 
function useInitialMotionValues(
    { transformTemplate }: MotionProps,
    visualState: ResolvedValues,
    isStatic: boolean
) {
    return useMemo(() => {
        const state = createHtmlRenderState()
 
        buildHTMLStyles(
            state,
            visualState,
            { enableHardwareAcceleration: !isStatic },
            transformTemplate
        )
 
        const { vars, style } = state
        return { ...vars, ...style }
    }, [visualState])
}
 
export function useStyle(
    props: MotionProps,
    visualState: ResolvedValues,
    isStatic: boolean
): ResolvedValues {
    const styleProp = props.style || {}
    let style = {}
 
    /**
     * Copy non-Motion Values straight into style
     */
    copyRawValuesOnly(style, styleProp as any, props)
 
    Object.assign(style, useInitialMotionValues(props, visualState, isStatic))
 
    if (props.transformValues) {
        style = props.transformValues(style)
    }
 
    return style
}
 
export function useHTMLProps(
    props: MotionProps,
    visualState: ResolvedValues,
    isStatic: boolean
) {
    // The `any` isn't ideal but it is the type of createElement props argument
    const htmlProps: any = {}
    const style = useStyle(props, visualState, isStatic)
 
    if (Boolean(props.drag) && props.dragListener !== false) {
        // Disable the ghost element when a user drags
        htmlProps.draggable = false
 
        // Disable text selection
        style.userSelect =
            style.WebkitUserSelect =
            style.WebkitTouchCallout =
                "none"
 
        // Disable scrolling on the draggable direction
        style.touchAction =
            props.drag === true
                ? "none"
                : `pan-${props.drag === "x" ? "y" : "x"}`
    }
 
    htmlProps.style = style
 
    return htmlProps
}