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 94 | 35x 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 } |