-
Notifications
You must be signed in to change notification settings - Fork 743
/
use-props.ts
93 lines (78 loc) · 2.53 KB
/
use-props.ts
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
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
}