kjsuikit/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Dialog.kt

137 lines
4.0 KiB
Kotlin
Raw Normal View History

2022-01-12 10:27:49 +00:00
package dev.inmo.jsuikit.elements
2021-12-22 08:38:12 +00:00
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffectResult
2022-02-16 13:54:07 +00:00
import dev.inmo.jsuikit.modifiers.*
2021-12-22 08:38:12 +00:00
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLDivElement
import org.w3c.dom.HTMLElement
2021-12-22 08:38:12 +00:00
import org.w3c.dom.events.Event
import kotlin.random.Random
import kotlin.random.nextUInt
private class DialogDisposableEffectResult(
private val element: HTMLElement,
private val onDispose: (() -> Unit)?,
private val onDisposed: (() -> Unit)?
) : DisposableEffectResult {
override fun dispose() {
onDispose?.invoke()
2022-02-28 18:49:19 +00:00
UIKit.modal("#${element.id}") ?.hide()
2021-12-22 08:38:12 +00:00
onDisposed?.invoke()
}
}
@Composable
fun Dialog(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
2022-02-16 13:54:07 +00:00
onHide: (() -> Unit)? = null,
onHidden: (() -> Unit)? = null,
dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerBuilder: ContentBuilder<HTMLDivElement>? = null,
afterHeaderBuilder: ContentBuilder<HTMLDivElement>? = null,
beforeFooterBuilder: ContentBuilder<HTMLDivElement>? = null,
2022-02-16 13:54:07 +00:00
footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
footerBuilder: ContentBuilder<HTMLDivElement>? = null,
bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
bodyBuilder: ContentBuilder<HTMLDivElement>
2021-12-22 08:38:12 +00:00
) {
Div(
{
2022-02-16 13:54:07 +00:00
if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
include(UIKitModal)
}
2021-12-22 08:38:12 +00:00
id("dialog${Random.nextUInt()}")
2022-02-24 08:42:45 +00:00
include(*modifiers)
attributesCustomizer()
2021-12-22 08:38:12 +00:00
}
) {
Div(
{
2022-02-16 13:54:07 +00:00
include(UIKitModal.Dialog)
dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
2021-12-22 08:38:12 +00:00
}
) {
2022-02-16 13:54:07 +00:00
headerBuilder ?.let {
2021-12-22 08:38:12 +00:00
Div(
{
2022-02-16 13:54:07 +00:00
include(UIKitModal.Header)
headerAttrsBuilder ?.let { it() }
2021-12-22 08:38:12 +00:00
}
) {
2022-02-16 13:54:07 +00:00
it()
2021-12-22 08:38:12 +00:00
}
}
afterHeaderBuilder ?.let { it() }
2021-12-22 08:38:12 +00:00
Div(
{
2022-02-16 13:54:07 +00:00
include(UIKitModal.Body)
bodyAttrsBuilder ?.let { it() }
2021-12-22 08:38:12 +00:00
}
) {
bodyBuilder()
}
beforeFooterBuilder ?.let { it() }
2021-12-22 08:38:12 +00:00
footerBuilder ?.let {
Div(
{
2022-02-16 13:54:07 +00:00
include(UIKitModal.Footer)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
2021-12-22 08:38:12 +00:00
}
) {
2022-02-16 13:54:07 +00:00
it()
2021-12-22 08:38:12 +00:00
}
}
}
DisposableRefEffect {
2022-02-16 13:54:07 +00:00
DialogDisposableEffectResult(it, onHide, onHidden)
2021-12-22 08:38:12 +00:00
}
DomSideEffect { htmlElement ->
var wrapper: (Event) -> Unit = {}
wrapper = { it: Event ->
htmlElement.removeEventListener("hidden", wrapper)
htmlElement.remove()
2022-02-16 13:54:07 +00:00
onHidden ?.invoke()
2021-12-22 08:38:12 +00:00
}
htmlElement.addEventListener("hidden", wrapper)
2022-02-28 18:49:19 +00:00
UIKit.modal("#${htmlElement.id}") ?.show()
2021-12-22 08:38:12 +00:00
}
}
}
2022-02-16 13:54:07 +00:00
@Composable
fun Dialog(
title: String,
vararg modifiers: UIKitModifier,
hide: (() -> Unit)? = null,
hidden: (() -> Unit)? = null,
footerBuilder: (@Composable () -> Unit)? = null,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
bodyBuilder: @Composable () -> Unit
) = Dialog(
modifiers = modifiers,
headerBuilder = {
H2({ include(UIKitModal.Title) }) {
Text(title)
}
},
onHide = hide,
onHidden = hidden,
footerBuilder = footerBuilder ?.let { _ ->
{
footerBuilder()
}
},
attributesCustomizer = {
attributesCustomizer()
},
bodyBuilder = {
bodyBuilder()
}
)