total rework of dialogs

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 0.5.0
 
+* Fully rework `Dialog` elements
+
 ## 0.4.3
 
 * Add opportunity to now show dialog automatically

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

@@ -1,33 +1,30 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Composition
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.DisposableEffectResult
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.currentRecomposeScope
+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: ((HTMLDivElement) -> Unit)? = null,
-    onHidden: (() -> Unit)? = null,
+    onShown: ((HTMLDivElement) -> Unit)? = null,
     dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerBuilder: ContentBuilder<HTMLDivElement>? = null,
@@ -37,8 +34,11 @@ fun Dialog(
     footerBuilder: ContentBuilder<HTMLDivElement>? = null,
     bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     autoShow: Boolean = true,
+    removeOnHide: Boolean = true,
     bodyBuilder: ContentBuilder<HTMLDivElement>
 ) {
+    val drawDiv = remember { mutableStateOf(true) }
+    val composition = renderComposableInBody {
         Div(
             {
                 if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
@@ -46,6 +46,40 @@ fun Dialog(
                 }
                 id("dialog${Random.nextUInt()}")
                 include(*modifiers)
+
+                ref { htmlElement ->
+                    inline fun isShown() = htmlElement.classList.contains(UIKitUtility.Open.classes.first())
+
+                    var latestStateIsShown = isShown()
+
+                    val observer = MutationObserver { _, _ ->
+                        val currentStateIsShown = isShown()
+
+                        when (currentStateIsShown) {
+                            latestStateIsShown -> return@MutationObserver
+                            true -> onShown ?.invoke(htmlElement)
+                            false -> onHidden ?.invoke(htmlElement)
+                        }
+
+                        latestStateIsShown = currentStateIsShown
+
+                        if (removeOnHide && !currentStateIsShown) {
+                            htmlElement.remove()
+                        }
+                    }
+
+                    observer.observe(htmlElement, MutationObserverInit(attributes = true, attributeFilter = arrayOf("class")))
+
+                    if (autoShow) {
+                        UIKit.modal("#${htmlElement.id}") ?.show()
+                    }
+
+                    onDispose {
+                        observer.disconnect()
+                        drawDiv.value = false
+                    }
+                }
+
                 attributesCustomizer()
             }
         ) {
@@ -86,24 +120,20 @@ fun Dialog(
                     }
                 }
             }
-
+        }
-        DisposableRefEffect {
-            DialogDisposableEffectResult(it, onHide, onHidden)
     }
 
-        DomSideEffect { htmlElement ->
+    if (drawDiv.value) {
-            var wrapper: (Event) -> Unit = {}
+        Div({
-            wrapper = { it: Event ->
+            hidden()
-                htmlElement.removeEventListener("hidden", wrapper)
+            ref {
-                htmlElement.remove()
+                onDispose {
-                onHidden ?.invoke()
+                    composition.dispose()
-            }
-            htmlElement.addEventListener("hidden", wrapper)
-
-            if (autoShow) {
-                UIKit.modal("#${htmlElement.id}") ?.show()
                 }
             }
+        })
+    } else {
+        runCatching { composition.dispose() }
     }
 }
 
@@ -111,31 +141,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,
+    onHidden,
+    onShown,
+    dialogAttrsBuilder,
+    headerAttrsBuilder,
     headerBuilder = {
         H2({ include(UIKitModal.Title) }) {
             Text(title)
         }
+        headerBuilder ?.invoke(this)
     },
-    onHide = hide,
+    afterHeaderBuilder,
-    onHidden = hidden,
+    beforeFooterBuilder,
-    footerBuilder = footerBuilder ?.let { _ ->
+    footerAttrsBuilder,
-        {
+    footerBuilder,
-            footerBuilder()
+    bodyAttrsBuilder,
-        }
+    autoShow,
-    },
+    removeOnHide,
-    attributesCustomizer = {
+    bodyBuilder
-        attributesCustomizer()
-    },
-    autoShow = autoShow,
-    bodyBuilder = {
-        bodyBuilder()
-    }
 )