[#484] Use a callback instead of a mutable state for icon button togg…

…le group selection
Orange-OpenSource · Mar 29, 2023 · a6f0abd · a6f0abd
1 parent b9eec73
commit a6f0abd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/app/src/main/java/com/orange/ods/app/ui/components/buttons/icons/ButtonsIconToggleGroup.kt b/app/src/main/java/com/orange/ods/app/ui/components/buttons/icons/ButtonsIconToggleGroup.kt
@@ -19,7 +19,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
@@ -43,7 +42,7 @@ fun ButtonsIconToggleGroup(customizationState: ButtonIconCustomizationState) {
             OdsIconToggleButtonsRowItem(painterResource(id = recipe.iconResId!!), recipe.title)
         }
 
-    val selectedButtonIndex = rememberSaveable { mutableStateOf(0) }
+    val selectedIndexState = rememberSaveable { mutableStateOf(0) }
 
     with(customizationState) {
         Column(
@@ -53,7 +52,8 @@ fun ButtonsIconToggleGroup(customizationState: ButtonIconCustomizationState) {
         ) {
             ToggleButtonsRow(
                 iconToggleButtons = iconToggleButtons,
-                selectedButtonIndex = selectedButtonIndex,
+                selectedIndex = selectedIndexState.value,
+                onSelectedIndexChange = { index -> selectedIndexState.value = index },
                 toggleCount = toggleCount.value
             )
 
@@ -62,7 +62,8 @@ fun ButtonsIconToggleGroup(customizationState: ButtonIconCustomizationState) {
             InvertedBackgroundColumn {
                 ToggleButtonsRow(
                     iconToggleButtons = iconToggleButtons,
-                    selectedButtonIndex = selectedButtonIndex,
+                    selectedIndex = selectedIndexState.value,
+                    onSelectedIndexChange = { index -> selectedIndexState.value = index },
                     toggleCount = toggleCount.value,
                     displaySurface = displaySurface
                 )
@@ -77,7 +78,7 @@ fun ButtonsIconToggleGroup(customizationState: ButtonIconCustomizationState) {
                         TechnicalText(text = "  ),")
                     }
                     TechnicalText(text = "),")
-                    TechnicalText(text = "selectedButtonIndex = ${selectedButtonIndex.value}")
+                    TechnicalText(text = "selectedButtonIndex = ${selectedIndexState.value}")
                 }
             }
         }
@@ -87,7 +88,8 @@ fun ButtonsIconToggleGroup(customizationState: ButtonIconCustomizationState) {
 @Composable
 private fun ToggleButtonsRow(
     iconToggleButtons: List<OdsIconToggleButtonsRowItem>,
-    selectedButtonIndex: MutableState<Int>,
+    selectedIndex: Int,
+    onSelectedIndexChange: (Int) -> Unit,
     toggleCount: Int,
     displaySurface: OdsDisplaySurface = OdsDisplaySurface.Default
 ) {
@@ -100,7 +102,8 @@ private fun ToggleButtonsRow(
     ) {
         OdsIconToggleButtonsRow(
             iconToggleButtons = iconToggleButtons.take(toggleCount),
-            selectedButtonIndex = selectedButtonIndex,
+            selectedIndex = selectedIndex,
+            onSelectedIndexChange = onSelectedIndexChange,
             displaySurface = displaySurface
         )
     }

diff --git a/lib/src/main/java/com/orange/ods/compose/component/button/OdsIconToggleButtonsRow.kt b/lib/src/main/java/com/orange/ods/compose/component/button/OdsIconToggleButtonsRow.kt
@@ -26,7 +26,6 @@ import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -48,7 +47,8 @@ import com.orange.ods.compose.theme.OdsTheme
  * Selecting one option deselects any other.
  *
  * @param iconToggleButtons Contains the buttons to display in the toggle group
- * @param selectedButtonIndex The index of the selected button in [iconToggleButtons] list.
+ * @param selectedIndex The [iconToggleButtons] list index of the selected button.
+ * @param onSelectedIndexChange Callback to be invoked when the selection change.
  * @param modifier optional [Modifier] for this IconToggleButton
  * @param displaySurface optional allow to force the button display on a dark or light
  * surface. By default the appearance applied is based on the system night mode value.
@@ -57,7 +57,8 @@ import com.orange.ods.compose.theme.OdsTheme
 @OdsComponentApi
 fun OdsIconToggleButtonsRow(
     iconToggleButtons: List<OdsIconToggleButtonsRowItem>,
-    selectedButtonIndex: MutableState<Int>,
+    selectedIndex: Int,
+    onSelectedIndexChange: (Int) -> Unit,
     modifier: Modifier = Modifier,
     displaySurface: OdsDisplaySurface = OdsDisplaySurface.Default
 ) {
@@ -72,11 +73,12 @@ fun OdsIconToggleButtonsRow(
     ) {
         iconToggleButtons.forEachIndexed { index, iconToggleButton ->
             IconToggleButtonsRowItem(
+                index = index,
                 iconToggleButton = iconToggleButton,
-                selected = selectedButtonIndex.value == index,
+                selected = selectedIndex == index,
                 displaySurface = displaySurface
-            ) {
-                selectedButtonIndex.value = index
+            ) { clickedButtonIndex ->
+                onSelectedIndexChange(clickedButtonIndex)
             }
             if (index < iconToggleButtons.size) {
                 Divider(
@@ -98,10 +100,11 @@ data class OdsIconToggleButtonsRowItem(
 
 @Composable
 private fun IconToggleButtonsRowItem(
+    index: Int,
     iconToggleButton: OdsIconToggleButtonsRowItem,
     selected: Boolean,
     displaySurface: OdsDisplaySurface,
-    onClick: () -> Unit
+    onClick: (Int) -> Unit
 ) {
     val iconTint by animateColorAsState(buttonToggleIconColor(displaySurface, selected))
     val backgroundAlpha by animateFloatAsState(if (selected) 0.12f else 0f)
@@ -113,7 +116,7 @@ private fun IconToggleButtonsRowItem(
                     .copy(alpha = backgroundAlpha)
             )
             .padding(12.dp)
-            .clickable(interactionSource = remember { DisabledInteractionSource() }, indication = null) { onClick() }
+            .clickable(interactionSource = remember { DisabledInteractionSource() }, indication = null) { onClick(index) }
     ) {
         Icon(
             painter = iconToggleButton.icon,
@@ -156,9 +159,11 @@ private fun PreviewOdsIconToggleButtonsGroupRow() = Preview {
         OdsIconToggleButtonsRowItem(painterResource(id = android.R.drawable.ic_dialog_email), "Day"),
         OdsIconToggleButtonsRowItem(painterResource(id = android.R.drawable.ic_dialog_alert), "Month")
     )
+    val selectedIndexState = remember { mutableStateOf(0) }
 
     OdsIconToggleButtonsRow(
         iconToggleButtons = iconToggleButtons,
-        selectedButtonIndex = remember { mutableStateOf(0) }
+        selectedIndex = selectedIndexState.value,
+        onSelectedIndexChange = { index -> selectedIndexState.value = index }
     )
 }