Skip to content

Commit

Permalink
feat(portal): support disabled prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@yyx990803
yyx990803 committed Mar 30, 2020
1 parent 039d024 commit 8ce3da0
Show file tree
Hide file tree
Showing 5 changed files with 312 additions and 94 deletions.
139 changes: 131 additions & 8 deletions packages/runtime-core/__tests__/components/Portal.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
ref,
nextTick
} from '@vue/runtime-test'
import { createVNode } from '../../src/vnode'
import { createVNode, Fragment } from '../../src/vnode'

describe('renderer: portal', () => {
test('should work', () => {
Expand All @@ -24,7 +24,7 @@ describe('renderer: portal', () => {
)

expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal--><div>root</div>"`
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
Expand All @@ -46,7 +46,7 @@ describe('renderer: portal', () => {
)

expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal--><div>root</div>"`
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(targetA)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
Expand All @@ -57,7 +57,7 @@ describe('renderer: portal', () => {
await nextTick()

expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal--><div>root</div>"`
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(targetA)).toMatchInlineSnapshot(`""`)
expect(serializeInner(targetB)).toMatchInlineSnapshot(
Expand Down Expand Up @@ -122,7 +122,7 @@ describe('renderer: portal', () => {
)

expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div><!--portal--><!--portal--></div>"`
`"<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>one</div>two"`)

Expand All @@ -141,7 +141,7 @@ describe('renderer: portal', () => {
// toggling
render(h('div', [null, h(Portal, { target }, 'three')]), root)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div><!----><!--portal--></div>"`
`"<div><!----><!--portal start--><!--portal end--></div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(`"three"`)

Expand All @@ -154,7 +154,7 @@ describe('renderer: portal', () => {
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div><!--portal--><!--portal--></div>"`
`"<div><!--portal start--><!--portal end--><!--portal start--><!--portal end--></div>"`
)
// should append
expect(serializeInner(target)).toMatchInlineSnapshot(
Expand All @@ -170,10 +170,133 @@ describe('renderer: portal', () => {
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div><!--portal--><!----></div>"`
`"<div><!--portal start--><!--portal end--><!----></div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>one</div><div>two</div>"`
)
})

test('disabled', () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')

const renderWithDisabled = (disabled: boolean) => {
return h(Fragment, [
h(Portal, { target, disabled }, h('div', 'teleported')),
h('div', 'root')
])
}

render(renderWithDisabled(false), root)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
)

render(renderWithDisabled(true), root)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toBe(``)

// toggle back
render(renderWithDisabled(false), root)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
)
})

test('moving portal while enabled', () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')

render(
h(Fragment, [
h(Portal, { target }, h('div', 'teleported')),
h('div', 'root')
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
)

render(
h(Fragment, [
h('div', 'root'),
h(Portal, { target }, h('div', 'teleported'))
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div>root</div><!--portal start--><!--portal end-->"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
)

render(
h(Fragment, [
h(Portal, { target }, h('div', 'teleported')),
h('div', 'root')
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toMatchInlineSnapshot(
`"<div>teleported</div>"`
)
})

test('moving portal while disabled', () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')

render(
h(Fragment, [
h(Portal, { target, disabled: true }, h('div', 'teleported')),
h('div', 'root')
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toBe('')

render(
h(Fragment, [
h('div', 'root'),
h(Portal, { target, disabled: true }, h('div', 'teleported'))
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<div>root</div><!--portal start--><div>teleported</div><!--portal end-->"`
)
expect(serializeInner(target)).toBe('')

render(
h(Fragment, [
h(Portal, { target, disabled: true }, h('div', 'teleported')),
h('div', 'root')
]),
root
)
expect(serializeInner(root)).toMatchInlineSnapshot(
`"<!--portal start--><div>teleported</div><!--portal end--><div>root</div>"`
)
expect(serializeInner(target)).toBe('')
})
})
1 change: 0 additions & 1 deletion packages/runtime-core/src/components/KeepAlive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,6 @@ const KeepAliveImpl = {
if (cachedVNode) {
// copy over mounted state
vnode.el = cachedVNode.el
vnode.anchor = cachedVNode.anchor
vnode.component = cachedVNode.component
if (vnode.transition) {
// recursively update transition hooks on subTree
Expand Down
Loading

0 comments on commit 8ce3da0

Please sign in to comment.