chore: replace deprecated pager (#2050)

Co-authored-by: Michał Saleniuk <saleniuk@gmail.com> Co-authored-by: Michał Saleniuk <30429749+saleniuk@users.noreply.github.com> Co-authored-by: Vitor Hugo Schwaab <vitor@schwaab.dev>
wireapp · Aug 3, 2023 · 5d8ad2e · 5d8ad2e
1 parent e89102c
commit 5d8ad2e
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 77 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -113,11 +113,9 @@ dependencies {
     ksp(libs.compose.destinations.ksp)
 
     // Accompanist
-    implementation(libs.accompanist.pager)
     implementation(libs.accompanist.systemUI)
     implementation(libs.accompanist.placeholder)
     implementation(libs.accompanist.navAnimation)
-    implementation(libs.accompanist.indicator)
     implementation(libs.accompanist.flowLayout)
 
     implementation(libs.androidx.paging3)

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/login/LoginScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/login/LoginScreen.kt
@@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -51,9 +52,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.window.DialogProperties
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.rememberPagerState
+import androidx.compose.foundation.pager.HorizontalPager
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootNavGraph
 import com.wire.android.R
@@ -145,7 +144,6 @@ private fun LoginContent(
 
 @OptIn(
     ExperimentalComposeUiApi::class,
-    ExperimentalPagerApi::class,
     ExperimentalFoundationApi::class,
 )
 @Composable
@@ -161,7 +159,10 @@ private fun MainLoginContent(
     val scope = rememberCoroutineScope()
     val scrollState = rememberScrollState()
     val initialPageIndex = if (ssoLoginResult == null) LoginTabItem.EMAIL.ordinal else LoginTabItem.SSO.ordinal
-    val pagerState = rememberPagerState(initialPage = initialPageIndex)
+    val pagerState = rememberPagerState(
+        initialPage = initialPageIndex,
+        pageCount = { LoginTabItem.values().size }
+    )
 
     val ssoDisabledWithProxyDialogState = rememberVisibilityState<FeatureDisabledWithProxyDialogState>()
     FeatureDisabledWithProxyDialogContent(dialogState = ssoDisabledWithProxyDialogState)
@@ -215,7 +216,6 @@ private fun MainLoginContent(
         CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
             HorizontalPager(
                 state = pagerState,
-                count = LoginTabItem.values().size,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(internalPadding)
@@ -236,7 +236,6 @@ private fun MainLoginContent(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun LoginErrorDialog(
     error: LoginError,

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/welcome/WelcomeScreen.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/welcome/WelcomeScreen.kt
@@ -62,10 +62,9 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.PagerState
-import com.google.accompanist.pager.rememberPagerState
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootNavGraph
 import com.wire.android.R
@@ -174,7 +173,7 @@ private fun WelcomeContent(
                             enterpriseDisabledWithProxyDialogState.show(
                                 enterpriseDisabledWithProxyDialogState.savedState ?: FeatureDisabledWithProxyDialogState(
                                     R.string.create_team_not_supported_dialog_description,
-                                state.teams
+                                    state.teams
                                 )
                             )
                         } else {
@@ -204,7 +203,7 @@ private fun WelcomeContent(
     }
 }
 
-@OptIn(ExperimentalPagerApi::class, ExperimentalFoundationApi::class)
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 private fun WelcomeCarousel() {
     val delay = integerResource(id = R.integer.welcome_carousel_item_time_ms)
@@ -216,7 +215,7 @@ private fun WelcomeCarousel() {
     // list when we reach the end while keeping swipe capability both ways and from the user side it looks like an infinite loop both ways
     val circularItemsList = listOf<CarouselPageData>().plus(items.last()).plus(items).plus(items.first())
     val initialPage = 1
-    val pagerState = rememberPagerState(initialPage = initialPage)
+    val pagerState = rememberPagerState(initialPage = initialPage, pageCount = { circularItemsList.size })
 
     LaunchedEffect(pagerState) {
         autoScrollCarousel(pagerState, initialPage, circularItemsList, delay.toLong())
@@ -225,7 +224,6 @@ private fun WelcomeCarousel() {
     CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
         HorizontalPager(
             state = pagerState,
-            count = circularItemsList.size,
             modifier = Modifier.fillMaxWidth()
         ) { page ->
             val (pageIconResId, pageText) = circularItemsList[page]
@@ -234,7 +232,7 @@ private fun WelcomeCarousel() {
     }
 }
 
-@OptIn(ExperimentalPagerApi::class, ExperimentalCoroutinesApi::class)
+@OptIn(ExperimentalCoroutinesApi::class, ExperimentalFoundationApi::class)
 private suspend fun autoScrollCarousel(
     pageState: PagerState,
     initialPage: Int,
@@ -261,8 +259,8 @@ private suspend fun autoScrollCarousel(
 
             else -> flow { emit(CarouselScrollData(scrollToPage = pageState.currentPage + 1, animate = true)) }.onEach {
                 delay(
-                delay
-            )
+                    delay
+                )
             }
         }
     }.collect { (scrollToPage, animate) ->

diff --git a/...src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantsTiles.kt b/...src/main/kotlin/com/wire/android/ui/calling/ongoing/participantsview/ParticipantsTiles.kt
@@ -21,12 +21,15 @@
 package com.wire.android.ui.calling.ongoing.participantsview
 
 import android.view.View
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.VerticalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
@@ -40,9 +43,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.VerticalPager
-import com.google.accompanist.pager.rememberPagerState
 import com.wire.android.ui.calling.model.UICallParticipant
 import com.wire.android.ui.calling.ongoing.participantsview.gridview.GroupCallGrid
 import com.wire.android.ui.calling.ongoing.participantsview.horizentalview.CallingHorizontalView
@@ -51,7 +51,7 @@ import com.wire.android.ui.common.dimensions
 import com.wire.android.ui.theme.wireDimensions
 import com.wire.kalium.logic.data.user.UserId
 
-@OptIn(ExperimentalPagerApi::class)
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun VerticalCallingPager(
     participants: List<UICallParticipant>,
@@ -68,11 +68,11 @@ fun VerticalCallingPager(
             .fillMaxWidth()
             .height(contentHeight)
     ) {
-        val pagerState = rememberPagerState()
-        val pagesCount = pagesCount(participants.size)
+        val pagerState = rememberPagerState(
+            pageCount = { pagesCount(participants.size) }
+        )
         Box {
             VerticalPager(
-                count = pagesCount,
                 state = pagerState,
                 modifier = Modifier.fillMaxSize()
             ) { pageIndex ->
@@ -116,7 +116,7 @@ fun VerticalCallingPager(
                 }
             }
             // we don't need to display the indicator if we have one page
-            if (pagesCount > 1) {
+            if (pagesCount(participants.size) > 1) {
                 Surface(
                     shape = RoundedCornerShape(dimensions().corner16x),
                     modifier = Modifier

diff --git a/...ain/kotlin/com/wire/android/ui/calling/ongoing/participantsview/VerticalPagerIndicator.kt b/...ain/kotlin/com/wire/android/ui/calling/ongoing/participantsview/VerticalPagerIndicator.kt
@@ -20,6 +20,7 @@
 
 package com.wire.android.ui.calling.ongoing.participantsview
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
@@ -28,6 +29,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -39,16 +42,13 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.PagerState
-import com.google.accompanist.pager.rememberPagerState
 import com.wire.android.ui.common.colorsScheme
 import com.wire.android.ui.common.dimensions
 
 /**
  * Updating VerticalPagerIndicator from com.google.accompanist.pager to have the ability to add a border to the pager indicator
  */
-@ExperimentalPagerApi
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun VerticalPagerIndicator(
     pagerState: PagerState,
@@ -87,7 +87,7 @@ fun VerticalPagerIndicator(
         Box(
             Modifier
                 .offset {
-                    val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffset)
+                    val scrollPosition = (pagerState.currentPage + pagerState.currentPageOffsetFraction)
                         .coerceIn(
                             0f,
                             (pagerState.pageCount - 1)
@@ -108,12 +108,12 @@ fun VerticalPagerIndicator(
     }
 }
 
-@OptIn(ExperimentalPagerApi::class)
+@OptIn(ExperimentalFoundationApi::class)
 @Preview
 @Composable
 fun PreviewVerticalPagerIndicator() {
     VerticalPagerIndicator(
         modifier = Modifier.padding(dimensions().spacing4x),
-        pagerState = rememberPagerState()
+        pagerState = rememberPagerState(pageCount = { 3 })
     )
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/WireTabRow.kt b/app/src/main/kotlin/com/wire/android/ui/common/WireTabRow.kt
@@ -21,6 +21,7 @@
 package com.wire.android.ui.common
 
 import androidx.annotation.StringRes
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -38,8 +39,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.PagerState
+import androidx.compose.foundation.pager.PagerState
 import com.wire.android.ui.home.conversations.messagedetails.MessageDetailsTabItem
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireTypography
@@ -104,10 +104,10 @@ private fun WireIndicator(modifier: Modifier = Modifier) {
     )
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Suppress("MagicNumber")
-@OptIn(ExperimentalPagerApi::class)
 fun PagerState.calculateCurrentTab() = // change the tab if we go over half the offset
-    if (this.currentPageOffset.absoluteValue > 0.5f) this.targetPage else this.currentPage
+    if (this.currentPageOffsetFraction.absoluteValue > 0.5f) this.targetPage else this.currentPage
 
 interface TabItem {
     @get:StringRes

diff --git a/...n/kotlin/com/wire/android/ui/home/conversations/details/GroupConversationDetailsScreen.kt b/...n/kotlin/com/wire/android/ui/home/conversations/details/GroupConversationDetailsScreen.kt
@@ -28,6 +28,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -50,9 +52,6 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.rememberPagerState
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootNavGraph
 import com.ramcosta.composedestinations.result.NavResult
@@ -223,7 +222,6 @@ fun GroupConversationDetailsScreen(
 @OptIn(
     ExperimentalComposeUiApi::class,
     ExperimentalMaterial3Api::class,
-    ExperimentalPagerApi::class,
     ExperimentalFoundationApi::class
 )
 @Composable
@@ -247,7 +245,7 @@ private fun GroupConversationDetailsContent(
     val resources = LocalContext.current.resources
     val lazyListStates: List<LazyListState> = GroupConversationDetailsTabItem.values().map { rememberLazyListState() }
     val initialPageIndex = GroupConversationDetailsTabItem.OPTIONS.ordinal
-    val pagerState = rememberPagerState(initialPage = initialPageIndex)
+    val pagerState = rememberPagerState(initialPage = initialPageIndex, pageCount = { GroupConversationDetailsTabItem.values().size })
     val maxAppBarElevation = MaterialTheme.wireDimensions.topBarShadowElevation
     val currentTabState by remember { derivedStateOf { pagerState.calculateCurrentTab() } }
     val elevationState by remember { derivedStateOf { lazyListStates[currentTabState].topBarElevation(maxAppBarElevation) } }
@@ -317,7 +315,6 @@ private fun GroupConversationDetailsContent(
         CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
             HorizontalPager(
                 state = pagerState,
-                count = GroupConversationDetailsTabItem.values().size,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(internalPadding)

diff --git a/...main/kotlin/com/wire/android/ui/home/conversations/messagedetails/MessageDetailsScreen.kt b/...main/kotlin/com/wire/android/ui/home/conversations/messagedetails/MessageDetailsScreen.kt
@@ -28,6 +28,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
@@ -47,9 +49,6 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.ExperimentalPagerApi
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.rememberPagerState
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootNavGraph
 import com.wire.android.R
@@ -105,7 +104,6 @@ fun MessageDetailsScreen(
 }
 
 @OptIn(
-    ExperimentalPagerApi::class,
     ExperimentalComposeUiApi::class,
     ExperimentalFoundationApi::class
 )
@@ -116,20 +114,20 @@ private fun MessageDetailsScreenContent(
     onReactionsLearnMore: () -> Unit,
     onReadReceiptsLearnMore: () -> Unit
 ) {
+    val tabItems = provideMessageDetailsTabItems(
+        messageDetailsState = messageDetailsState,
+        isSelfMessage = messageDetailsState.isSelfMessage
+    )
     val scope = rememberCoroutineScope()
     val lazyListStates: List<LazyListState> = MessageDetailsTab.values().map { rememberLazyListState() }
     val initialPageIndex = MessageDetailsTab.REACTIONS.ordinal
-    val pagerState = rememberPagerState(initialPage = initialPageIndex)
+    val pagerState = rememberPagerState(initialPage = initialPageIndex, pageCount = { tabItems.size })
     val maxAppBarElevation = MaterialTheme.wireDimensions.topBarShadowElevation
     val currentTabState by remember { derivedStateOf { pagerState.calculateCurrentTab() } }
     val elevationState by remember { derivedStateOf { lazyListStates[currentTabState].topBarElevation(maxAppBarElevation) } }
 
     val snackbarHostState = remember { SnackbarHostState() }
 
-    val tabItems = provideMessageDetailsTabItems(
-        messageDetailsState = messageDetailsState,
-        isSelfMessage = messageDetailsState.isSelfMessage
-    )
     Scaffold(
         topBar = {
             WireCenterAlignedTopAppBar(
@@ -162,7 +160,6 @@ private fun MessageDetailsScreenContent(
         CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
             HorizontalPager(
                 state = pagerState,
-                count = tabItems.size,
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(internalPadding)