mirror of
https://github.com/InsanusMokrassar/JSUIKitKBindings.git
synced 2024-11-14 04:13:50 +00:00
commit
05816f9a57
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.0
|
||||
|
||||
* Fully rework `Dialog` elements
|
||||
|
||||
## 0.4.3
|
||||
|
||||
* Add opportunity to now show dialog automatically
|
||||
|
@ -9,4 +9,4 @@ android.enableJetifier=true
|
||||
# Project data
|
||||
|
||||
group=dev.inmo
|
||||
version=0.4.3
|
||||
version=0.5.0
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -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
8
src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitUtil.kt
Normal 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)
|
||||
}
|
@ -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()
|
||||
}
|
Loading…
Reference in New Issue
Block a user