Add Boolean parameter to attrs scope of NavLink (#201)

Co-authored-by: hfhbd <[email protected]>

Author: hfhbd

integrationTest/src/jsMain/kotlin/demo.kt

@@ -88,9 +88,17 @@ fun RouteBuilder.Routing() {
     }
 
     Clock()
-    NavLink(to = "/") { Text("Main") }
+    NavLink(to = "/", attrs = { selected ->
+        if (selected) {
+            classes("active")
+        }
+    }) { Text("Main") }
     Br()
-    NavLink(to = "/users") { Text("Users") }
+    NavLink(to = "/users", attrs = { selected ->
+        if (selected) {
+            classes("active")
+        }
+    }) { Text("Users") }
 
     P {
         Text("Parameters: ${this@Routing.parameters?.map}")
@@ -103,46 +111,53 @@ fun RouteBuilder.Routing() {
         answer()
     }
     noMatch {
-        P {
-            Text("Hello Routing")
+        Hello(enableAnswer) {
+            enableAnswer = it
         }
-        if (enableAnswer) {
-            NavLink("answer") {
-                Text("Click to navigate to /answer")
-            }
-        } else {
-            Button({
-                onClick {
-                    enableAnswer = true
-                }
-            }) {
-                Text("Enable answer")
-            }
+    }
+}
+
+@Composable
+private fun Hello(enableAnswer: Boolean, updateEnableAnswer: (Boolean) -> Unit) {
+    P {
+        Text("Hello Routing")
+    }
+    if (enableAnswer) {
+        NavLink("answer") {
+            Text("Click to navigate to /answer")
         }
-        Hr()
-        P {
-            Text("Custom router usage")
+    } else {
+        Button({
+            onClick {
+                updateEnableAnswer(true)
+            }
+        }) {
+            Text("Enable answer")
         }
+    }
+    Hr()
+    P {
+        Text("Custom router usage")
+    }
 
-        Code {
-            Text("val router = Router.current")
-            Br()
-            Text("router.navigate(to = /users)")
-        }
+    Code {
+        Text("val router = Router.current")
+        Br()
+        Text("router.navigate(to = /users)")
+    }
 
-        val router = Router.current
+    val router = Router.current
 
-        P {
-            Input(type = InputType.Button) {
-                onClick {
-                    router.navigate("users")
-                }
-                value("Navigate to /users")
+    P {
+        Input(type = InputType.Button) {
+            onClick {
+                router.navigate("users")
             }
+            value("Navigate to /users")
         }
-        Hr()
-        RedirectButton()
     }
+    Hr()
+    RedirectButton()
 }
 
 @Routing

src/jsMain/kotlin/app/softwork/routingcompose/NavLink.kt

@@ -1,37 +1,36 @@
 package app.softwork.routingcompose
 
 import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.*
 
 /**
  * Routing navigation Composable that will navigate to the provided path leveraging
  * the top-most Router implementation.
- * This implementation will use the `active` class if the current route starts with this link.
+ * The Boolean parameter of [attrs] is true, if the path of the [current][Router.current]  starts with [to].
  */
 @Composable
 public fun NavLink(
     to: String,
-    attrs: AttrBuilderContext<HTMLAnchorElement>? = null,
+    attrs: (AttrsScope<HTMLAnchorElement>.(Boolean) -> Unit)? = null,
     content: ContentBuilder<HTMLAnchorElement>? = null
 ) {
     val router = Router.current
     A(
         href = to,
         attrs = {
-            if (to == "/") {
-                if (router.currentPath.path == to) {
-                    classes("active")
-                }
-            } else if (router.currentPath.path.startsWith(to)) {
-                classes("active")
-            }
+            val currentPath = router.currentPath.path
+            val selected = if (to == "/") {
+                currentPath == to
+            } else currentPath.startsWith(to)
+
             onClick {
                 if (it.ctrlKey || it.metaKey) return@onClick
                 router.navigate(to)
                 it.preventDefault()
             }
-            attrs?.invoke(this)
+            attrs?.invoke(this, selected)
         },
         content = content
     )