Browse Source

chore(gui-v2): cleanup watcher on dispose in `useDialog`

pull/3211/head
braks 2 years ago
parent
commit
9bd3ee86eb
  1. 23
      packages/nc-gui-v2/composables/useDialog/index.ts
  2. 1
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

23
packages/nc-gui-v2/composables/useDialog/index.ts

@ -20,19 +20,13 @@ export function useDialog(
const vNodeRef = ref<VNode>()
mountTarget = mountTarget ? ('$el' in mountTarget ? (mountTarget.$el as HTMLElement) : mountTarget) : document.body
/** if specified, append vnode to mount target instead of document.body */
if (mountTarget) {
if ('$el' in mountTarget) {
mountTarget.$el.appendChild(domNode)
} else {
mountTarget.appendChild(domNode)
}
} else {
document.body.appendChild(domNode)
}
/** When props change, we want to re-render the element with the new prop values */
watch(
const stop = watch(
toReactive(props),
(reactiveProps) => {
const vNode = h(component, reactiveProps)
@ -45,19 +39,24 @@ export function useDialog(
if (!isMounted) mountedHook.trigger()
},
{ deep: true, immediate: true },
{ deep: true, immediate: true, flush: 'post' },
)
/** When calling scope is disposed, destroy component */
tryOnScopeDispose(close)
tryOnScopeDispose(() => {
close()
stop()
})
/** destroy component, can be debounced */
function close(debounce = 0) {
setTimeout(() => {
stop()
render(null, domNode)
setTimeout(() => {
document.body.removeChild(domNode)
;(mountTarget as HTMLElement)!.removeChild(domNode)
}, 100)
closeHook.trigger()

1
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

@ -76,7 +76,6 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
function closeDialog() {
isOpen.value = false
close(1000)
}
}

Loading…
Cancel
Save