InsanusMokrassar
/
kjsuikit
mirror of https://github.com/InsanusMokrassar/JSUIKitKBindings.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #75 from InsanusMokrassar/0.5.0 

0.5.0
This commit is contained in:
InsanusMokrassar 2023-01-12 14:51:06 +06:00 committed by GitHub
parent 0feafdae4b 402af2445f
commit 05816f9a57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 140 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -1,5 +1,9 @@
# Changelog
## 0.5.0
* Fully rework `Dialog` elements
## 0.4.3
* Add opportunity to now show dialog automatically

2
gradle.properties
View File

@ -9,4 +9,4 @@ android.enableJetifier=true
# Project data
group=dev.inmo
version=0.4.3
version=0.5.0

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

@ -1,33 +1,24 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffectResult
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import dev.inmo.jsuikit.modifiers.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposableInBody
import org.w3c.dom.HTMLDivElement
import org.w3c.dom.HTMLElement
import org.w3c.dom.events.Event
import org.w3c.dom.MutationObserver
import org.w3c.dom.MutationObserverInit
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()
UIKit.modal("#${element.id}") ?.hide()
onDisposed?.invoke()
}
}
@Composable
fun Dialog(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
onHide: (() -> Unit)? = null,
onHidden: (() -> Unit)? = null,
onHidden: ((HTMLDivElement) -> Unit)? = null,
onShown: ((HTMLDivElement) -> Unit)? = null,
dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerBuilder: ContentBuilder<HTMLDivElement>? = null,
@ -37,73 +28,104 @@ fun Dialog(
footerBuilder: ContentBuilder<HTMLDivElement>? = null,
bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
autoShow: Boolean = true,
bodyBuilder: ContentBuilder<HTMLDivElement>
removeOnHide: Boolean = true,
bodyBuilder: ContentBuilder<HTMLDivElement> = {}
) {
Div(
{
if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
include(UIKitModal)
}
id("dialog${Random.nextUInt()}")
include(*modifiers)
attributesCustomizer()
}
) {
Div(
{
include(UIKitModal.Dialog)
dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
}
) {
headerBuilder ?.let {
Div(
{
include(UIKitModal.Header)
headerAttrsBuilder ?.let { it() }
}
) {
it()
}
}
afterHeaderBuilder ?.let { it() }
val drawDiv = remember { mutableStateOf(true) }
val composition = remember {
renderComposableInBody {
Div(
{
include(UIKitModal.Body)
bodyAttrsBuilder ?.let { it() }
if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
include(UIKitModal)
}
id("dialog${Random.nextUInt()}")
include(*modifiers)
attributesCustomizer()
}
) {
bodyBuilder()
}
beforeFooterBuilder ?.let { it() }
footerBuilder ?.let {
DisposableEffect(true) {
val htmlElement = scopeElement
if (autoShow) {
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 {
drawDiv.value = false
}
}
Div(
{
include(UIKitModal.Footer)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
include(UIKitModal.Dialog)
dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
}
) {
it()
headerBuilder ?.let {
Div(
{
include(UIKitModal.Header)
headerAttrsBuilder ?.let { it() }
}
) {
it()
}
}
afterHeaderBuilder ?.let { it() }
Div(
{
include(UIKitModal.Body)
bodyAttrsBuilder ?.let { it() }
}
) {
bodyBuilder()
}
beforeFooterBuilder ?.let { it() }
footerBuilder ?.let {
Div(
{
include(UIKitModal.Footer)
footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
}
) {
it()
}
}
}
}
}
}
DisposableRefEffect {
DialogDisposableEffectResult(it, onHide, onHidden)
}
DomSideEffect { htmlElement ->
var wrapper: (Event) -> Unit = {}
wrapper = { it: Event ->
htmlElement.removeEventListener("hidden", wrapper)
htmlElement.remove()
onHidden ?.invoke()
if (drawDiv.value) {
Div({
hidden()
ref {
onDispose {
composition.dispose()
}
}
htmlElement.addEventListener("hidden", wrapper)
if (autoShow) {
UIKit.modal("#${htmlElement.id}") ?.show()
}
}
})
} else {
runCatching { composition.dispose() }
}
}
@ -111,31 +133,39 @@ fun Dialog(
fun Dialog(
title: String,
vararg modifiers: UIKitModifier,
hide: (() -> Unit)? = null,
hidden: (() -> Unit)? = null,
footerBuilder: (@Composable () -> Unit)? = null,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
onHidden: ((HTMLDivElement) -> Unit)? = null,
onShown: ((HTMLDivElement) -> Unit)? = null,
dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
headerBuilder: ContentBuilder<HTMLDivElement>? = null,
afterHeaderBuilder: ContentBuilder<HTMLDivElement>? = null,
beforeFooterBuilder: ContentBuilder<HTMLDivElement>? = null,
footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
footerBuilder: ContentBuilder<HTMLDivElement>? = null,
bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
autoShow: Boolean = true,
bodyBuilder: @Composable () -> Unit
removeOnHide: Boolean = true,
bodyBuilder: ContentBuilder<HTMLDivElement> = {}
) = Dialog(
modifiers = modifiers,
attributesCustomizer = attributesCustomizer,
onHidden = onHidden,
onShown = onShown,
dialogAttrsBuilder = dialogAttrsBuilder,
headerAttrsBuilder = headerAttrsBuilder,
headerBuilder = {
H2({ include(UIKitModal.Title) }) {
Text(title)
}
headerBuilder ?.invoke(this)
},
onHide = hide,
onHidden = hidden,
footerBuilder = footerBuilder ?.let { _ ->
{
footerBuilder()
}
},
attributesCustomizer = {
attributesCustomizer()
},
afterHeaderBuilder = afterHeaderBuilder,
beforeFooterBuilder = beforeFooterBuilder,
footerAttrsBuilder = footerAttrsBuilder,
footerBuilder = footerBuilder,
bodyAttrsBuilder = bodyAttrsBuilder,
autoShow = autoShow,
bodyBuilder = {
bodyBuilder()
}
removeOnHide = removeOnHide,
bodyBuilder = bodyBuilder
)

1
src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKit.kt
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)

8
src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitUtil.kt Normal file
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)
}

9
src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributeBuilderContextSums.kt Normal file
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()
}