InsanusMokrassar/kjsuikit
1
0
Fork 0
mirror of https://github.com/InsanusMokrassar/JSUIKitKBindings.git synced 2024-11-26 20:18:49 +00:00
Code Packages Releases Activity

improve work with modal dialogs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

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

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

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

58
src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitModal.kt Normal file
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
}
)
)
}
}