Switch from MD2 PullRefresh to MD3 PullToRefresh

Ashinch · Oct 9, 2024 · b1ca5e0 · b1ca5e0
1 parent 234bd1a
commit b1ca5e0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 43 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/feeds/FeedsPage.kt
@@ -1,18 +1,12 @@
 package me.ash.reader.ui.page.home.feeds
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.animation.core.LinearEasing
-import androidx.compose.animation.core.animateFloat
-import androidx.compose.animation.core.infiniteRepeatable
-import androidx.compose.animation.core.rememberInfiniteTransition
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
@@ -23,22 +17,20 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.KeyboardArrowRight
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material.icons.rounded.Add
-import androidx.compose.material.icons.rounded.Refresh
 import androidx.compose.material.icons.rounded.UnfoldLess
 import androidx.compose.material.icons.rounded.UnfoldMore
-import androidx.compose.material.pullrefresh.PullRefreshIndicator
-import androidx.compose.material.pullrefresh.pullRefresh
-import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -53,7 +45,6 @@ import androidx.compose.runtime.snapshots.SnapshotStateMap
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.stringResource
@@ -96,7 +87,7 @@ import kotlin.collections.set
 import kotlin.math.ln
 
 @OptIn(
-    ExperimentalMaterialApi::class
+    ExperimentalMaterial3Api::class
 )
 @Composable
 fun FeedsPage(
@@ -137,15 +128,16 @@ fun FeedsPage(
 
     val owner = LocalLifecycleOwner.current
 
-    val syncingScope = rememberCoroutineScope()
     var isSyncing by remember { mutableStateOf(false) }
-
-    fun doSync() = syncingScope.launch {
+    val syncingState = rememberPullToRefreshState()
+    val syncingScope = rememberCoroutineScope()
+    val doSync:() -> Unit = {
         isSyncing = true
-        homeViewModel.sync()
-    }
+        syncingScope.launch {
 
-    val syncingPullRefreshState = rememberPullRefreshState(isSyncing, ::doSync)
+            homeViewModel.sync()
+        }
+    }
 
     DisposableEffect(owner) {
         homeViewModel.syncWorkLiveData.observe(owner) { workInfoList ->
@@ -156,8 +148,6 @@ fun FeedsPage(
         onDispose { homeViewModel.syncWorkLiveData.removeObservers(owner) }
     }
 
-    val infiniteTransition = rememberInfiniteTransition()
-
     val feedBadgeAlpha by remember { derivedStateOf { (ln(groupListTonalElevation.value + 1.4f) + 2f) / 100f } }
     val groupAlpha by remember { derivedStateOf { groupListTonalElevation.value.dp.alphaLN(weight = 1.2f) } }
     val groupIndicatorAlpha by remember {
@@ -240,8 +230,13 @@ fun FeedsPage(
             }
         },
         content = {
-            Box(Modifier.pullRefresh(syncingPullRefreshState)) {
+            PullToRefreshBox(
+                state=syncingState,
+                isRefreshing = isSyncing,
+                onRefresh = doSync
+            ) {
                 LazyColumn(
+                    modifier=Modifier.fillMaxSize(),
                     state = listState
                 ) {
                     item {
@@ -390,8 +385,6 @@ fun FeedsPage(
                         Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
                     }
                 }
-
-                PullRefreshIndicator(isSyncing, syncingPullRefreshState, Modifier.align(Alignment.TopCenter))
             }
         },
         bottomBar = {

diff --git a/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt b/app/src/main/java/me/ash/reader/ui/page/home/flow/FlowPage.kt
@@ -1,7 +1,6 @@
 package me.ash.reader.ui.page.home.flow
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
@@ -11,15 +10,14 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material.icons.rounded.DoneAll
 import androidx.compose.material.icons.rounded.Search
-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.MaterialTheme
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -29,8 +27,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.platform.LocalContext
@@ -67,7 +63,7 @@ import me.ash.reader.ui.page.common.RouteName
 import me.ash.reader.ui.page.home.HomeViewModel
 
 @OptIn(
-    ExperimentalMaterialApi::class,
+    ExperimentalMaterial3Api::class,
 )
 @Composable
 fun FlowPage(
@@ -101,16 +97,16 @@ fun FlowPage(
 
     val owner = LocalLifecycleOwner.current
 
-    val syncingScope = rememberCoroutineScope()
     var isSyncing by remember { mutableStateOf(false) }
-
-    fun doSync() = syncingScope.launch {
+    val syncingState = rememberPullToRefreshState()
+    val syncingScope = rememberCoroutineScope()
+    val doSync: () -> Unit = {
         isSyncing = true
-        flowViewModel.sync()
+        syncingScope.launch {
+            flowViewModel.sync()
+        }
     }
 
-    val syncingPullRefreshState = rememberPullRefreshState(isSyncing, ::doSync)
-
     DisposableEffect(owner) {
         homeViewModel.syncWorkLiveData.observe(owner) { workInfoList ->
             workInfoList.let {
@@ -257,8 +253,11 @@ fun FlowPage(
             }
         },
         content = {
-            Box(Modifier.pullRefresh(syncingPullRefreshState)) {
-                var showMenu by remember { mutableStateOf(false) }
+            PullToRefreshBox(
+                state = syncingState,
+                isRefreshing = isSyncing,
+                onRefresh = doSync
+            ) {
                 LazyColumn(
                     modifier = Modifier.fillMaxSize(),
                     state = listState,
@@ -349,8 +348,6 @@ fun FlowPage(
                         Spacer(modifier = Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
                     }
                 }
-
-                PullRefreshIndicator(isSyncing, syncingPullRefreshState, Modifier.align(Alignment.TopCenter))
             }
         },
         bottomBar = {