🛠️ Apply bottom padding to BottomSheet

This commit is contained in:
Acclorite 2024-10-08 15:53:44 +03:00
parent 014783c4b2
commit 7618190ada
5 changed files with 12 additions and 28 deletions

View file

@ -2,11 +2,8 @@ package ua.acclorite.book_story.presentation.core.components.custom_bottom_sheet
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.material3.BottomSheetDefaults import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
@ -17,7 +14,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
/** /**
* Custom Bottom Sheet. Fixes bugs with [ModalBottomSheet]. * Custom Bottom Sheet. Fixes bugs with [ModalBottomSheet].
@ -29,7 +25,7 @@ import androidx.compose.ui.unit.Dp
* @param containerColor Container color. * @param containerColor Container color.
* @param onDismissRequest OnDismiss callback. * @param onDismissRequest OnDismiss callback.
* @param dragHandle Drag Handle, pass null to disable. * @param dragHandle Drag Handle, pass null to disable.
* @param content Content inside [ModalBottomSheet]. Provides you navigation bar padding. * @param content Content inside [ModalBottomSheet].
*/ */
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
@ -41,11 +37,8 @@ fun CustomBottomSheet(
containerColor: Color = MaterialTheme.colorScheme.surfaceContainerLow, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerLow,
onDismissRequest: () -> Unit, onDismissRequest: () -> Unit,
dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() }, dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
content: @Composable ColumnScope.(navigationBarPadding: Dp) -> Unit content: @Composable ColumnScope.() -> Unit
) { ) {
val navigationBarPadding =
WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
Box(Modifier.fillMaxSize()) { Box(Modifier.fillMaxSize()) {
ModalBottomSheet( ModalBottomSheet(
scrimColor = scrimColor, scrimColor = scrimColor,
@ -62,10 +55,9 @@ fun CustomBottomSheet(
}, },
shape = shape, shape = shape,
sheetState = rememberModalBottomSheetState(true), sheetState = rememberModalBottomSheetState(true),
contentWindowInsets = { WindowInsets(0, 0, 0, 0) },
containerColor = containerColor containerColor = containerColor
) { ) {
content(navigationBarPadding) content()
} }
} }
} }

View file

@ -67,7 +67,7 @@ fun BookInfoChangeCoverBottomSheet() {
onDismissRequest = { onDismissRequest = {
onEvent(BookInfoEvent.OnShowHideChangeCoverBottomSheet) onEvent(BookInfoEvent.OnShowHideChangeCoverBottomSheet)
} }
) { padding -> ) {
LazyColumn(Modifier.fillMaxWidth()) { LazyColumn(Modifier.fillMaxWidth()) {
if (state.value.canResetCover) { if (state.value.canResetCover) {
item { item {
@ -125,11 +125,7 @@ fun BookInfoChangeCoverBottomSheet() {
} }
item { item {
Spacer( Spacer(modifier = Modifier.height(8.dp))
modifier = Modifier.height(
8.dp + padding
)
)
} }
} }
} }

View file

@ -124,10 +124,6 @@ fun BookInfoDetailsBottomSheet() {
} }
} }
Spacer( Spacer(modifier = Modifier.height(8.dp))
modifier = Modifier.height(
8.dp + it
)
)
} }
} }

View file

@ -60,7 +60,7 @@ fun BrowseFilterBottomSheet() {
showTitle = false, showTitle = false,
showDivider = false, showDivider = false,
topPadding = 16.dp, topPadding = 16.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }
@ -71,7 +71,7 @@ fun BrowseFilterBottomSheet() {
showTitle = false, showTitle = false,
showDivider = false, showDivider = false,
topPadding = 16.dp, topPadding = 16.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }
@ -82,7 +82,7 @@ fun BrowseFilterBottomSheet() {
showTitle = false, showTitle = false,
showDivider = false, showDivider = false,
topPadding = 16.dp, topPadding = 16.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }

View file

@ -109,7 +109,7 @@ fun ReaderSettingsBottomSheet() {
titleColor = { MaterialTheme.colorScheme.onSurface }, titleColor = { MaterialTheme.colorScheme.onSurface },
showDivider = false, showDivider = false,
topPadding = 22.dp, topPadding = 22.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }
@ -130,7 +130,7 @@ fun ReaderSettingsBottomSheet() {
titleColor = { MaterialTheme.colorScheme.onSurface }, titleColor = { MaterialTheme.colorScheme.onSurface },
showDivider = false, showDivider = false,
topPadding = 22.dp, topPadding = 22.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }
@ -142,7 +142,7 @@ fun ReaderSettingsBottomSheet() {
showDivider = false, showDivider = false,
backgroundColor = { MaterialTheme.colorScheme.surfaceContainer }, backgroundColor = { MaterialTheme.colorScheme.surfaceContainer },
topPadding = 16.dp, topPadding = 16.dp,
bottomPadding = 8.dp + it bottomPadding = 8.dp
) )
} }
} }