From b9ba009d575ef4d182b4c608fc001f52d9773261 Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 6 Dec 2022 10:15:14 +0100 Subject: [PATCH] [#349] Review: Replace menu items by content in the OdsDropdownMenu --- .../com/orange/ods/demo/ui/MainTopAppBar.kt | 23 +++++++-------- docs/components/AppBarsTop.md | 29 +++++++++---------- .../component/appbar/top/OdsTopAppBar.kt | 20 ++++++------- .../compose/component/menu/OdsDropdownMenu.kt | 27 +++++------------ 4 files changed, 42 insertions(+), 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 index ea5d90a61..40b055726 100644 --- 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 @@ -72,18 +72,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 index 545256de6..15ec4ffaa 100644 --- 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 index de74c6a3a..3669d31ba 100644 --- 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 = 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 index 20aa09fc0..ec850f35b 100644 --- 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 = 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) \ No newline at end of file +} \ No newline at end of file