update adaptive layouts samples to navigable scaffolds (#468)

* update adaptive snippets to have navigable scaffolds implementation

* swap windowSizeClass.windowWidthSizeClass with windowSizeClass.isWidthAtLeastBreakpoint

* update adaptive dependency to 1.1 stable

Author: trambui09

compose/snippets/src/main/java/com/example/compose/snippets/adaptivelayouts/SampleListDetailPaneScaffold.kt

@@ -17,7 +17,6 @@
 package com.example.compose.snippets.adaptivelayouts
 
 import android.os.Parcelable
-import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
@@ -30,33 +29,39 @@ import androidx.compose.material3.Card
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.WindowAdaptiveInfo
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.material3.adaptive.layout.AnimatedPane
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
+import androidx.compose.material3.adaptive.layout.PaneScaffoldDirective
+import androidx.compose.material3.adaptive.navigation.BackNavigationBehavior
+import androidx.compose.material3.adaptive.navigation.NavigableListDetailPaneScaffold
+import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldPredictiveBackHandler
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_EXPANDED_LOWER_BOUND
+import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_MEDIUM_LOWER_BOUND
+import kotlinx.coroutines.launch
 import kotlinx.parcelize.Parcelize
 
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
-fun SampleListDetailPaneScaffoldParts() {
+fun SampleNavigableListDetailPaneScaffoldParts() {
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
-    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
-
-    BackHandler(navigator.canNavigateBack()) {
-        navigator.navigateBack()
-    }
+    val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
+    val scope = rememberCoroutineScope()
     // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
 
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
-    ListDetailPaneScaffold(
-        directive = navigator.scaffoldDirective,
-        value = navigator.scaffoldValue,
+    NavigableListDetailPaneScaffold(
+        navigator = scaffoldNavigator,
         // [START_EXCLUDE]
         listPane = {},
         detailPane = {},
@@ -65,16 +70,21 @@ fun SampleListDetailPaneScaffoldParts() {
     // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
 
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part04]
-    ListDetailPaneScaffold(
-        directive = navigator.scaffoldDirective,
-        value = navigator.scaffoldValue,
+    NavigableListDetailPaneScaffold(
+        navigator = scaffoldNavigator,
         listPane = {
             AnimatedPane {
                 MyList(
                     onItemClick = { item ->
                         // Navigate to the detail pane with the passed item
-                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
-                    }
+                        scope.launch {
+                            scaffoldNavigator
+                                .navigateTo(
+                                    ListDetailPaneScaffoldRole.Detail,
+                                    item
+                                )
+                        }
+                    },
                 )
             }
         },
@@ -85,16 +95,14 @@ fun SampleListDetailPaneScaffoldParts() {
     // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part04]
 
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part05]
-    ListDetailPaneScaffold(
-        directive = navigator.scaffoldDirective,
-        value = navigator.scaffoldValue,
-        listPane =
+    NavigableListDetailPaneScaffold(
+        navigator = scaffoldNavigator,
         // [START_EXCLUDE]
-        {},
+        listPane = {},
         // [END_EXCLUDE]
         detailPane = {
             AnimatedPane {
-                navigator.currentDestination?.content?.let {
+                scaffoldNavigator.currentDestination?.contentKey?.let {
                     MyDetails(it)
                 }
             }
@@ -106,39 +114,103 @@ fun SampleListDetailPaneScaffoldParts() {
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Preview
 @Composable
-fun SampleListDetailPaneScaffoldFull() {
-// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
-    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
+fun SampleNavigableListDetailPaneScaffoldFull() {
+    // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
+    val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
+    val scope = rememberCoroutineScope()
 
-    BackHandler(navigator.canNavigateBack()) {
-        navigator.navigateBack()
-    }
+    NavigableListDetailPaneScaffold(
+        navigator = scaffoldNavigator,
+        listPane = {
+            AnimatedPane {
+                MyList(
+                    onItemClick = { item ->
+                        // Navigate to the detail pane with the passed item
+                        scope.launch {
+                            scaffoldNavigator.navigateTo(
+                                ListDetailPaneScaffoldRole.Detail,
+                                item
+                            )
+                        }
+                    },
+                )
+            }
+        },
+        detailPane = {
+            AnimatedPane {
+                // Show the detail pane content if selected item is available
+                scaffoldNavigator.currentDestination?.contentKey?.let {
+                    MyDetails(it)
+                }
+            }
+        },
+    )
+    // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
+}
+
+@OptIn(ExperimentalMaterial3AdaptiveApi::class)
+@Composable
+fun SampleListDetailPaneScaffoldWithPredictiveBackFull() {
+    // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_with_pb_full]
+    val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
+    val customScaffoldDirective = customPaneScaffoldDirective(currentWindowAdaptiveInfo())
+    val scope = rememberCoroutineScope()
+
+    ThreePaneScaffoldPredictiveBackHandler(
+        navigator = scaffoldNavigator,
+        backBehavior = BackNavigationBehavior.PopUntilContentChange
+    )
 
     ListDetailPaneScaffold(
-        directive = navigator.scaffoldDirective,
-        value = navigator.scaffoldValue,
+        directive = customScaffoldDirective,
+        scaffoldState = scaffoldNavigator.scaffoldState,
         listPane = {
             AnimatedPane {
                 MyList(
                     onItemClick = { item ->
                         // Navigate to the detail pane with the passed item
-                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
+                        scope.launch {
+                            scaffoldNavigator.navigateTo(
+                                ListDetailPaneScaffoldRole.Detail,
+                                item
+                            )
+                        }
                     },
                 )
             }
         },
         detailPane = {
             AnimatedPane {
                 // Show the detail pane content if selected item is available
-                navigator.currentDestination?.content?.let {
+                scaffoldNavigator.currentDestination?.contentKey?.let {
                     MyDetails(it)
                 }
             }
         },
     )
-// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
 }
 
+fun customPaneScaffoldDirective(currentWindowAdaptiveInfo: WindowAdaptiveInfo): PaneScaffoldDirective {
+    val horizontalPartitions = when {
+        currentWindowAdaptiveInfo.windowSizeClass.isWidthAtLeastBreakpoint(
+            WIDTH_DP_EXPANDED_LOWER_BOUND
+        ) -> 3
+        currentWindowAdaptiveInfo.windowSizeClass.isWidthAtLeastBreakpoint(
+            WIDTH_DP_MEDIUM_LOWER_BOUND
+        ) -> 2
+        else -> 1
+    }
+
+    return PaneScaffoldDirective(
+        maxHorizontalPartitions = horizontalPartitions,
+        horizontalPartitionSpacerSize = 16.dp,
+        maxVerticalPartitions = 1,
+        verticalPartitionSpacerSize = 8.dp,
+        defaultPanePreferredWidth = 320.dp,
+        excludedBounds = emptyList()
+    )
+}
+// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_with_pb_full]
 @Composable
 fun MyList(
     onItemClick: (MyItem) -> Unit,