small improvement in dialogs

0.4.3

.github/workflows/build.yml

@@ -1,15 +0,0 @@
-name: Build
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Set up JDK 11
-        uses: actions/setup-java@v1
-        with:
-          java-version: 11
-      - name: Build with Gradle
-        run: ./gradlew build

.github/workflows/build_and_publish.yml

@@ -0,0 +1,26 @@
+name: Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up JDK 11
+        uses: actions/setup-java@v1
+        with:
+          java-version: 11
+      - name: Rewrite version
+        run: |
+          branch="`echo "${{ github.ref }}" | grep -o "[^/]*$"`"
+          cat gradle.properties | sed -e "s/^version=\([0-9\.]*\)/version=\1-branch_$branch-build${{ github.run_number }}/" > gradle.properties.tmp
+          rm gradle.properties
+          mv gradle.properties.tmp gradle.properties
+      - name: Build with Gradle
+        run: ./gradlew build
+      - name: Publish
+        continue-on-error: true
+        run: ./gradlew publishAllPublicationsToGiteaRepository
+        env:
+            GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.5.0
+
+* Fully rework `Dialog` elements
+
+## 0.4.3
+
+* Add opportunity to now show dialog automatically
+
 ## 0.4.2
 
 * `Compose`: `1.2.2`

gradle.properties

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

publish.gradle

@@ -38,14 +38,32 @@ publishing {
             }
         }
         repositories {
+            if (project.hasProperty('GITEA_TOKEN') || System.getenv('GITEA_TOKEN') != null) {
+                maven {
+                    name = "GITEA"
+                    url = uri("https://git.inmo.dev/api/packages/InsanusMokrassar/maven")
+            
+                    credentials(HttpHeaderCredentials) {
+                        name = "Authorization"
+                        value = project.hasProperty('GITEA_TOKEN') ? project.property('GITEA_TOKEN') : System.getenv('GITEA_TOKEN')
+                    }
+            
+                    authentication {
+                        header(HttpHeaderAuthentication)
+                    }
+            
+                }
+            }
             if ((project.hasProperty('SONATYPE_USER') || System.getenv('SONATYPE_USER') != null) && (project.hasProperty('SONATYPE_PASSWORD') || System.getenv('SONATYPE_PASSWORD') != null)) {
                 maven {
                     name = "sonatype"
                     url = uri("https://oss.sonatype.org/service/local/staging/deploy/maven2/")
+            
                     credentials {
                         username = project.hasProperty('SONATYPE_USER') ? project.property('SONATYPE_USER') : System.getenv('SONATYPE_USER')
                         password = project.hasProperty('SONATYPE_PASSWORD') ? project.property('SONATYPE_PASSWORD') : System.getenv('SONATYPE_PASSWORD')
                     }
+            
                 }
             }
         }

publish.kpsb

@@ -1 +1 @@
-{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}
+{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"GITEA","url":"https://git.inmo.dev/api/packages/InsanusMokrassar/maven","credsType":{"type":"dev.inmo.kmppscriptbuilder.core.models.MavenPublishingRepository.CredentialsType.HttpHeaderCredentials","headerName":"Authorization","headerValueProperty":"GITEA_TOKEN"}},{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}

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

@@ -1,33 +1,23 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffectResult
+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.MutationObserver
-import org.w3c.dom.events.Event
+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,
@@ -36,71 +26,107 @@ fun Dialog(
     footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     footerBuilder: ContentBuilder<HTMLDivElement>? = null,
     bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
-    bodyBuilder: ContentBuilder<HTMLDivElement>
+    autoShow: Boolean = true,
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    Div(
+    val drawDiv = remember { mutableStateOf(true) }
-        {
+    val composition = renderComposableInBody {
-            if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                include(UIKitModal)
-            }
-            id("dialog${Random.nextUInt()}")
-            include(*modifiers)
-            attributesCustomizer()
-        }
-    ) {
         Div(
             {
-                include(UIKitModal.Dialog)
+                if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
+                    include(UIKitModal)
+                }
+                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()
             }
         ) {
-            headerBuilder ?.let {
-                Div(
-                    {
-                        include(UIKitModal.Header)
-                        headerAttrsBuilder ?.let { it() }
-                    }
-                ) {
-                    it()
-                }
-            }
-            afterHeaderBuilder ?.let { it() }
             Div(
                 {
-                    include(UIKitModal.Body)
+                    include(UIKitModal.Dialog)
-                    bodyAttrsBuilder ?.let { it() }
+                    dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
                 }
             ) {
-                bodyBuilder()
+                headerBuilder ?.let {
-            }
+                    Div(
-            beforeFooterBuilder ?.let { it() }
+                        {
-            footerBuilder ?.let {
+                            include(UIKitModal.Header)
+                            headerAttrsBuilder ?.let { it() }
+                        }
+                    ) {
+                        it()
+                    }
+                }
+                afterHeaderBuilder ?.let { it() }
                 Div(
                     {
-                        include(UIKitModal.Footer)
+                        include(UIKitModal.Body)
-                        footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                        bodyAttrsBuilder ?.let { it() }
                     }
                 ) {
-                    it()
+                    bodyBuilder()
+                }
+                beforeFooterBuilder ?.let { it() }
+                footerBuilder ?.let {
+                    Div(
+                        {
+                            include(UIKitModal.Footer)
+                            footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                        }
+                    ) {
+                        it()
+                    }
                 }
             }
         }
+    }
 
-        DisposableRefEffect {
+    if (drawDiv.value) {
-            DialogDisposableEffectResult(it, onHide, onHidden)
+        Div({
-        }
+            hidden()
-
+            ref {
-        DomSideEffect { htmlElement ->
+                onDispose {
-            var wrapper: (Event) -> Unit = {}
+                    composition.dispose()
-            wrapper = { it: Event ->
+                }
-                htmlElement.removeEventListener("hidden", wrapper)
-                htmlElement.remove()
-                onHidden ?.invoke()
             }
-            htmlElement.addEventListener("hidden", wrapper)
+        })
-
+    } else {
-            UIKit.modal("#${htmlElement.id}") ?.show()
+        runCatching { composition.dispose() }
-        }
     }
 }
 
@@ -108,29 +134,39 @@ fun Dialog(
 fun Dialog(
     title: String,
     vararg modifiers: UIKitModifier,
-    hide: (() -> Unit)? = null,
-    hidden: (() -> Unit)? = null,
-    footerBuilder: (@Composable () -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    bodyBuilder: @Composable () -> Unit
+    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,
+    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()
-    },
-    bodyBuilder = {
-        bodyBuilder()
-    }
 )