From acde99ab466c1de3d73117cc284545f6df99540f Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 22 Oct 2024 16:33:18 +0200 Subject: [PATCH] feat(TransferAdvancedSettings): Make sure only the setting value is recomposed when it changes --- .../ui/components/SharpRippleButton.kt | 5 +++-- .../components/TransferAdvancedSetting.kt | 21 ++++++++++++------- .../components/TransferAdvancedSettings.kt | 17 ++++++++------- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt index c38135f6a..14cd93767 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt @@ -33,7 +33,8 @@ fun SharpRippleButton( modifier: Modifier = Modifier, isSelected: () -> Boolean = { false }, onClick: () -> Unit, - content: @Composable RowScope.() -> Unit, + contentPadding: PaddingValues = PaddingValues(0.dp), + content: @Composable (RowScope.() -> Unit), ) { val colors = if (isSelected()) { ButtonDefaults.textButtonColors( @@ -52,6 +53,6 @@ fun SharpRippleButton( shape = CustomShapes.NONE, onClick = onClick, content = content, - contentPadding = PaddingValues(0.dp), + contentPadding = contentPadding, ) } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt index bbefecbc9..5dda79446 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt @@ -23,13 +23,14 @@ import androidx.compose.material3.Icon import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview +import com.infomaniak.swisstransfer.ui.components.SharpRippleButton import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons import com.infomaniak.swisstransfer.ui.images.icons.ChevronRightSmall import com.infomaniak.swisstransfer.ui.screen.main.settings.ValidityPeriodOption +import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.TransferAdvancedOptionsEnum import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @@ -37,20 +38,25 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @Composable fun TransferAdvancedSetting( settingType: TransferAdvancedSettingType, - selectedValue: @Composable () -> String, + selectedSetting: () -> TransferAdvancedOptionsEnum, onClick: () -> Unit, ) { - Row(Modifier.padding(Margin.Medium), verticalAlignment = Alignment.CenterVertically) { + SharpRippleButton(onClick = onClick, contentPadding = PaddingValues(horizontal = Margin.Large, vertical = Margin.Medium)) { Icon(modifier = Modifier.size(Dimens.SmallIconSize), imageVector = settingType.buttonIcon, contentDescription = null) Spacer(modifier = Modifier.width(Margin.Small)) Text(text = stringResource(settingType.buttonText), style = SwissTransferTheme.typography.bodySmallMedium) Spacer(modifier = Modifier.weight(1.0f)) - Text(text = selectedValue(), style = SwissTransferTheme.typography.bodySmallRegular) + SettingValue(selectedSetting) Spacer(modifier = Modifier.width(Margin.Small)) Icon(modifier = Modifier.size(Dimens.SmallIconSize), imageVector = AppIcons.ChevronRightSmall, contentDescription = null) } } +@Composable +private fun SettingValue(selectedSetting: () -> TransferAdvancedOptionsEnum) { + Text(text = selectedSetting().title(), style = SwissTransferTheme.typography.bodySmallRegular) +} + @Preview(name = "Light") @Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL) @Composable @@ -58,9 +64,10 @@ private fun TransferTypeButtonsPreview() { SwissTransferTheme { Surface { TransferAdvancedSetting( - TransferAdvancedSettingType.VALIDITY_DURATION, - { ValidityPeriodOption.THIRTY.title() }, - onClick = {}) + settingType = TransferAdvancedSettingType.VALIDITY_DURATION, + selectedSetting = { ValidityPeriodOption.THIRTY }, + onClick = {}, + ) } } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSettings.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSettings.kt index 2427b1b10..27b3d8643 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSettings.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSettings.kt @@ -19,11 +19,13 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.component import android.content.res.Configuration import androidx.annotation.StringRes +import androidx.compose.foundation.layout.padding import androidx.compose.material3.Surface import androidx.compose.runtime.Composable +import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.tooling.preview.Preview import com.infomaniak.swisstransfer.R @@ -38,16 +40,15 @@ import com.infomaniak.swisstransfer.ui.screen.main.settings.EmailLanguageOption import com.infomaniak.swisstransfer.ui.screen.main.settings.ValidityPeriodOption import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.PasswordTransferOption import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.TransferAdvancedOptionsEnum +import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @Composable -fun TransferAdvancedSettings(initialSelectedOptionValues: () -> List, onClick: () -> Unit) { - val selectedOptionValues by rememberSaveable { mutableStateOf(initialSelectedOptionValues) } - - SwissTransferCard { +fun TransferAdvancedSettings(states: () -> List, onClick: () -> Unit) { + SwissTransferCard(modifier = Modifier.padding(Margin.Medium)) { TransferAdvancedSettingType.entries.forEach { settingType -> - val transferAdvancedOption = selectedOptionValues()[settingType.ordinal] - TransferAdvancedSetting(settingType, transferAdvancedOption.title, onClick) + val title by remember { derivedStateOf { states()[settingType.ordinal] } } + TransferAdvancedSetting(settingType, { title }, onClick) } } }