feat(transition): add runtime props validation for TransitionGroup

This commit is contained in:
Evan You 2019-11-29 16:47:41 -05:00
parent 0e3e07079a
commit 6d254da532
2 changed files with 41 additions and 23 deletions

View File

@ -37,25 +37,27 @@ export const Transition: FunctionalComponent = (
{ slots } { slots }
) => h(BaseTransition, resolveTransitionProps(props), slots) ) => h(BaseTransition, resolveTransitionProps(props), slots)
export const TransitionPropsValidators = {
...(BaseTransition as any).props,
name: String,
type: String,
// Cannot use Boolean otherwise it will be force casted to false when
// omitted
css: null,
duration: Object,
enterFromClass: String,
enterActiveClass: String,
enterToClass: String,
appearFromClass: String,
appearActiveClass: String,
appearToClass: String,
leaveFromClass: String,
leaveActiveClass: String,
leaveToClass: String
}
if (__DEV__) { if (__DEV__) {
Transition.props = { Transition.props = TransitionPropsValidators
...(BaseTransition as any).props,
name: String,
type: String,
// Cannot use Boolean otherwise it will be force casted to false when
// omitted
css: null,
duration: Object,
enterFromClass: String,
enterActiveClass: String,
enterToClass: String,
appearFromClass: String,
appearActiveClass: String,
appearToClass: String,
leaveFromClass: String,
leaveActiveClass: String,
leaveToClass: String
}
} }
export function resolveTransitionProps({ export function resolveTransitionProps({

View File

@ -4,12 +4,12 @@ import {
removeTransitionClass, removeTransitionClass,
ElementWithTransition, ElementWithTransition,
getTransitionInfo, getTransitionInfo,
resolveTransitionProps resolveTransitionProps,
TransitionPropsValidators
} from './Transition' } from './Transition'
import { import {
Fragment, Fragment,
VNode, VNode,
Slots,
warn, warn,
resolveTransitionHooks, resolveTransitionHooks,
toRaw, toRaw,
@ -17,7 +17,8 @@ import {
getCurrentInstance, getCurrentInstance,
setTransitionHooks, setTransitionHooks,
createVNode, createVNode,
onUpdated onUpdated,
SetupContext
} from '@vue/runtime-core' } from '@vue/runtime-core'
interface Position { interface Position {
@ -33,8 +34,8 @@ export type TransitionGroupProps = Omit<TransitionProps, 'mode'> & {
moveClass?: string moveClass?: string
} }
export const TransitionGroup = { const TransitionGroupImpl = {
setup(props: TransitionGroupProps, { slots }: { slots: Slots }) { setup(props: TransitionGroupProps, { slots }: SetupContext) {
const instance = getCurrentInstance()! const instance = getCurrentInstance()!
const state = useTransitionState() const state = useTransitionState()
let prevChildren: VNode[] let prevChildren: VNode[]
@ -128,6 +129,21 @@ export const TransitionGroup = {
} }
} }
export const TransitionGroup = (TransitionGroupImpl as unknown) as {
new (): {
$props: TransitionGroupProps
}
}
if (__DEV__) {
const props = ((TransitionGroup as any).props = {
...TransitionPropsValidators,
tag: String,
moveClass: String
})
delete props.mode
}
function callPendingCbs(c: VNode) { function callPendingCbs(c: VNode) {
if (c.el._moveCb) { if (c.el._moveCb) {
c.el._moveCb() c.el._moveCb()