improve work with modal dialogs

This commit is contained in:
InsanusMokrassar 2022-02-16 19:54:07 +06:00
parent 23ec737a05
commit 1785e2158e
3 changed files with 120 additions and 22 deletions

View File

@ -2,6 +2,9 @@
## 0.0.35 ## 0.0.35
* Add `UIKitModal`
* Improve work with dialogs
## 0.0.34 ## 0.0.34
* Add `Alert` * Add `Alert`

View File

@ -2,8 +2,7 @@ package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffectResult import androidx.compose.runtime.DisposableEffectResult
import dev.inmo.jsuikit.modifiers.UIKitModifier import dev.inmo.jsuikit.modifiers.*
import dev.inmo.jsuikit.modifiers.include
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.dom.Text import org.jetbrains.compose.web.dom.Text
import org.w3c.dom.* import org.w3c.dom.*
@ -25,42 +24,48 @@ private class DialogDisposableEffectResult(
@Composable @Composable
fun Dialog( fun Dialog(
title: String? = null,
vararg modifiers: UIKitModifier, vararg modifiers: UIKitModifier,
hide: (() -> Unit)? = null,
hidden: (() -> Unit)? = null,
footerBuilder: (@Composable () -> Unit)? = null,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}, attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
bodyBuilder: @Composable () -> Unit onHide: (() -> Unit)? = null,
onHidden: (() -> Unit)? = null,
dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerBuilder: ContentBuilder<HTMLDivElement>? = null,
footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
footerBuilder: ContentBuilder<HTMLDivElement>? = null,
bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
bodyBuilder: ContentBuilder<HTMLDivElement>
) { ) {
Div( Div(
{ {
attr("uk-modal", "") if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
classes("uk-flex-top", "uk-modal") include(UIKitModal)
}
id("dialog${Random.nextUInt()}") id("dialog${Random.nextUInt()}")
include(*modifiers) include(*modifiers, UIKitFlex.Alignment.Vertical.Top)
attributesCustomizer() attributesCustomizer()
} }
) { ) {
Div( Div(
{ {
classes("uk-modal-dialog", "uk-margin-auto-vertical") include(UIKitModal.Dialog)
dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
} }
) { ) {
title ?.let { headerBuilder ?.let {
Div( Div(
{ {
classes("uk-modal-header") include(UIKitModal.Header)
headerAttrsBuilder ?.let { it() }
} }
) { ) {
H2({ classes("uk-modal-title") }) { it()
Text(title)
}
} }
} }
Div( Div(
{ {
classes("uk-modal-body") include(UIKitModal.Body)
bodyAttrsBuilder ?.let { it() }
} }
) { ) {
bodyBuilder() bodyBuilder()
@ -68,16 +73,17 @@ fun Dialog(
footerBuilder ?.let { footerBuilder ?.let {
Div( Div(
{ {
classes("uk-modal-footer", "uk-text-right") include(UIKitModal.Footer)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
} }
) { ) {
footerBuilder() it()
} }
} }
} }
DisposableRefEffect { DisposableRefEffect {
DialogDisposableEffectResult(it, hide, hidden) DialogDisposableEffectResult(it, onHide, onHidden)
} }
DomSideEffect { htmlElement -> DomSideEffect { htmlElement ->
@ -85,13 +91,44 @@ fun Dialog(
wrapper = { it: Event -> wrapper = { it: Event ->
htmlElement.removeEventListener("hidden", wrapper) htmlElement.removeEventListener("hidden", wrapper)
htmlElement.remove() htmlElement.remove()
hidden ?.invoke() onHidden ?.invoke()
} }
htmlElement.addEventListener("hidden", wrapper) htmlElement.addEventListener("hidden", wrapper)
val dialog = js("UIkit").modal("#${htmlElement.id}") val dialog = UIKit.modal("#${htmlElement.id}")
dialog.show() dialog.show()
Unit Unit
} }
} }
} }
@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()
}
)

View File

@ -0,0 +1,58 @@
package dev.inmo.jsuikit.modifiers
import dev.inmo.jsuikit.utils.buildAttribute
sealed class UIKitModal(
classname: String,
override val otherAttrs: Map<String, String> = emptyMap()
) : UIKitModifier {
override val classes: Array<String> = arrayOf(classname)
object Dialog : UIKitModal("uk-modal-dialog")
object Title : UIKitModal("uk-modal-title")
object Header : UIKitModal("uk-modal-header")
object Body : UIKitModal("uk-modal-body")
object Footer : UIKitModal("uk-modal-footer")
object Container : UIKitModal("uk-modal-container")
object Full : UIKitModal("uk-modal-full")
object Page : UIKitModal("uk-modal-page")
sealed class Close(classname: String) : UIKitModal(classname) {
object Default : Close("uk-modal-close-default")
object Outside : Close("uk-modal-close-outside")
object Full : Close("uk-modal-close-full")
companion object : Close("uk-modal-close")
}
internal class WithCustomAttributes(
otherAttrs: Map<String, String> = emptyMap()
) : UIKitModal("uk-modal", otherAttrs)
companion object : UIKitModal("uk-modal", mapOf("uk-modal" to "")) {
operator fun invoke(
escClose: Boolean? = null,
backgroundClose: Boolean? = null,
stack: Boolean? = null,
container: Boolean? = null,
classPage: String? = null,
classPanel: String? = null,
closingSelection: String? = null,
): UIKitModal = WithCustomAttributes(
mapOf(
buildAttribute("uk-modal") {
"esc-close" to escClose
"bg-close" to backgroundClose
"stack" to stack
"container" to container
"cls-page" to classPage
"cls-panel" to classPanel
"sel-close" to closingSelection
}
)
)
}
}