Merge pull request #586 from Orange-OpenSource/555-ods-component-list…

…-header-updates

555-ods component list header updates

app/src/main/java/com/orange/ods/app/ui/components/Component.kt

@@ -27,7 +27,7 @@ import com.orange.ods.app.ui.components.chips.ChipFilter
 import com.orange.ods.app.ui.components.dialogs.ComponentDialog
 import com.orange.ods.app.ui.components.floatingactionbuttons.ComponentFloatingActionButton
 import com.orange.ods.app.ui.components.imageitem.ComponentImageItem
-import com.orange.ods.app.ui.components.lists.ComponentLists
+import com.orange.ods.app.ui.components.listitem.ComponentListItem
 import com.orange.ods.app.ui.components.menus.ComponentMenu
 import com.orange.ods.app.ui.components.navigationdrawers.ComponentModalDrawers
 import com.orange.ods.app.ui.components.progress.ComponentProgress
@@ -175,14 +175,13 @@ sealed class Component(
         demoScreen = { _, _ -> ComponentImageItem() }
     )
 
-    object Lists : Component(
-        R.string.component_lists,
-        R.drawable.il_lists,
+    object ListItem : Component(
+        R.string.component_list_item,
+        R.drawable.il_list_item,
         null,
-        R.string.component_lists_description,
+        R.string.component_list_item_description,
         composableName = OdsComposable.OdsListItem.name,
-        demoScreen = { _, _ -> ComponentLists() },
-        imageAlignment = Alignment.BottomCenter
+        demoScreen = { _, _ -> ComponentListItem() }
     )
 
     object Menus : Component(

app/src/main/java/com/orange/ods/app/ui/components/lists/ComponentLists.kt → app/src/main/java/com/orange/ods/app/ui/components/listitem/ComponentListItem.kt

@@ -8,13 +8,11 @@
  * /
  */
 
-package com.orange.ods.app.ui.components.lists
+package com.orange.ods.app.ui.components.listitem
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
@@ -37,7 +35,10 @@ import com.orange.ods.app.ui.components.utilities.ComponentCountRow
 import com.orange.ods.app.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.app.ui.components.utilities.clickOnElement
 import com.orange.ods.app.ui.utilities.DrawableManager
+import com.orange.ods.app.ui.utilities.composable.CodeImplementationColumn
+import com.orange.ods.app.ui.utilities.composable.FunctionCallCode
 import com.orange.ods.app.ui.utilities.composable.Subtitle
+import com.orange.ods.compose.OdsComposable
 import com.orange.ods.compose.component.chip.OdsChoiceChip
 import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
 import com.orange.ods.compose.component.list.OdsCaptionTrailing
@@ -49,31 +50,30 @@ import com.orange.ods.compose.component.list.OdsListItemIconScope
 import com.orange.ods.compose.component.list.OdsListItemIconType
 import com.orange.ods.compose.component.list.OdsListItemTrailing
 import com.orange.ods.compose.component.list.OdsSwitchTrailing
-import com.orange.ods.compose.component.list.divider
 import com.orange.ods.compose.component.list.iconType
 import com.orange.ods.utilities.extension.orElse
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun ComponentLists() {
+fun ComponentListItem() {
     val listItemCustomizationState = rememberListItemCustomizationState()
     ComponentCustomizationBottomSheetScaffold(
         bottomSheetScaffoldState = listItemCustomizationState.bottomSheetScaffoldState,
-        bottomSheetContent = { ComponentListsBottomSheetContent(listItemCustomizationState) },
-        content = { ComponentListsContent(listItemCustomizationState) }
+        bottomSheetContent = { ComponentListItemBottomSheetContent(listItemCustomizationState) },
+        content = { ComponentListItemContent(listItemCustomizationState) }
     )
 }
 
 @Composable
-private fun ComponentListsBottomSheetContent(listItemCustomizationState: ListItemCustomizationState) {
+private fun ComponentListItemBottomSheetContent(listItemCustomizationState: ListItemCustomizationState) {
     ComponentCountRow(
         modifier = Modifier.padding(start = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin)),
         title = stringResource(id = R.string.component_list_item_size),
         count = listItemCustomizationState.lineCount,
         minusIconContentDescription = stringResource(id = R.string.component_list_item_remove_line),
         plusIconContentDescription = stringResource(id = R.string.component_list_item_add_line),
-        minCount = ComponentListItem.MinLineCount,
-        maxCount = ComponentListItem.MaxLineCount
+        minCount = ListItemCustomizationState.MinLineCount,
+        maxCount = ListItemCustomizationState.MaxLineCount
     )
 
     Subtitle(textRes = R.string.component_list_leading, horizontalPadding = true)
@@ -100,17 +100,13 @@ private fun ComponentListsBottomSheetContent(listItemCustomizationState: ListIte
         }
     }
 
-    OdsListItem(
-        text = stringResource(id = R.string.component_element_divider),
-        trailing = OdsSwitchTrailing(checked = listItemCustomizationState.dividerEnabled)
-    )
 }
 
 @Composable
-private fun ComponentListsContent(listItemCustomizationState: ListItemCustomizationState) {
-    val recipes = LocalRecipes.current.filter { it.description.isNotBlank() }
+private fun ComponentListItemContent(listItemCustomizationState: ListItemCustomizationState) {
+    val recipe = LocalRecipes.current.first { it.description.isNotBlank() }
     with(listItemCustomizationState) {
-        Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+        Column {
             if (!trailings.contains(selectedTrailing.value)) {
                 resetTrailing()
             }
@@ -119,33 +115,63 @@ private fun ComponentListsContent(listItemCustomizationState: ListItemCustomizat
                 .let { modifier ->
                     iconType?.let { modifier.iconType(it) }.orElse { modifier }
                 }
-                .let { if (dividerEnabled.value) it.divider() else it }
             val singleLineSecondaryText = lineCount.value == 2
 
-            recipes.forEach { recipe ->
-                val text = recipe.title
-                val secondaryText = listItemCustomizationState.getSecondaryText(recipe)
-                val icon: @Composable (OdsListItemIconScope.() -> Unit)? =
-                    listItemCustomizationState.getIconPainter(recipe)?.let { { OdsListItemIcon(painter = it) } }
-                trailing?.let { listItemTrailing ->
-                    OdsListItem(
-                        modifier = modifier,
-                        text = text,
-                        secondaryText = secondaryText,
-                        singleLineSecondaryText = singleLineSecondaryText,
-                        icon = icon,
-                        trailing = listItemTrailing
-                    )
-                }.orElse {
-                    val context = LocalContext.current
-                    OdsListItem(
-                        modifier = modifier.clickable { clickOnElement(context = context, context.getString(R.string.component_list_item)) },
-                        text = text,
-                        secondaryText = secondaryText,
-                        singleLineSecondaryText = singleLineSecondaryText,
-                        icon = icon
-                    )
-                }
+            val text = recipe.title
+            val secondaryText = if (lineCount.value > 1) recipe.description else null
+            val icon: @Composable (OdsListItemIconScope.() -> Unit)? =
+                listItemCustomizationState.getIconPainter(recipe)?.let { { OdsListItemIcon(painter = it) } }
+            trailing?.let { listItemTrailing ->
+                OdsListItem(
+                    modifier = modifier,
+                    text = text,
+                    secondaryText = secondaryText,
+                    singleLineSecondaryText = singleLineSecondaryText,
+                    icon = icon,
+                    trailing = listItemTrailing
+                )
+            }.orElse {
+                val context = LocalContext.current
+                OdsListItem(
+                    modifier = modifier.clickable { clickOnElement(context = context, context.getString(R.string.component_list_item)) },
+                    text = text,
+                    secondaryText = secondaryText,
+                    singleLineSecondaryText = singleLineSecondaryText,
+                    icon = icon
+                )
+            }
+
+            CodeImplementationColumn(modifier = Modifier.padding(horizontal = dimensionResource(id = com.orange.ods.R.dimen.screen_horizontal_margin))) {
+                FunctionCallCode(
+                    name = OdsComposable.OdsListItem.name,
+                    parameters = {
+                        string("text", text)
+                        if (secondaryText != null) {
+                            string("secondaryText", secondaryText)
+                            if (!singleLineSecondaryText) stringRepresentation("singleLineSecondaryText", false)
+                        }
+                        if (selectedLeading.value != ListItemCustomizationState.Leading.None) {
+                            simple("modifier", "Modifier.iconType($iconType)")
+                            simple("icon", "{ OdsListItemIcon(<painter>) }")
+                        }
+                        if (selectedTrailing.value != ListItemCustomizationState.Trailing.None) {
+                            val clazz: Class<*>? = when (selectedTrailing.value) {
+                                ListItemCustomizationState.Trailing.Checkbox -> OdsCheckboxTrailing::class.java
+                                ListItemCustomizationState.Trailing.Switch -> OdsSwitchTrailing::class.java
+                                ListItemCustomizationState.Trailing.Icon -> OdsIconTrailing::class.java
+                                ListItemCustomizationState.Trailing.Caption -> OdsCaptionTrailing::class.java
+                                else -> null
+                            }
+
+                            val trailingParamName = "trailing"
+                            clazz?.let {
+                                classInstance(trailingParamName, it) {}
+                            }.orElse {
+                                simple(trailingParamName, "<OdsListItemTrailing>")
+                            }
+                        }
+                    }
+                )
             }
         }
     }
@@ -160,14 +186,6 @@ private val ListItemCustomizationState.Trailing.textResId: Int
         ListItemCustomizationState.Trailing.Caption -> R.string.component_list_trailing_caption
     }
 
-private fun ListItemCustomizationState.getSecondaryText(recipe: Recipe): String? {
-    return when (lineCount.value) {
-        2 -> recipe.subtitle
-        3 -> recipe.description
-        else -> null
-    }
-}
-
 private val ListItemCustomizationState.iconType: OdsListItemIconType?
     get() = when (selectedLeading.value) {
         ListItemCustomizationState.Leading.None -> null

app/src/main/java/com/orange/ods/app/ui/components/lists/ListItemCustomizationState.kt → app/src/main/java/com/orange/ods/app/ui/components/listitem/ListItemCustomizationState.kt

@@ -8,7 +8,7 @@
  * /
  */
 
-package com.orange.ods.app.ui.components.lists
+package com.orange.ods.app.ui.components.listitem
 
 import androidx.compose.material.BottomSheetScaffoldState
 import androidx.compose.material.ExperimentalMaterialApi
@@ -19,22 +19,15 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 
-object ComponentListItem {
-    const val DefaultLineCount = 2
-    const val MinLineCount = 1
-    const val MaxLineCount = 3
-}
-
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun rememberListItemCustomizationState(
     bottomSheetScaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
-    lineCount: MutableState<Int> = rememberSaveable { mutableStateOf(ComponentListItem.DefaultLineCount) },
+    lineCount: MutableState<Int> = rememberSaveable { mutableStateOf(ListItemCustomizationState.DefaultLineCount) },
     selectedLeading: MutableState<ListItemCustomizationState.Leading> = rememberSaveable { mutableStateOf(ListItemCustomizationState.Leading.None) },
     selectedTrailing: MutableState<ListItemCustomizationState.Trailing> = rememberSaveable { mutableStateOf(ListItemCustomizationState.Trailing.None) },
-    dividerEnabled: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) }
 ) = remember(lineCount) {
-    ListItemCustomizationState(bottomSheetScaffoldState, lineCount, selectedLeading, selectedTrailing, dividerEnabled)
+    ListItemCustomizationState(bottomSheetScaffoldState, lineCount, selectedLeading, selectedTrailing)
 }
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -43,8 +36,12 @@ class ListItemCustomizationState(
     val lineCount: MutableState<Int>,
     val selectedLeading: MutableState<Leading>,
     val selectedTrailing: MutableState<Trailing>,
-    val dividerEnabled: MutableState<Boolean>
 ) {
+    companion object {
+        const val DefaultLineCount = 2
+        const val MinLineCount = 1
+        const val MaxLineCount = 3
+    }
 
     enum class Leading {
         None, Icon, CircularImage, SquareImage, WideImage
@@ -55,7 +52,7 @@ class ListItemCustomizationState(
     }
 
     val trailings: List<Trailing>
-        get() = if (lineCount.value < ComponentListItem.MaxLineCount) {
+        get() = if (lineCount.value < MaxLineCount) {
             listOf(Trailing.None, Trailing.Checkbox, Trailing.Switch, Trailing.Icon)
         } else {
             listOf(Trailing.None, Trailing.Caption)

app/src/main/java/com/orange/ods/app/ui/utilities/DrawableManager.kt

@@ -42,6 +42,7 @@ object DrawableManager {
         R.drawable.il_dialogs_generic to R.drawable.il_dialogs,
         R.drawable.il_fab_generic to R.drawable.il_fab,
         R.drawable.il_image_item_generic to R.drawable.il_image_item,
+        R.drawable.il_list_item_generic to R.drawable.il_list_item,
         R.drawable.il_lists_generic to R.drawable.il_lists,
         R.drawable.il_menus_generic to R.drawable.il_menus,
         R.drawable.il_navigation_drawers_generic to R.drawable.il_navigation_drawers,

app/src/main/res/drawable/il_list_item.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="400dp"
+    android:height="200dp"
+    android:viewportWidth="400"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0h400v200h-400z"
+      android:fillColor="#1b1b1b"/>
+  <path
+      android:pathData="M101.37,95.89h65.32v8.13h-65.32z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M64,76.64L336,76.64"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#3f3f3f"/>
+  <path
+      android:pathData="M64,123.36L336,123.36"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#3f3f3f"/>
+  <path
+      android:pathData="M74.35,92.91h14.1v14.1h-14.1z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M298.95,90.26h19.39v19.39h-19.39z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+</vector>

app/src/main/res/drawable/il_list_item_generic.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="400dp"
+    android:height="200dp"
+    android:viewportWidth="400"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0h400v200h-400z"
+      android:fillColor="#1b1b1b"/>
+  <path
+      android:pathData="M101.37,95.89h65.32v8.13h-65.32z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M64,76.64L336,76.64"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#3f3f3f"/>
+  <path
+      android:pathData="M64,123.36L336,123.36"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#3f3f3f"/>
+  <path
+      android:pathData="M74.35,92.91h14.1v14.1h-14.1z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+  <path
+      android:pathData="M298.95,90.26h19.39v19.39h-19.39z"
+      android:strokeAlpha="0.6"
+      android:fillColor="#ccc"
+      android:fillAlpha="0.6"/>
+</vector>