Clean up Expandable Block

This commit is contained in:
Iamlooker 2022-06-07 15:14:56 +05:30
parent b1b9c5adc4
commit b3c85e2708

View File

@ -1,35 +1,16 @@
package com.looker.droidify.ui.compose.components package com.looker.droidify.ui.compose.components
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement import androidx.compose.material3.*
import androidx.compose.foundation.layout.Column import androidx.compose.runtime.*
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.looker.droidify.R import com.looker.droidify.R
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@ -42,20 +23,22 @@ fun ExpandableBlock(
content: @Composable ColumnScope.() -> Unit content: @Composable ColumnScope.() -> Unit
) { ) {
var expanded by rememberSaveable { mutableStateOf(preExpanded) } var expanded by rememberSaveable { mutableStateOf(preExpanded) }
val backgroundColor by animateColorAsState(
targetValue = if (expanded) MaterialTheme.colorScheme.surface
else MaterialTheme.colorScheme.background
)
Surface( Surface(
modifier = Modifier.animateContentSize(), modifier = Modifier.animateContentSize(),
shape = MaterialTheme.shapes.large, shape = MaterialTheme.shapes.large,
onClick = { expanded = !expanded }, onClick = { expanded = !expanded },
border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline), color = backgroundColor,
color = MaterialTheme.colorScheme.background tonalElevation = 8.dp
) { ) {
Column(modifier = modifier) { Column(modifier = modifier) {
ExpandableBlockHeader(heading, positive) ExpandableBlockHeader(heading, positive)
AnimatedVisibility( AnimatedVisibility(visible = expanded) {
visible = expanded Column(Modifier.padding(bottom = 16.dp)) {
) {
Column {
content() content()
} }
} }
@ -73,22 +56,18 @@ fun ExpandableBlockHeader(
Spacer(modifier = Modifier.requiredHeight(spacerHeight.dp)) Spacer(modifier = Modifier.requiredHeight(spacerHeight.dp))
if (heading != null) { if (heading != null) {
Row( Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier modifier = Modifier
.height(36.dp) .padding(16.dp)
.padding(horizontal = 10.dp) .fillMaxWidth(),
.fillMaxWidth() horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) { ) {
CompositionLocalProvider( CompositionLocalProvider(
LocalContentColor provides if (positive) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary LocalContentColor provides if (positive) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.error
) { ) {
Text( Text(
modifier = Modifier.weight(1f),
text = heading, text = heading,
style = MaterialTheme.typography.headlineMedium, style = MaterialTheme.typography.titleSmall,
fontSize = 16.sp,
fontWeight = FontWeight.Bold
) )
Icon( Icon(
painter = painterResource(id = R.drawable.ic_arrow_down), painter = painterResource(id = R.drawable.ic_arrow_down),