Skip to content

Commit

Permalink
use even more subtypes / helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
@kurtextrem
kurtextrem committed Jan 14, 2025
1 parent f67f1ef commit aeaef15
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 55 deletions.
81 changes: 44 additions & 37 deletions packages/framer-motion/src/motion/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,31 @@ import { ViewportProps } from "./features/viewport/types"
*/
export type VariantLabels = string | string[]

type stringOrNumber = string | number

export interface TransformProperties {
x?: string | number
y?: string | number
z?: string | number
translateX?: string | number
translateY?: string | number
translateZ?: string | number
rotate?: string | number
rotateX?: string | number
rotateY?: string | number
rotateZ?: string | number
scale?: string | number
scaleX?: string | number
scaleY?: string | number
scaleZ?: string | number
skew?: string | number
skewX?: string | number
skewY?: string | number
originX?: string | number
originY?: string | number
originZ?: string | number
perspective?: string | number
transformPerspective?: string | number
x?: stringOrNumber
y?: stringOrNumber
z?: stringOrNumber
translateX?: stringOrNumber
translateY?: stringOrNumber
translateZ?: stringOrNumber
rotate?: stringOrNumber
rotateX?: stringOrNumber
rotateY?: stringOrNumber
rotateZ?: stringOrNumber
scale?: stringOrNumber
scaleX?: stringOrNumber
scaleY?: stringOrNumber
scaleZ?: stringOrNumber
skew?: stringOrNumber
skewX?: stringOrNumber
skewY?: stringOrNumber
originX?: stringOrNumber
originY?: stringOrNumber
originZ?: stringOrNumber
perspective?: stringOrNumber
transformPerspective?: stringOrNumber
}

/**
Expand All @@ -65,22 +67,24 @@ export interface CustomStyles {
* Framer Library custom prop types. These are not actually supported in Motion - preferably
* we'd have a way of external consumers injecting supported styles into this library.
*/
size?: string | number
radius?: string | number
size?: stringOrNumber
radius?: stringOrNumber
shadow?: string
image?: string
}

type MotionValueString = MotionValue<string>
type MotionValueNumber = MotionValue<number>
// type MotionValueAny = MotionValue<any>
// type AMotionValue = MotionValueNumber | MotionValueString | MotionValueAny // any creates a permissive type for Custom value types
type MotionValueAny = MotionValue<any>
type AMotionValue = MotionValueNumber | MotionValueString | MotionValueAny // any creates a permissive type for Custom value types

type MotionValueHelper<T> = T | AMotionValue
type MakeMotionHelper<T> = {
[K in keyof T]: T[K] | MotionValue<T[K]>
[K in keyof T]: MotionValueHelper<T[K]>
}

export type MakeMotion<T> = MakeCustomValueType<MakeMotionHelper<T>>
type MakeCustomValueTypeHelper<T> = MakeMotionHelper<T>
export type MakeMotion<T> = MakeCustomValueTypeHelper<T>

export type MotionCSS = MakeMotion<
Omit<CSSProperties, "rotate" | "scale" | "perspective">
Expand All @@ -91,26 +95,27 @@ export type MotionCSS = MakeMotion<
*/
export type MotionTransform = MakeMotion<TransformProperties>

type MotionCSSVariablesHelper = MotionValueNumber | MotionValueString | stringOrNumber

/**
* TODO: Currently unused, would like to reimplement with the ability
* to still accept React.CSSProperties.
*/
export interface MotionCSSVariables {
[key: `--${string}`]:
| MotionValueNumber
| MotionValueString
| string
| number
[key: `--${string}`]: MotionCSSVariablesHelper
}

type CustomStylesValueType = MakeCustomValueType<CustomStyles>
type MotionSVGProps = MakeMotion<SVGPathProperties>

/**
* @public
*/
export interface MotionStyle
extends MotionCSS,
MotionTransform,
MakeMotion<SVGPathProperties>,
MakeCustomValueType<CustomStyles> {}
MotionSVGProps,
CustomStylesValueType {}

export type OnUpdate = (v: Target) => void

Expand Down Expand Up @@ -265,8 +270,10 @@ export interface MotionAdvancedProps {
ignoreStrict?: boolean
}

type MotionStringOrNumber = MotionValueNumber | MotionValueString

interface ExternalMotionValues {
[key: string]: MotionValueNumber | MotionValueString
[key: string]: MotionStringOrNumber
}

/**
Expand Down Expand Up @@ -329,7 +336,7 @@ export interface MotionProps
generatedTransform: string
): string

children?: React.ReactNode | MotionValue<number> | MotionValue<string>
children?: React.ReactNode | MotionStringOrNumber

"data-framer-appear-id"?: string
}
Expand Down
48 changes: 30 additions & 18 deletions packages/framer-motion/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,30 @@ import { VariableKeyframesDefinition } from "./animation/types"

export type GenericKeyframesTarget<V> = V[] | Array<null | V>

type stringOrNumber = string | number
type GenericKeyframesTargetNumber = GenericKeyframesTarget<number>
type GenericKeyframesTargetString = GenericKeyframesTarget<string>

/**
* @public
*/
export type ResolvedKeyframesTarget =
| GenericKeyframesTarget<number>
| GenericKeyframesTarget<string>
| GenericKeyframesTargetNumber
| GenericKeyframesTargetString

type KeyframesTargetCustomValueType = GenericKeyframesTarget<CustomValueType>

/**
* @public
*/
export type KeyframesTarget =
| ResolvedKeyframesTarget
| GenericKeyframesTarget<CustomValueType>
| KeyframesTargetCustomValueType

/**
* @public
*/
export type ResolvedSingleTarget = string | number
export type ResolvedSingleTarget = stringOrNumber
/**
* @public
*/
Expand Down Expand Up @@ -396,12 +402,12 @@ export interface Tween extends Repeat {
*
* @public
*/
from?: number | string
from?: stringOrNumber

/**
* @internal
*/
to?: number | string | ValueTarget
to?: stringOrNumber | ValueTarget

/**
* @internal
Expand Down Expand Up @@ -583,12 +589,12 @@ export interface Spring extends Repeat {
*
* @public
*/
from?: number | string
from?: stringOrNumber

/**
* @internal
*/
to?: number | string | ValueTarget
to?: stringOrNumber | ValueTarget

/**
* The initial velocity of the spring. By default this is the current velocity of the component.
Expand Down Expand Up @@ -785,7 +791,7 @@ export interface Inertia {
*
* @public
*/
from?: number | string
from?: stringOrNumber

/**
* The initial velocity of the animation.
Expand Down Expand Up @@ -899,12 +905,12 @@ export interface Keyframes {
/**
* @internal
*/
from?: number | string
from?: stringOrNumber

/**
* @internal
*/
to?: number | string | ValueTarget
to?: stringOrNumber | ValueTarget

/**
* @internal
Expand All @@ -931,7 +937,7 @@ export interface None {
/**
* @internal
*/
from?: number | string
from?: stringOrNumber

/**
* @internal
Expand Down Expand Up @@ -995,31 +1001,37 @@ interface SVGTransformAttributes {
attrScale?: number
}

type SVGElementAttributes = SVGAttributes<SVGElement>

type TargetProperties = CSSPropertiesWithoutTransitionOrSingleTransforms &
SVGAttributes<SVGElement> &
SVGElementAttributes &
SVGTransformAttributes &
TransformProperties &
CustomStyles &
SVGPathProperties &
VariableKeyframesDefinition

type MakeCustomValueTypeHelper<T> = T | CustomValueType

/**
* @public
*/
export type MakeCustomValueType<T> = {
[K in keyof T]: T[K] | CustomValueType
[K in keyof T]: MakeCustomValueTypeHelper<T[K]>
}

/**
* @public
*/
export type Target = MakeCustomValueType<TargetProperties>

type MakeKeyframesHelper<T> = T | T[] | [null, ...T[]]

/**
* @public
*/
export type MakeKeyframes<T> = {
[K in keyof T]: T[K] | T[K][] | [null, ...T[K][]]
[K in keyof T]: MakeKeyframesHelper<T[K]>
}

/**
Expand Down Expand Up @@ -1047,7 +1059,7 @@ export type TargetWithKeyframes = MakeKeyframes<Target>
*
* @public
*/
export type TargetAndTransition = TargetWithKeyframes & {
export interface TargetAndTransition extends TargetWithKeyframes {
transition?: Transition
transitionEnd?: Target
}
Expand All @@ -1074,6 +1086,6 @@ export interface Variants {
* @public
*/
export interface CustomValueType {
mix: (from: any, to: any) => (p: number) => number | string
toValue: () => number | string
mix: (from: any, to: any) => (p: number) => stringOrNumber
toValue: () => stringOrNumber
}

0 comments on commit aeaef15

Please sign in to comment.