This commit is contained in:
InsanusMokrassar 2023-01-12 14:31:38 +06:00
parent 0b8017a164
commit 71ccc74c94
5 changed files with 94 additions and 73 deletions

View File

@ -1,6 +1,7 @@
package dev.inmo.jsuikit.elements package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import dev.inmo.jsuikit.modifiers.* import dev.inmo.jsuikit.modifiers.*
@ -31,7 +32,8 @@ fun Dialog(
bodyBuilder: ContentBuilder<HTMLDivElement> = {} bodyBuilder: ContentBuilder<HTMLDivElement> = {}
) { ) {
val drawDiv = remember { mutableStateOf(true) } val drawDiv = remember { mutableStateOf(true) }
val composition = renderComposableInBody { val composition = remember {
renderComposableInBody {
Div( Div(
{ {
if (modifiers.none { it is UIKitModal.WithCustomAttributes }) { if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
@ -40,42 +42,38 @@ fun Dialog(
id("dialog${Random.nextUInt()}") id("dialog${Random.nextUInt()}")
include(*modifiers) include(*modifiers)
ref { htmlElement -> attributesCustomizer()
inline fun isShown() = htmlElement.classList.contains(UIKitUtility.Open.classes.first())
var latestStateIsShown = isShown()
val observer = MutationObserver { _, _ ->
val currentStateIsShown = isShown()
when (currentStateIsShown) {
latestStateIsShown -> return@MutationObserver
true -> onShown ?.invoke(htmlElement)
false -> onHidden ?.invoke(htmlElement)
} }
) {
latestStateIsShown = currentStateIsShown DisposableEffect(true) {
val htmlElement = scopeElement
if (removeOnHide && !currentStateIsShown) {
htmlElement.remove()
}
}
observer.observe(htmlElement, MutationObserverInit(attributes = true, attributeFilter = arrayOf("class")))
if (autoShow) { if (autoShow) {
UIKit.modal("#${htmlElement.id}") ?.show() 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 { onDispose {
observer.disconnect()
drawDiv.value = false drawDiv.value = false
} }
} }
attributesCustomizer()
}
) {
Div( Div(
{ {
include(UIKitModal.Dialog) include(UIKitModal.Dialog)
@ -115,6 +113,7 @@ fun Dialog(
} }
} }
} }
}
if (drawDiv.value) { if (drawDiv.value) {
Div({ Div({
@ -150,23 +149,23 @@ fun Dialog(
bodyBuilder: ContentBuilder<HTMLDivElement> = {} bodyBuilder: ContentBuilder<HTMLDivElement> = {}
) = Dialog( ) = Dialog(
modifiers = modifiers, modifiers = modifiers,
attributesCustomizer, attributesCustomizer = attributesCustomizer,
onHidden, onHidden = onHidden,
onShown, onShown = onShown,
dialogAttrsBuilder, dialogAttrsBuilder = dialogAttrsBuilder,
headerAttrsBuilder, headerAttrsBuilder = headerAttrsBuilder,
headerBuilder = { headerBuilder = {
H2({ include(UIKitModal.Title) }) { H2({ include(UIKitModal.Title) }) {
Text(title) Text(title)
} }
headerBuilder ?.invoke(this) headerBuilder ?.invoke(this)
}, },
afterHeaderBuilder, afterHeaderBuilder = afterHeaderBuilder,
beforeFooterBuilder, beforeFooterBuilder = beforeFooterBuilder,
footerAttrsBuilder, footerAttrsBuilder = footerAttrsBuilder,
footerBuilder, footerBuilder = footerBuilder,
bodyAttrsBuilder, bodyAttrsBuilder = bodyAttrsBuilder,
autoShow, autoShow = autoShow,
removeOnHide, removeOnHide = removeOnHide,
bodyBuilder bodyBuilder = bodyBuilder
) )

View File

@ -6,6 +6,7 @@ import kotlin.js.Json
external interface UIKit { external interface UIKit {
val notification: UIKitNotifications val notification: UIKitNotifications
val modal: UIKitDialogs val modal: UIKitDialogs
val util: UIKitUtil
fun notification(message: String, parameters: Json) fun notification(message: String, parameters: Json)

View File

@ -0,0 +1,8 @@
package dev.inmo.jsuikit.types
import org.w3c.dom.HTMLElement
external interface UIKitUtil {
fun on(selector: String, event: String, callback: () -> Unit)
fun on(element: HTMLElement, event: String, callback: () -> Unit)
}

View File

@ -0,0 +1,4 @@
package dev.inmo.jsuikit.types
object UIKitUtilConstants {
}

View File

@ -0,0 +1,9 @@
package dev.inmo.jsuikit.utils
import org.jetbrains.compose.web.dom.AttrBuilderContext
import org.w3c.dom.Element
operator fun <T : Element> AttrBuilderContext<T>.plus(other: AttrBuilderContext<T>): AttrBuilderContext<T> = {
this@plus()
other()
}