Browse Source
Also correctly handle the back press when this bottom sheet is opened, previously it was leaving the room edition screen. ModalBottomSheetLayout can now be deleted.pull/2849/head
Benoit Marty
4 months ago
5 changed files with 56 additions and 205 deletions
@ -1,132 +0,0 @@
@@ -1,132 +0,0 @@
|
||||
/* |
||||
* Copyright (c) 2023 New Vector Ltd |
||||
* |
||||
* 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. |
||||
*/ |
||||
|
||||
// This is actually expected, as we should remove this component soon and use ModalBottomSheet instead |
||||
@file:Suppress("UsingMaterialAndMaterial3Libraries") |
||||
|
||||
package io.element.android.libraries.designsystem.theme.components |
||||
|
||||
import androidx.compose.foundation.background |
||||
import androidx.compose.foundation.layout.Box |
||||
import androidx.compose.foundation.layout.Column |
||||
import androidx.compose.foundation.layout.ColumnScope |
||||
import androidx.compose.foundation.layout.Spacer |
||||
import androidx.compose.foundation.layout.fillMaxWidth |
||||
import androidx.compose.foundation.layout.height |
||||
import androidx.compose.foundation.layout.navigationBarsPadding |
||||
import androidx.compose.foundation.layout.padding |
||||
import androidx.compose.foundation.layout.size |
||||
import androidx.compose.foundation.shape.CornerSize |
||||
import androidx.compose.foundation.shape.RoundedCornerShape |
||||
import androidx.compose.material.ExperimentalMaterialApi |
||||
import androidx.compose.material.ModalBottomSheetDefaults |
||||
import androidx.compose.material.ModalBottomSheetState |
||||
import androidx.compose.material.ModalBottomSheetValue |
||||
import androidx.compose.material.rememberModalBottomSheetState |
||||
import androidx.compose.material3.MaterialTheme |
||||
import androidx.compose.material3.contentColorFor |
||||
import androidx.compose.runtime.Composable |
||||
import androidx.compose.ui.Alignment |
||||
import androidx.compose.ui.Modifier |
||||
import androidx.compose.ui.graphics.Color |
||||
import androidx.compose.ui.graphics.Shape |
||||
import androidx.compose.ui.platform.LocalDensity |
||||
import androidx.compose.ui.tooling.preview.Preview |
||||
import androidx.compose.ui.unit.Dp |
||||
import androidx.compose.ui.unit.dp |
||||
import io.element.android.libraries.architecture.coverage.ExcludeFromCoverage |
||||
import io.element.android.libraries.designsystem.modifiers.applyIf |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewDark |
||||
import io.element.android.libraries.designsystem.preview.ElementPreviewLight |
||||
import io.element.android.libraries.designsystem.preview.PreviewGroup |
||||
|
||||
@OptIn(ExperimentalMaterialApi::class) |
||||
@Composable |
||||
fun ModalBottomSheetLayout( |
||||
sheetContent: @Composable ColumnScope.() -> Unit, |
||||
modifier: Modifier = Modifier, |
||||
sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden), |
||||
sheetShape: Shape = MaterialTheme.shapes.large.copy(bottomStart = CornerSize(0.dp), bottomEnd = CornerSize(0.dp)), |
||||
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation, |
||||
sheetBackgroundColor: Color = MaterialTheme.colorScheme.surface, |
||||
sheetContentColor: Color = contentColorFor(sheetBackgroundColor), |
||||
scrimColor: Color = ModalBottomSheetDefaults.scrimColor, |
||||
displayHandle: Boolean = false, |
||||
useSystemPadding: Boolean = true, |
||||
content: @Composable () -> Unit = {} |
||||
) { |
||||
androidx.compose.material.ModalBottomSheetLayout( |
||||
sheetContent = { |
||||
Column( |
||||
Modifier.fillMaxWidth() |
||||
.applyIf(useSystemPadding, ifTrue = { |
||||
navigationBarsPadding() |
||||
}) |
||||
) { |
||||
if (displayHandle) { |
||||
Spacer(modifier = Modifier.height(16.dp)) |
||||
Box( |
||||
modifier = Modifier |
||||
.background(MaterialTheme.colorScheme.onSurfaceVariant, RoundedCornerShape(2.dp)) |
||||
.size(width = 32.dp, height = 4.dp) |
||||
.align(Alignment.CenterHorizontally), |
||||
) |
||||
Spacer(modifier = Modifier.height(24.dp)) |
||||
} |
||||
sheetContent() |
||||
} |
||||
}, |
||||
modifier = modifier, |
||||
sheetState = sheetState, |
||||
sheetShape = sheetShape, |
||||
sheetElevation = sheetElevation, |
||||
sheetBackgroundColor = sheetBackgroundColor, |
||||
sheetContentColor = sheetContentColor, |
||||
scrimColor = scrimColor, |
||||
content = content, |
||||
) |
||||
} |
||||
|
||||
@Preview(group = PreviewGroup.BottomSheets) |
||||
@Composable |
||||
internal fun ModalBottomSheetLayoutLightPreview() = |
||||
ElementPreviewLight { ContentToPreview() } |
||||
|
||||
@Preview(group = PreviewGroup.BottomSheets) |
||||
@Composable |
||||
internal fun ModalBottomSheetLayoutDarkPreview() = |
||||
ElementPreviewDark { ContentToPreview() } |
||||
|
||||
@OptIn(ExperimentalMaterialApi::class) |
||||
@ExcludeFromCoverage |
||||
@Composable |
||||
private fun ContentToPreview() { |
||||
ModalBottomSheetLayout( |
||||
modifier = Modifier.height(140.dp), |
||||
displayHandle = true, |
||||
sheetState = ModalBottomSheetState(ModalBottomSheetValue.Expanded, density = LocalDensity.current), |
||||
sheetContent = { |
||||
Text( |
||||
text = "Sheet Content", |
||||
modifier = Modifier |
||||
.padding(start = 16.dp, end = 16.dp, bottom = 20.dp) |
||||
.background(color = Color.Green) |
||||
) |
||||
} |
||||
) { |
||||
Text(text = "Content", modifier = Modifier.background(color = Color.Red)) |
||||
} |
||||
} |
||||
Loading…
Reference in new issue