InsanusMokrassar
/
kjsuikit
mirror of https://github.com/InsanusMokrassar/JSUIKitKBindings.git
1
0
Fork 0
Code Packages Releases Activity

potential fix of modals composition cancelling

This commit is contained in:
InsanusMokrassar 2023-01-13 13:21:45 +06:00
parent 7c5a9ecc3d
commit c483bb67d8
1 changed files with 72 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/jsMain/kotlin/dev/inmo/jsuikit/elements/Dialog.kt
View File

@ -8,8 +8,6 @@ import dev.inmo.jsuikit.modifiers.*
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposableInBody import org.jetbrains.compose.web.renderComposableInBody
import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLDivElement
import org.w3c.dom.MutationObserver
import org.w3c.dom.MutationObserverInit
import kotlin.random.Random import kotlin.random.Random
import kotlin.random.nextUInt import kotlin.random.nextUInt
@ -31,83 +29,86 @@ fun Dialog(
removeOnHide: Boolean = true, removeOnHide: Boolean = true,
bodyBuilder: ContentBuilder<HTMLDivElement> = {} bodyBuilder: ContentBuilder<HTMLDivElement> = {}
) { ) {
val drawDiv = remember { mutableStateOf(true) } val draw = remember { mutableStateOf(true) }
val composition = remember {
remember {
renderComposableInBody { renderComposableInBody {
Div( if (draw.value) {
{
if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
include(UIKitModal)
}
id("dialog${Random.nextUInt()}")
include(*modifiers)
attributesCustomizer()
}
) {
DisposableEffect(true) {
val htmlElement = scopeElement
if (autoShow) {
UIKit.modal(htmlElement).show()
}
if (onHidden != null || removeOnHide) {
htmlElement.addEventListener("hidden", {
onHidden ?.invoke(htmlElement)
if (removeOnHide) {
htmlElement.remove()
}
})
}
onShown ?.let {
htmlElement.addEventListener("shown", {
onShown(htmlElement)
})
}
onDispose {
drawDiv.value = false
}
}
Div( Div(
{ {
include(UIKitModal.Dialog) if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical) include(UIKitModal)
}
id("dialog${Random.nextUInt()}")
include(*modifiers)
attributesCustomizer()
} }
) { ) {
headerBuilder ?.let { DisposableEffect(true) {
Div( val htmlElement = scopeElement
{
include(UIKitModal.Header) if (autoShow) {
headerAttrsBuilder ?.let { it() } UIKit.modal(htmlElement).show()
} }
) {
it() if (onHidden != null || removeOnHide) {
htmlElement.addEventListener("hidden", {
onHidden ?.invoke(htmlElement)
if (removeOnHide) {
htmlElement.remove()
}
})
}
onShown ?.let {
htmlElement.addEventListener("shown", {
onShown(htmlElement)
})
}
onDispose {
draw.value = false
} }
} }
afterHeaderBuilder ?.let { it() }
Div( Div(
{ {
include(UIKitModal.Body) include(UIKitModal.Dialog)
bodyAttrsBuilder ?.let { it() } dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
} }
) { ) {
bodyBuilder() headerBuilder ?.let {
} Div(
beforeFooterBuilder ?.let { it() } {
footerBuilder ?.let { include(UIKitModal.Header)
headerAttrsBuilder ?.let { it() }
}
) {
it()
}
}
afterHeaderBuilder ?.let { it() }
Div( Div(
{ {
include(UIKitModal.Footer) include(UIKitModal.Body)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right) bodyAttrsBuilder ?.let { it() }
} }
) { ) {
it() bodyBuilder()
}
beforeFooterBuilder ?.let { it() }
footerBuilder ?.let {
Div(
{
include(UIKitModal.Footer)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
}
) {
it()
}
} }
} }
} }
@ -115,18 +116,14 @@ fun Dialog(
} }
} }
if (drawDiv.value) { Div({
Div({ hidden()
hidden() ref {
ref { onDispose {
onDispose { draw.value = false
composition.dispose()
}
} }
}) }
} else { })
runCatching { composition.dispose() }
}
} }
@Composable @Composable