Merge pull request #598 from kiwicom/pull-to-refresh

Rework catalog's demo to M3's PullToRefresh & fix M3 surface color mappings

Author: hrach

catalog/build.gradle.kts

@@ -137,7 +137,6 @@ dependencies {
     implementation(libs.compose.animation)
     implementation(libs.compose.foundation)
     implementation(libs.compose.layout)
-    implementation(libs.compose.material) // pull-refresh, when available in M3, migrate
     implementation(libs.compose.material3)
     implementation(libs.compose.materialIconsExtended)
     implementation(libs.compose.navigation)

catalog/src/main/java/kiwi/orbit/compose/catalog/screens/TopAppBarScreensLarge.kt

@@ -6,15 +6,13 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.pullrefresh.PullRefreshIndicator
-import androidx.compose.material.pullrefresh.pullRefresh
-import androidx.compose.material.pullrefresh.rememberPullRefreshState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
+import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -40,7 +38,6 @@ import kiwi.orbit.compose.ui.controls.TopAppBarLarge
 import kiwi.orbit.compose.ui.controls.TopAppBarScrollBehavior
 import kiwi.orbit.compose.ui.foundation.ContentEmphasis
 import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
 
 @Composable
 internal fun TopAppBarLargeScreen(
@@ -202,28 +199,26 @@ internal fun TopAppBarLargeCustomContentScreen(
     )
 }
 
-@OptIn(ExperimentalMaterialApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun TopAppBarLargePullRefreshScreen(
     onNavigateUp: () -> Unit,
 ) {
-    val refreshScope = rememberCoroutineScope()
-    var refreshing by rememberSaveable { mutableStateOf(false) }
     var i by rememberSaveable { mutableIntStateOf(0) }
 
-    fun refresh() = refreshScope.launch {
-        refreshing = true
-        delay(1500)
-        i += 1
-        refreshing = false
+    val pullRefreshState = rememberPullToRefreshState()
+    if (pullRefreshState.isRefreshing) {
+        LaunchedEffect(Unit) {
+            delay(1500)
+            i += 1
+            pullRefreshState.endRefresh()
+        }
     }
-
     val scrollBehavior = TopAppBarScrollBehavior.exitUntilCollapsed()
-    val pullRefreshState = rememberPullRefreshState(refreshing, ::refresh)
 
     Scaffold(
         modifier = Modifier
-            .pullRefresh(pullRefreshState)
+            .nestedScroll(pullRefreshState.nestedScrollConnection)
             .nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             TopAppBarLarge(
@@ -236,13 +231,10 @@ internal fun TopAppBarLargePullRefreshScreen(
         content = {
             Box {
                 CustomContentPlaceholder(it, "Custom content $i")
-                PullRefreshIndicator(
-                    refreshing = refreshing,
+                PullToRefreshContainer(
                     state = pullRefreshState,
                     contentColor = OrbitTheme.colors.primary.normal,
-                    modifier = Modifier
-                        .padding(it)
-                        .align(Alignment.TopCenter),
+                    modifier = Modifier.align(Alignment.TopCenter),
                 )
             }
         },

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/foundation/Colors.kt

@@ -339,6 +339,13 @@ public class Colors(
             outline = surface.strong,
             outlineVariant = surface.normal,
             scrim = surface.strong,
+            surfaceBright = Color.Unspecified,
+            surfaceDim = Color.Unspecified,
+            surfaceContainerHighest = surface.main,
+            surfaceContainerHigh = surface.main,
+            surfaceContainer = surface.main,
+            surfaceContainerLow = surface.main,
+            surfaceContainerLowest = surface.main,
         )
 }