[#254] Allow to customize dialog through a bottom sheet

demo/src/main/java/com/orange/ods/demo/ui/components/ComponentDemoScreen.kt

@@ -15,7 +15,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import com.orange.ods.demo.ui.components.bottomnavigation.ComponentBottomNavigation
 import com.orange.ods.demo.ui.components.checkboxes.ComponentCheckboxes
-import com.orange.ods.demo.ui.components.dialogs.ComponentDialogs
+import com.orange.ods.demo.ui.components.dialogs.ComponentDialog
 import com.orange.ods.demo.ui.components.lists.ComponentLists
 import com.orange.ods.demo.ui.components.progress.ComponentProgress
 import com.orange.ods.demo.ui.components.radiobuttons.ComponentRadioButtons
@@ -35,7 +35,7 @@ fun ComponentDemoScreen(
         when (component) {
             Component.BottomNavigation -> ComponentBottomNavigation()
             Component.Checkboxes -> ComponentCheckboxes()
-            Component.Dialogs -> ComponentDialogs()
+            Component.Dialogs -> ComponentDialog()
             Component.Lists -> ComponentLists()
             Component.Progress -> ComponentProgress()
             Component.RadioButtons -> ComponentRadioButtons()

demo/src/main/java/com/orange/ods/demo/ui/components/dialogs/ComponentDialog.kt

@@ -0,0 +1,91 @@
+/*
+ *
+ *  Copyright 2021 Orange
+ *
+ *  Use of this source code is governed by an MIT-style
+ *  license that can be found in the LICENSE file or at
+ *  https://opensource.org/licenses/MIT.
+ * /
+ */
+
+package com.orange.ods.demo.ui.components.dialogs
+
+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.material.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.button.OdsButton
+import com.orange.ods.compose.component.button.OdsButtonContainedStyle
+import com.orange.ods.compose.component.dialog.OdsAlertDialog
+import com.orange.ods.compose.text.OdsTextBody1
+import com.orange.ods.demo.R
+import com.orange.ods.demo.ui.components.buttons.fullWidthButton
+import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.components.utilities.clickOnElement
+import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
+
+@ExperimentalMaterialApi
+@Composable
+fun ComponentDialog() {
+    val customizationState = rememberDialogCustomizationState()
+
+    val closeDialogAction = { customizationState.openDialog.value = false }
+    val context = LocalContext.current
+
+    ComponentCustomizationBottomSheetScaffold(
+        bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
+        bottomSheetContent = {
+            SwitchListItem(labelRes = R.string.component_element_title, checked = customizationState.titleChecked)
+            SwitchListItem(labelRes = R.string.component_dialog_element_dismiss_button, checked = customizationState.dismissButtonChecked)
+        }) {
+        Column(
+            modifier = Modifier
+                .verticalScroll(rememberScrollState())
+                .padding(top = dimensionResource(id = R.dimen.ods_screen_vertical_margin), bottom = dimensionResource(id = R.dimen.spacing_s))
+        ) {
+
+            OdsTextBody1(
+                modifier = Modifier
+                    .padding(horizontal = dimensionResource(id = R.dimen.ods_screen_horizontal_margin)),
+                text = stringResource(id = R.string.component_dialog_customize)
+            )
+
+            OdsButton(
+                modifier = Modifier.fullWidthButton(),
+                text = stringResource(id = R.string.component_dialog_open),
+                style = OdsButtonContainedStyle.Primary,
+                onClick = {
+                    customizationState.openDialog.value = true
+                }
+            )
+
+            if (customizationState.shouldOpenDialog) {
+                val confirmButtonText =
+                    stringResource(id = if (customizationState.isDismissButtonChecked) R.string.component_dialog_action_confirm else R.string.component_dialog_action_ok)
+                val dismissButtonText = stringResource(id = R.string.component_dialog_action_dismiss)
+
+                OdsAlertDialog(
+                    titleText = if (customizationState.isTitleChecked) stringResource(id = R.string.component_element_title) else null,
+                    text = stringResource(id = R.string.component_dialog_text),
+                    confirmButtonText = confirmButtonText,
+                    onConfirmButtonClick = {
+                        clickOnElement(context = context, clickedElement = confirmButtonText)
+                        closeDialogAction()
+                    },
+                    dismissButtonText = if (customizationState.isDismissButtonChecked) dismissButtonText else null,
+                    onDismissButtonClick = {
+                        clickOnElement(context = context, clickedElement = dismissButtonText)
+                        closeDialogAction()
+                    },
+                )
+            }
+        }
+    }
+}

demo/src/main/java/com/orange/ods/demo/ui/components/dialogs/ComponentDialogsContentState.kt → demo/src/main/java/com/orange/ods/demo/ui/components/dialogs/DialogCustomizationState.kt

@@ -17,21 +17,26 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 
 @Composable
-fun rememberComponentDialogsContentState(
+fun rememberDialogCustomizationState(
     titleChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) },
     dismissButtonChecked: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) },
+    openDialog: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) }
 ) =
-    remember(titleChecked, dismissButtonChecked) {
-        ComponentDialogsContentState(titleChecked, dismissButtonChecked)
+    remember(titleChecked, dismissButtonChecked, openDialog) {
+        ComponentDialogsContentState(titleChecked, dismissButtonChecked, openDialog)
     }
 
 class ComponentDialogsContentState(
     val titleChecked: MutableState<Boolean>,
     val dismissButtonChecked: MutableState<Boolean>,
+    val openDialog: MutableState<Boolean>
 ) {
     val isTitleChecked
         get() = titleChecked.value
 
     val isDismissButtonChecked
         get() = dismissButtonChecked.value
+
+    val shouldOpenDialog
+        get() = openDialog.value
 }

demo/src/main/res/values/strings.xml

@@ -139,8 +139,8 @@
     <!-- Component Dialogs -->
     <string name="component_dialogs">Dialogs</string>
     <string name="component_dialogs_description">Dialogs are for prompting the user when the app requires a decision or further details required to complete a task.</string>
-    <string name="component_dialogs_customize">Customize dialog</string>
-    <string name="component_dialogs_open_dialog">Open dialog</string>
+    <string name="component_dialog_customize">Customize the dialog before opening it.</string>
+    <string name="component_dialog_open">Open dialog</string>
     <string name="component_dialog_title">Dialog sample</string>
     <string name="component_dialog_text">A dialog box asks the user for further information that the app needs in order to continue. The user has to tap one of the action buttons at the bottom of the box to continue.</string>
     <string name="component_dialog_element_dismiss_button">Dismiss button</string>