/*
* Copyright 2019 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package androidx.compose.material
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.foundation.Box
import androidx.compose.ui.window.Dialog
import androidx.compose.foundation.ProvideTextStyle
import androidx.compose.ui.graphics.Shape
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayout
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.MainAxisAlignment
import androidx.compose.foundation.layout.SizeMode
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.Stack
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
/**
* Alert dialog is a [Dialog] which interrupts the user with urgent information, details or actions.
*
* The dialog will position its buttons based on the available space. By default it will try to
* place them horizontally next to each other and fallback to horizontal placement if not enough
* space is available. There is also another version of this composable that has a slot for buttons
* to provide custom buttons layout.
*
* Sample of dialog:
* @sample androidx.compose.material.samples.AlertDialogSample
*
* @param onDismissRequest Executes 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 A button which is meant to confirm a proposed action, thus resolving
* what triggered the dialog. The dialog does not set up any events for this button so they need
* to be set up by the caller.
* @param modifier Modifier to be applied to the layout of the dialog.
* @param dismissButton A button which is meant to dismiss the dialog. The dialog does not set up
* any events for this button so they need to be set up by the caller.
* @param title The title of the Dialog which should specify the purpose of the Dialog. The title
* is not mandatory, because there may be sufficient information inside the [text]. Provided text
* style will be [Typography.h6].
* @param text The text which presents the details regarding the Dialog's purpose. Provided text
* style will be [Typography.body1].
* @param shape Defines the Dialog's shape
* @param backgroundColor The background color of the dialog.
* @param contentColor The preferred content color provided by this dialog to its children.
*/
@Composable
fun AlertDialog(
onDismissRequest: () -> Unit,
confirmButton: @Composable () -> Unit,
modifier: Modifier = Modifier,
dismissButton: @Composable (() -> Unit)? = null,
title: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor)
) {
AlertDialog(
onDismissRequest = onDismissRequest,
buttons = {
@OptIn(ExperimentalLayout::class)
Stack(Modifier.fillMaxWidth().padding(all = 8.dp)) {
FlowRow(
mainAxisSize = SizeMode.Expand,
mainAxisAlignment = MainAxisAlignment.End,
mainAxisSpacing = 8.dp,
crossAxisSpacing = 12.dp
) {
if (dismissButton != null) {
dismissButton()
}
confirmButton()
}
}
},
modifier = modifier,
title = title,
text = text,
shape = shape,
backgroundColor = backgroundColor,
contentColor = contentColor
)
}
/**
* Alert dialog is a [Dialog] which interrupts the user with urgent information, details or actions.
*
* This function can be used to fully customize the button area, e.g. with:
*
* @sample androidx.compose.material.samples.CustomAlertDialogSample
*
* @param onDismissRequest Executes 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 buttons Function that emits the layout with the buttons.
* @param modifier Modifier to be applied to the layout of the dialog.
* @param title The title of the Dialog which should specify the purpose of the Dialog. The title
* is not mandatory, because there may be sufficient information inside the [text]. Provided text
* style will be [Typography.h6].
* @param text The text which presents the details regarding the Dialog's purpose. Provided text
* style will be [Typography.body1].
* @param shape Defines the Dialog's shape.
* @param backgroundColor The background color of the dialog.
* @param contentColor The preferred content color provided by this dialog to its children.
*/
@Composable
fun AlertDialog(
onDismissRequest: () -> Unit,
buttons: @Composable () -> Unit,
modifier: Modifier = Modifier,
title: (@Composable () -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
shape: Shape = MaterialTheme.shapes.medium,
backgroundColor: Color = MaterialTheme.colors.surface,
contentColor: Color = contentColorFor(backgroundColor)
) {
Dialog(onDismissRequest = onDismissRequest) {
Surface(
modifier = modifier,
shape = shape,
color = backgroundColor,
contentColor = contentColor
) {
val emphasisLevels = EmphasisAmbient.current
Column {
if (title != null) {
Box(TitlePadding.gravity(Alignment.Start)) {
ProvideEmphasis(emphasisLevels.high) {
val textStyle = MaterialTheme.typography.subtitle1
ProvideTextStyle(textStyle, title)
}
}
} else {
// TODO(b/138924683): Temporary until padding for the Text's
// baseline
Spacer(NoTitleExtraHeight)
}
if (text != null) {
Box(TextPadding.gravity(Alignment.Start)) {
ProvideEmphasis(emphasisLevels.medium) {
val textStyle = MaterialTheme.typography.body2
ProvideTextStyle(textStyle, text)
}
}
Spacer(TextToButtonsHeight)
}
buttons()
}
}
}
}
// TODO(b/138924683): Top padding should be actually be a distance between the Text baseline and
// the Title baseline
private val TextPadding = Modifier.padding(start = 24.dp, top = 20.dp, end = 24.dp, bottom = 0.dp)
// TODO(b/138924683): Top padding should be actually be relative to the Text baseline
private val TitlePadding = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 0.dp)
// The height difference of the padding between a Dialog with a title and one without a title
private val NoTitleExtraHeight = Modifier.preferredHeight(2.dp)
private val TextToButtonsHeight = Modifier.preferredHeight(28.dp)