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

View File

@ -6,6 +6,7 @@ import kotlin.js.Json
external interface UIKit {
val notification: UIKitNotifications
val modal: UIKitDialogs
val util: UIKitUtil
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()
}