List and anim

biz/detail/src/main/kotlin/io/goooler/demoapp/detail/ui/DetailPage.kt → 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) {}
 }