List and anim

Author: Goooler

biz/detail/src/main/kotlin/io/goooler/demoapp/detail/ui/DetailPage.kt renamed to biz/detail/src/main/kotlin/io/goooler/demoapp/detail/ui/DetailScreen.kt

@@ -1,17 +1,19 @@
 package io.goooler.demoapp.detail.ui
 
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.spring
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Share
 import androidx.compose.material.icons.filled.Star
@@ -20,6 +22,7 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.pulltorefresh.PullToRefreshContainer
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@@ -28,12 +31,13 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.coerceAtLeast
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import io.goooler.demoapp.common.util.getQuantityString
@@ -50,7 +54,6 @@ fun DetailPageWithSwipeRefresh(
 ) {
   val model by vm.repoDetailModel.collectAsState()
   val isRefreshing by vm.isRefreshing.collectAsState()
-
   val refreshState = rememberPullToRefreshState()
 
   if (refreshState.isRefreshing) {
@@ -63,29 +66,45 @@ fun DetailPageWithSwipeRefresh(
     }
   }
 
-  Box(modifier.nestedScroll(refreshState.nestedScrollConnection)) {
-    DetailPage(model = model, onForkClick = vm::fork)
+  Surface(
+    color = MaterialTheme.colorScheme.surface,
+    modifier = modifier.padding(horizontal = 10.dp),
+  ) {
+    Box(Modifier.nestedScroll(refreshState.nestedScrollConnection)) {
+      LazyColumn {
+        val models = List(10) { model }
+        items(models) { model ->
+          DetailCard(model = model, onForkClick = vm::fork)
+        }
+      }
 
-    PullToRefreshContainer(
-      modifier = Modifier.align(Alignment.TopCenter),
-      state = refreshState,
-    )
+      PullToRefreshContainer(
+        modifier = Modifier.align(Alignment.TopCenter),
+        state = refreshState,
+      )
+    }
   }
 }
 
 @Composable
-fun DetailPage(
+fun DetailCard(
   model: RepoDetailModel,
   modifier: Modifier = Modifier,
   onForkClick: () -> Unit,
 ) {
-  var isDescExpanded by remember { mutableStateOf(false) }
+  var isDescExpanded by rememberSaveable { mutableStateOf(false) }
+  val extraPadding by animateDpAsState(
+    targetValue = if (isDescExpanded) 20.dp else 0.dp,
+    label = "extraPadding",
+    animationSpec = spring(
+      dampingRatio = Spring.DampingRatioMediumBouncy,
+      stiffness = Spring.StiffnessLow
+    )
+  )
 
   Column(
     modifier = modifier
-      .padding(8.dp)
-      .fillMaxSize()
-      .verticalScroll(rememberScrollState()),
+      .padding(extraPadding.coerceAtLeast(0.dp)),
   ) {
     Text(
       text = model.fullName,
@@ -95,17 +114,20 @@ fun DetailPage(
     Spacer(modifier = Modifier.height(5.dp))
     Text(
       text = model.description,
-      style = MaterialTheme.typography.bodyMedium,
-      maxLines = if (isDescExpanded) Int.MAX_VALUE else 2,
+      style = MaterialTheme.typography.bodyLarge,
+      maxLines = if (isDescExpanded) Int.MAX_VALUE else 1,
       modifier = Modifier.clickable {
         isDescExpanded = !isDescExpanded
       },
     )
     Spacer(modifier = Modifier.height(5.dp))
     Row {
-      Button(onClick = {
-        R.plurals.detail_star_count_tip.getQuantityString(model.starsCount)?.showToast()
-      }) {
+      Button(
+        modifier = Modifier.weight(1f),
+        onClick = {
+          R.plurals.detail_star_count_tip.getQuantityString(model.starsCount)?.showToast()
+        },
+      ) {
         Icon(
           Icons.Filled.Star,
           contentDescription = "Star",
@@ -115,7 +137,10 @@ fun DetailPage(
         Text(model.starsCount.toString())
       }
       Spacer(modifier = Modifier.width(20.dp))
-      Button(onClick = onForkClick) {
+      Button(
+        modifier = Modifier.weight(1f),
+        onClick = onForkClick,
+      ) {
         Icon(
           Icons.Filled.Share,
           contentDescription = "Fork",
@@ -143,5 +168,5 @@ private fun DetailPagePreview() {
     1,
     2,
   )
-  DetailPage(model) {}
+  DetailCard(model) {}
 }