Feature: add Timeline StickyHeader

Team-Linky · Jul 28, 2024 · 7324159 · 7324159
1 parent 5fa52c8
commit 7324159
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/feature/timeline/src/main/java/com/linky/timeline/TimeLineScreen.kt b/feature/timeline/src/main/java/com/linky/timeline/TimeLineScreen.kt
@@ -1,6 +1,7 @@
 package com.linky.timeline
 
 import androidx.activity.ComponentActivity
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
@@ -179,16 +180,22 @@ private fun TimeLineScreen(
         derivedStateOf { linksPager.loadState.append is LoadState.Loading && linksPager.itemCount > 0 }
     }
 
+    val showHeader by remember(listState) {
+        derivedStateOf { listState.firstVisibleItemIndex < 1 }
+    }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
             .background(MaterialTheme.colors.background),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        TimeLineHeader(
-            sortType = sortType,
-            onChangeSort = onChangeSort,
-        )
+        AnimatedVisibility(visible = showHeader) {
+            TimeLineHeader(
+                sortType = sortType,
+                onChangeSort = onChangeSort,
+            )
+        }
         Box(
             modifier = Modifier.weight(1f),
             contentAlignment = Alignment.TopCenter

diff --git a/feature/timeline/src/main/java/com/linky/timeline/component/TimeLineList.kt b/feature/timeline/src/main/java/com/linky/timeline/component/TimeLineList.kt
@@ -1,11 +1,11 @@
 package com.linky.timeline.component
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
@@ -21,6 +21,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
@@ -65,6 +66,7 @@ import java.time.Instant
 import java.time.LocalDate
 import java.time.ZoneId
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 internal fun TimeLineList(
     modifier: Modifier = Modifier,
@@ -104,17 +106,28 @@ internal fun TimeLineList(
     LazyColumn(
         modifier = modifier,
         state = state,
-        contentPadding = PaddingValues(16.dp)
     ) {
         grouping.forEach { (groupName, groupItems) ->
-            item {
-                LinkyText(
-                    modifier = Modifier.padding(5.dp),
-                    text = groupName,
-                    color = ColorFamilyGray800AndGray400,
-                    fontWeight = FontWeight.Bold,
-                    fontSize = 18.dp
-                )
+            stickyHeader(
+                key = groupName,
+                contentType = "GroupName"
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .background(color = MaterialTheme.colors.background),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    LinkyText(
+                        modifier = Modifier
+                            .padding(5.dp)
+                            .padding(start = 21.dp),
+                        text = groupName,
+                        color = ColorFamilyGray800AndGray400,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 18.dp
+                    )
+                }
             }
             items(
                 items = groupItems,
@@ -125,6 +138,7 @@ internal fun TimeLineList(
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(bottom = 10.dp)
+                        .padding(horizontal = 16.dp)
                         .clickableRipple(enableRipple = false) { onClick.invoke(link) },
                     shape = RoundedCornerShape(12.dp),
                     backgroundColor = ColorFamilyWhiteAndGray999
@@ -165,6 +179,7 @@ internal fun TimeLineList(
                                 )
                             }
                             MenuButton(
+                                key = link.id,
                                 onEdit = { onEdit.invoke(link) },
                                 onRemove = { onRemove.invoke(link.id!!) }
                             )
@@ -243,7 +258,9 @@ internal fun TimeLineList(
                                         contentDescription = "copy",
                                         modifier = Modifier
                                             .weight(0.1f)
-                                            .clickableRipple(radius = 10.dp) { onCopyLink.invoke(link) },
+                                            .clickableRipple(radius = 10.dp) {
+                                                onCopyLink.invoke(link)
+                                            },
                                     )
                                 }
                             }
@@ -269,6 +286,7 @@ internal fun TimeLineList(
 
 @Composable
 private fun RowScope.MenuButton(
+    key: Any?,
     onEdit: () -> Unit,
     onRemove: () -> Unit
 ) {
@@ -282,6 +300,7 @@ private fun RowScope.MenuButton(
         }
     }
     Balloon(
+        key = key,
         modifier = Modifier
             .align(Alignment.CenterVertically)
             .padding(end = 10.dp),

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -21,17 +21,13 @@ androidxPaging = "3.3.0"
 androidxAppCompat = "1.6.1"
 androidxRoom = "2.6.1"
 androidxSplashScreen = "1.0.0"
-accompanistPager = "0.30.1"
 systemUiController = "0.28.0"
 flowLayout = "0.31.0-alpha"
 dataStore = "1.1.1"
 coroutine = "1.8.0"
-okhttp = "4.12.0"
-retrofit = "2.11.0"
 moshi = "1.14.0"
-moshiConverter = "2.9.0"
 coil = "2.6.0"
-balloon = "1.5.4"
+balloon = "1.6.6"
 json = "20230227"
 orbit = "6.0.0"
 firebaseBom = "33.1.1"