Skip to content

Commit

Permalink
refactor(types): use template literal types insteads of any (vuejs#4166)
Browse files Browse the repository at this point in the history
  • Loading branch information
webfansplz authored and chrislone committed Feb 4, 2023
1 parent 7a23d07 commit a7a8b4c
Showing 1 changed file with 22 additions and 9 deletions.
31 changes: 22 additions & 9 deletions packages/runtime-dom/src/components/Transition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import { isObject, toNumber, extend, isArray } from '@vue/shared'
const TRANSITION = 'transition'
const ANIMATION = 'animation'

type AnimationTypes = typeof TRANSITION | typeof ANIMATION

export interface TransitionProps extends BaseTransitionProps<Element> {
name?: string
type?: typeof TRANSITION | typeof ANIMATION
type?: AnimationTypes
css?: boolean
duration?: number | { enter: number; leave: number }
// custom transition classes
Expand Down Expand Up @@ -368,24 +370,33 @@ function whenTransitionEnds(
}

interface CSSTransitionInfo {
type: typeof TRANSITION | typeof ANIMATION | null
type: AnimationTypes | null
propCount: number
timeout: number
hasTransform: boolean
}

type AnimationProperties = 'Delay' | 'Duration'
type StylePropertiesKey =
| `${AnimationTypes}${AnimationProperties}`
| `${typeof TRANSITION}Property`

export function getTransitionInfo(
el: Element,
expectedType?: TransitionProps['type']
): CSSTransitionInfo {
const styles: any = window.getComputedStyle(el)
const styles = window.getComputedStyle(el) as Pick<
CSSStyleDeclaration,
StylePropertiesKey
>
// JSDOM may return undefined for transition properties
const getStyleProperties = (key: string) => (styles[key] || '').split(', ')
const transitionDelays = getStyleProperties(TRANSITION + 'Delay')
const transitionDurations = getStyleProperties(TRANSITION + 'Duration')
const getStyleProperties = (key: StylePropertiesKey) =>
(styles[key] || '').split(', ')
const transitionDelays = getStyleProperties(`${TRANSITION}Delay`)
const transitionDurations = getStyleProperties(`${TRANSITION}Duration`)
const transitionTimeout = getTimeout(transitionDelays, transitionDurations)
const animationDelays = getStyleProperties(ANIMATION + 'Delay')
const animationDurations = getStyleProperties(ANIMATION + 'Duration')
const animationDelays = getStyleProperties(`${ANIMATION}Delay`)
const animationDurations = getStyleProperties(`${ANIMATION}Duration`)
const animationTimeout = getTimeout(animationDelays, animationDurations)

let type: CSSTransitionInfo['type'] = null
Expand Down Expand Up @@ -420,7 +431,9 @@ export function getTransitionInfo(
}
const hasTransform =
type === TRANSITION &&
/\b(transform|all)(,|$)/.test(styles[TRANSITION + 'Property'])
/\b(transform|all)(,|$)/.test(
getStyleProperties(`${TRANSITION}Property`).toString()
)
return {
type,
timeout,
Expand Down

0 comments on commit a7a8b4c

Please sign in to comment.