Merge pull request #14 from NordicPlayground/dialog-navigation

Dialog navigation

Author: philips77

app/src/main/java/no/nordicsemi/android/common/test/MainActivity.kt

@@ -158,7 +158,7 @@ class MainActivity : NordicActivity() {
                         topBar = {
                             NordicAppBar(
                                 text = stringResource(id = R.string.title_main),
-                                showBackButton = listOf(Hello, Scanner).contains(currentDestination),
+                                showBackButton = listOf(Hello, HelloDialog, Scanner).contains(currentDestination),
                                 onNavigationButtonClick = { navigator.navigateUp() },
                                 onHamburgerButtonClick = {
                                     scope.launch { drawerState.open() }

app/src/main/java/no/nordicsemi/android/common/test/main/Main.kt

@@ -7,7 +7,7 @@ import no.nordicsemi.android.common.navigation.createSimpleDestination
 import no.nordicsemi.android.common.navigation.defineDestination
 import no.nordicsemi.android.common.test.main.page.*
 import no.nordicsemi.android.common.test.scanner.ScannerDestination
-import no.nordicsemi.android.common.test.simple.HelloDestination
+import no.nordicsemi.android.common.test.simple.HelloDestinations
 import no.nordicsemi.android.common.theme.view.PagerView
 import no.nordicsemi.android.common.theme.view.PagerViewEntity
 
@@ -21,7 +21,7 @@ private val MainDestination = defineDestination(Main) {
     MainScreen()
 }
 
-val MainDestinations = MainDestination + ScannerDestination + HelloDestination
+val MainDestinations = MainDestination + ScannerDestination + HelloDestinations
 
 @Composable
 private fun MainScreen() {

app/src/main/java/no/nordicsemi/android/common/test/simple/Hello.kt

@@ -1,8 +1,11 @@
 package no.nordicsemi.android.common.test.simple
 
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -13,10 +16,10 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import no.nordicsemi.android.common.navigation.createDestination
 import no.nordicsemi.android.common.navigation.defineDestination
+import no.nordicsemi.android.common.navigation.defineDialogDestination
 import no.nordicsemi.android.common.navigation.viewmodel.SimpleNavigationViewModel
 import no.nordicsemi.android.common.test.R
 import no.nordicsemi.android.common.theme.NordicTheme
-import no.nordicsemi.android.common.theme.view.NordicAppBar
 
 /**
  * This is an example of a simple destination.
@@ -25,19 +28,43 @@ import no.nordicsemi.android.common.theme.view.NordicAppBar
  */
 val Hello = createDestination<Int, Unit>("hello")
 
-val HelloDestination = defineDestination(Hello) {
+private val HelloDestination = defineDestination(Hello) {
     val vm: SimpleNavigationViewModel = hiltViewModel()
     val param = vm.parameterOf(Hello)
 
     HelloScreen(
         param = param,
+        onShowDialog = { vm.navigateTo(HelloDialog, "Hello World!") },
         modifier = Modifier.fillMaxWidth(),
     )
 }
 
+val HelloDialog = createDestination<String, Unit>("hello-dialog")
+
+private val HelloDialogDestination = defineDialogDestination(HelloDialog) {
+    val vm: SimpleNavigationViewModel = hiltViewModel()
+    val param = vm.parameterOf(HelloDialog)
+
+    // This should not be AlertDialog, but AlertDialogContent. This is already wrapped in Dialog.
+    // Unfortunately, the AlertDialogContent is internal.
+    AlertDialog(
+        onDismissRequest = { vm.navigateUp() },
+        title = { Text(text = param) },
+        text = { Text(text = "This is a dialog.") },
+        confirmButton = {
+            Button(onClick = { vm.navigateUp() }) {
+                Text(text = "OK")
+            }
+        },
+    )
+}
+
+val HelloDestinations = HelloDestination + HelloDialogDestination
+
 @Composable
 private fun HelloScreen(
     param: Int,
+    onShowDialog: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(
@@ -52,7 +79,7 @@ private fun HelloScreen(
 
             Text(text = stringResource(id = R.string.hello_param, param))
 
-            Button(onClick = { }) {
+            Button(onClick = onShowDialog) {
                 Text(text = stringResource(id = R.string.action_dialog))
             }
         }
@@ -65,6 +92,7 @@ private fun SimpleContentPreview() {
     NordicTheme {
         HelloScreen(
             param = 0,
+            onShowDialog = {},
         )
     }
 }

app/src/main/java/no/nordicsemi/android/common/test/tab/Second.kt

@@ -17,7 +17,7 @@ import no.nordicsemi.android.common.navigation.defineDestination
 import no.nordicsemi.android.common.navigation.viewmodel.SimpleNavigationViewModel
 import no.nordicsemi.android.common.test.R
 import no.nordicsemi.android.common.test.simple.Hello
-import no.nordicsemi.android.common.test.simple.HelloDestination
+import no.nordicsemi.android.common.test.simple.HelloDestinations
 import no.nordicsemi.android.common.theme.NordicTheme
 
 val Second = createSimpleDestination("second")
@@ -30,7 +30,7 @@ private val SecondDestination = defineDestination(Second) {
     )
 }
 
-val SecondDestinations = SecondDestination + HelloDestination
+val SecondDestinations = SecondDestination + HelloDestinations
 
 @Composable
 private fun SecondScreen(

navigation/src/main/java/no/nordicsemi/android/common/navigation/NavigationDestination.kt

@@ -34,6 +34,7 @@
 package no.nordicsemi.android.common.navigation
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.window.DialogProperties
 
 /**
  * A navigation view allows navigating between different destinations.
@@ -73,6 +74,21 @@ internal class InnerNavigationDestination(
     val destinations: List<NavigationDestination>,
 ): NavigationDestination(id)
 
+/**
+ * Definition of a dialog destination.
+ *
+ * This class binds a destination identifier with a composable function that will be used to
+ * render the content.
+ *
+ * @property id The destination identifier.
+ * @property content The composable function that will be used to render the content.
+ */
+internal class DialogDestination(
+    id: DestinationId<*, *>,
+    val dialogProperties: DialogProperties = DialogProperties(),
+    val content: @Composable () -> Unit,
+): NavigationDestination(id)
+
 /**
  * Helper method for creating a composable [NavigationDestination].
  */
@@ -94,4 +110,13 @@ fun defineDestinationWithInnerNavigation(
  */
 infix fun DestinationId<*, *>.with(destinations: List<NavigationDestination>): NavigationDestination {
     return defineDestinationWithInnerNavigation(this, destinations)
-}
+}
+
+/**
+ * Helper method for creating a dialog [NavigationDestination].
+ */
+fun defineDialogDestination(
+    id: DestinationId<*, *>,
+    dialogProperties: DialogProperties = DialogProperties(),
+    content: @Composable () -> Unit,
+): NavigationDestination = DialogDestination(id, dialogProperties, content)

navigation/src/main/java/no/nordicsemi/android/common/navigation/NavigationView.kt

@@ -44,6 +44,7 @@ import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import androidx.navigation.compose.dialog
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navigation
 import no.nordicsemi.android.common.navigation.internal.NavigationManager.Event
@@ -145,6 +146,15 @@ private fun NavGraphBuilder.create(
                     create(destination.destinations, navigation)
                 }
             }
+            is DialogDestination -> {
+                dialog(
+                    route = destination.id.name,
+                    dialogProperties = destination.dialogProperties,
+                ) {
+                    navigation.use(it.savedStateHandle)
+                    destination.content()
+                }
+            }
         }
     }
 }