[#349] Review: Replace menu items by content in the OdsDropdownMenu

Orange-OpenSource · Dec 7, 2022 · fcc68db · fcc68db
1 parent 386c63e
commit fcc68db
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 57 deletions.
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/MainTopAppBar.kt b/demo/src/main/java/com/orange/ods/demo/ui/MainTopAppBar.kt
@@ -23,7 +23,7 @@ import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.appbar.top.OdsTopAppBar
 import com.orange.ods.compose.component.appbar.top.OdsTopAppBarActionButton
 import com.orange.ods.compose.component.appbar.top.OdsTopAppBarOverflowMenuBox
-import com.orange.ods.compose.component.menu.OdsMenuItem
+import com.orange.ods.compose.component.menu.OdsDropdownMenuItem
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.utilities.clickOnElement
 import com.orange.ods.demo.ui.utilities.extension.isDarkModeEnabled
@@ -65,18 +65,17 @@ fun MainTopAppBar(
             }
             if (state.isOverflowMenuEnabled) {
                 OdsTopAppBarOverflowMenuBox(
-                    overflowIconContentDescription = stringResource(id = R.string.component_app_bars_top_element_overflow_menu),
-                    overflowMenuItems = listOf(
-                        OdsMenuItem(
-                            text = stringResource(id = R.string.component_app_bars_top_action_account),
-                            onClick = { clickOnElement(context, context.getString(R.string.component_app_bars_top_action_account)) }
-                        ),
-                        OdsMenuItem(
-                            text = stringResource(id = R.string.component_app_bars_top_action_settings),
-                            onClick = { clickOnElement(context, context.getString(R.string.component_app_bars_top_action_settings)) }
-                        )
+                    overflowIconContentDescription = stringResource(id = R.string.component_app_bars_top_element_overflow_menu)
+                ) {
+                    OdsDropdownMenuItem(
+                        text = stringResource(id = R.string.component_app_bars_top_action_account),
+                        onClick = { clickOnElement(context, context.getString(R.string.component_app_bars_top_action_account)) }
                     )
-                )
+                    OdsDropdownMenuItem(
+                        text = stringResource(id = R.string.component_app_bars_top_action_settings),
+                        onClick = { clickOnElement(context, context.getString(R.string.component_app_bars_top_action_settings)) }
+                    )
+                }
             }
         },
         elevated = false // elevation is managed in [MainScreen] cause of tabs

diff --git a/docs/components/AppBarsTop.md b/docs/components/AppBarsTop.md
@@ -248,23 +248,20 @@ If you need to have a top app bar with some elevation you can set the `@style/Wi
 You can easily add an overflow menu to your top app bar by using the `OdsTopAppBarOverflowMenuBox` composable as follow:
 
 ```kotlin
-OdsTopAppBarOverflowMenuBox(
-    overflowIconContentDescription = "more actions",
-    overflowMenuItems = listOf(
-        OdsMenuItem(
-            text = "Account",
-            onClick = { 
-                // do something
-            }
-        ),
-        OdsMenuItem(
-            text = "Settings",
-            onClick = { 
-                // do something
-            }
-        )
+OdsTopAppBarOverflowMenuBox(overflowIconContentDescription = "more actions") {
+    OdsDropdownMenuItem(
+        text = "account",
+        onClick = { 
+            // Do something
+        }
     )
-)
+    OdsDropdownMenuItem(
+        text = "settings",
+        onClick = { 
+            // Do something
+        }
+    )
+}
 ```
 
 ## Component specific tokens

diff --git a/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsTopAppBar.kt b/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsTopAppBar.kt
@@ -11,6 +11,7 @@
 package com.orange.ods.compose.component.appbar.top
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.AppBarDefaults
@@ -34,7 +35,7 @@ import androidx.compose.ui.unit.dp
 import com.orange.ods.compose.component.OdsComponentApi
 import com.orange.ods.compose.component.button.OdsIconButton
 import com.orange.ods.compose.component.menu.OdsDropdownMenu
-import com.orange.ods.compose.component.menu.OdsMenuItem
+import com.orange.ods.compose.component.menu.OdsDropdownMenuItem
 import com.orange.ods.compose.component.utilities.Preview
 import com.orange.ods.compose.component.utilities.UiModePreviews
 import com.orange.ods.compose.theme.OdsTheme
@@ -121,12 +122,12 @@ fun OdsTopAppBarActionButton(
  * Overflow menu displayed in an [OdsTopAppBar]. It displays the overflow icon (3 vertical dots) and the menu appearing on click.
  *
  * @param overflowIconContentDescription The content description of the overflow icon.
- * @param overflowMenuItems The list of the [OdsMenuItem] to display in the menu.
+ * @param content The content of the overflow dropdown menu
  */
 @Composable
 fun OdsTopAppBarOverflowMenuBox(
     overflowIconContentDescription: String,
-    overflowMenuItems: List<OdsMenuItem> = emptyList()
+    content: @Composable ColumnScope.() -> Unit
 ) {
     var showMenu by remember { mutableStateOf(false) }
 
@@ -139,7 +140,7 @@ fun OdsTopAppBarOverflowMenuBox(
         OdsDropdownMenu(
             expanded = showMenu,
             onDismissRequest = { showMenu = false },
-            menuItems = overflowMenuItems
+            content = content
         )
     }
 }
@@ -161,12 +162,11 @@ private fun PreviewOdsTopAppBar() = Preview {
                 contentDescription = "Info"
             )
             OdsTopAppBarOverflowMenuBox(
-                overflowIconContentDescription = "more options",
-                overflowMenuItems = listOf(
-                    OdsMenuItem(text = "settings", {}),
-                    OdsMenuItem(text = "account", {})
-                )
-            )
+                overflowIconContentDescription = "more options"
+            ) {
+                OdsDropdownMenuItem(text = "settings", onClick = { })
+                OdsDropdownMenuItem(text = "account", onClick = { })
+            }
         }
     )
 }
diff --git a/lib/src/main/java/com/orange/ods/compose/component/menu/OdsDropdownMenu.kt b/lib/src/main/java/com/orange/ods/compose/component/menu/OdsDropdownMenu.kt
@@ -11,6 +11,7 @@
 package com.orange.ods.compose.component.menu
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.Text
@@ -32,7 +33,7 @@ import com.orange.ods.compose.theme.OdsTheme
  * @param modifier The modifier to be applied to the menu
  * @param offset [DpOffset] to be added to the position of the menu
  * @param properties [PopupProperties] for further customization of the popup's behavior
- * @param menuItems List of [OdsMenuItem] to display in the menu
+ * @param content The content of the dropdown menu
  */
 @Composable
 fun OdsDropdownMenu(
@@ -41,19 +42,16 @@ fun OdsDropdownMenu(
     modifier: Modifier = Modifier,
     offset: DpOffset = DpOffset(0.dp, 0.dp),
     properties: PopupProperties = PopupProperties(focusable = true),
-    menuItems: List<OdsMenuItem> = emptyList()
+    content: @Composable ColumnScope.() -> Unit
 ) {
     DropdownMenu(
         expanded = expanded,
         onDismissRequest = onDismissRequest,
         modifier = modifier.background(OdsTheme.colors.surface),
         offset = offset,
-        properties = properties
-    ) {
-        menuItems.forEach { item ->
-            OdsDropdownMenuItem(text = item.text, onClick = item.onClick, enabled = item.enabled)
-        }
-    }
+        properties = properties,
+        content = content
+    )
 }
 
 /**
@@ -65,7 +63,7 @@ fun OdsDropdownMenu(
  * will not be clickable and [onClick] will not be invoked
  */
 @Composable
-private fun OdsDropdownMenuItem(
+fun ColumnScope.OdsDropdownMenuItem(
     text: String,
     onClick: () -> Unit,
     enabled: Boolean = true
@@ -76,13 +74,4 @@ private fun OdsDropdownMenuItem(
     ) {
         Text(text = text, style = OdsTheme.typography.body1, color = OdsTheme.colors.onSurface)
     }
-}
-
-/**
- * An item displayed in a menu
- *
- * @property text The text of the menu item
- * @property onClick Action executed when the menu item was clicked
- * @property enabled Determines the enabled state of the menu item
- */
-data class OdsMenuItem(val text: String, val onClick: () -> Unit, val enabled: Boolean = true)
+}