feat(TransferAdvancedSettings): Make sure only the setting value is r…

…ecomposed when it changes
Infomaniak · Oct 22, 2024 · acde99a · acde99a
1 parent 9b09797
commit acde99a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 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
@@ -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/...iak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt b/...iak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSetting.kt
@@ -23,44 +23,51 @@ 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
 
 @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
 private fun TransferTypeButtonsPreview() {
     SwissTransferTheme {
         Surface {
             TransferAdvancedSetting(
-                TransferAdvancedSettingType.VALIDITY_DURATION,
-                { ValidityPeriodOption.THIRTY.title() },
-                onClick = {})
+                settingType = TransferAdvancedSettingType.VALIDITY_DURATION,
+                selectedSetting = { ValidityPeriodOption.THIRTY },
+                onClick = {},
+            )
         }
     }
 }
diff --git a/...ak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferAdvancedSettings.kt b/...ak/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<TransferAdvancedOptionsEnum>, onClick: () -> Unit) {
-    val selectedOptionValues by rememberSaveable { mutableStateOf(initialSelectedOptionValues) }
-
-    SwissTransferCard {
+fun TransferAdvancedSettings(states: () -> List<TransferAdvancedOptionsEnum>, 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)
         }
     }
 }