From c8b27566ec398eb2fde3bea0c49f1e240d841296 Mon Sep 17 00:00:00 2001 From: Anton Kolomeytsev Date: Fri, 14 Jul 2023 18:20:38 +0300 Subject: [PATCH] Improve AlertDialog with layout and its docs --- .../kekmech/ru/ui_kit_dialogs/AlertDialog.kt | 85 +++++++++++++++++-- 1 file changed, 76 insertions(+), 9 deletions(-) diff --git a/modules/ui/kit/dialogs/src/main/kotlin/kekmech/ru/ui_kit_dialogs/AlertDialog.kt b/modules/ui/kit/dialogs/src/main/kotlin/kekmech/ru/ui_kit_dialogs/AlertDialog.kt index 70b5347f..b83caa16 100644 --- a/modules/ui/kit/dialogs/src/main/kotlin/kekmech/ru/ui_kit_dialogs/AlertDialog.kt +++ b/modules/ui/kit/dialogs/src/main/kotlin/kekmech/ru/ui_kit_dialogs/AlertDialog.kt @@ -3,13 +3,17 @@ package kekmech.ru.ui_kit_dialogs import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.ShoppingCart +import androidx.compose.material3.Divider import androidx.compose.material3.Icon import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -58,6 +62,21 @@ fun rememberAlertDialogState(dialogVisible: Boolean = false): AlertDialogState = * defines. If required, these constraints can be overwritten by providing a `width` or `height` * [Modifier]s. * + * Usage: + * + * ```kotlin + * val myAlert = rememberAlertDialogState() + * + * Button( + * onClick = { myAlert.showDialog() }, + * ) { ... } + * + * AlertDialog( + * onDismissRequest = { myAlert.hideDialog() }, + * state = myAlert, + * ) { ... } + * ``` + * * @param onDismissRequest called when the user tries to dismiss the Dialog by clicking outside * or pressing the back button. This is not called when the dismiss button is clicked. * @param state the state by which the showing and hiding of the dialog is controlled. See @@ -109,6 +128,23 @@ fun AlertDialog( * By default it will try to place them horizontally next to each other and fallback to horizontal * placement if not enough space is available. * + * Usage: + * + * ```kotlin + * val myAlert = rememberAlertDialogState() + * + * Button( + * onClick = { myAlert.showDialog() }, + * ) { ... } + * + * AlertDialog( + * onDismissRequest = { myAlert.hideDialog() }, + * confirmButton = { ... }, + * state = myAlert, + * ... + * ) + * ``` + * * @param onDismissRequest called when the user tries to dismiss the Dialog by clicking outside * or pressing the back button. This is not called when the dismiss button is clicked. * @param confirmButton button which is meant to confirm a proposed action, thus resolving what @@ -138,6 +174,7 @@ fun AlertDialog( icon: @Composable (() -> Unit)? = null, title: String? = null, text: String? = null, + content: @Composable (() -> Unit)? = null, properties: DialogProperties = DialogProperties(), ) { AnimatedVisibility( @@ -162,15 +199,34 @@ fun AlertDialog( ) } } else null, - text = if (text != null) { - @Composable { - Text( - text = text, - style = MpeixTheme.typography.paragraphNormal, - color = MpeixTheme.palette.contentVariant, - ) + text = when { + text != null && content != null -> { + { + Column { + Text( + text = text, + style = MpeixTheme.typography.paragraphNormal, + color = MpeixTheme.palette.contentVariant, + modifier = Modifier.padding(bottom = 16.dp), + ) + Divider() + content.invoke() + Divider() + } + } } - } else null, + text != null && content == null -> { + { + Text( + text = text, + style = MpeixTheme.typography.paragraphNormal, + color = MpeixTheme.palette.contentVariant, + ) + } + } + text == null && content != null -> content + else -> null + }, shape = RoundedCornerShape(28.dp), containerColor = MpeixTheme.palette.surface, iconContentColor = MpeixTheme.palette.contentVariant, @@ -228,7 +284,18 @@ private fun LayoutAlertDialogPreview() { Icon(Icons.Outlined.ShoppingCart, contentDescription = null) }, title = "Are you sure?", - text = "Are you really sure what you do? Just go out and touch the grass!", + text = "Are you really sure what you do? Just go out and touch the grass:", + content = { + Box( + modifier = Modifier + .fillMaxWidth() + .height(48.dp) + .background(MpeixTheme.palette.surfacePlus1), + contentAlignment = Alignment.Center, + ) { + Text(text = "Some grass to be touched") + } + } ) } }