This commit is contained in:
Hailey
2024-10-03 08:54:06 -07:00
parent fba3cce81e
commit 54ebc4036e
2 changed files with 56 additions and 24 deletions
@@ -53,4 +53,5 @@ dependencies {
implementation "androidx.compose.material3:material3:1.3.0" implementation "androidx.compose.material3:material3:1.3.0"
implementation "androidx.compose.material:material:1.7.2" implementation "androidx.compose.material:material:1.7.2"
implementation "com.facebook.react:react-native:+" implementation "com.facebook.react:react-native:+"
implementation("com.composables:core:1.12.0")
} }
@@ -1,22 +1,37 @@
package expo.modules.bottomsheet package expo.modules.bottomsheet
import android.util.Log
import android.view.View import android.view.View
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetValue import androidx.compose.material3.SheetValue
import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState import androidx.compose.runtime.MutableState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView import androidx.compose.ui.viewinterop.AndroidView
import com.composables.core.BottomSheet
import com.composables.core.SheetDetent
import com.composables.core.SheetDetent.Companion.FullyExpanded
import com.composables.core.SheetDetent.Companion.Hidden
import com.composables.core.rememberBottomSheetState
import kotlinx.coroutines.launch
import kotlin.annotations.jvm.Mutable
data class SheetState( data class SheetState(
var isOpen: Boolean = false, var isOpen: Boolean = false,
@@ -29,41 +44,57 @@ data class SheetState(
@Composable @Composable
fun SheetView( fun SheetView(
state: MutableState<SheetState>, state: MutableState<SheetState>,
openState: MutableState<Boolean>,
innerView: View, innerView: View,
contentHeight: Float, contentHeight: Float,
onDismissRequest: () -> Unit, onDismissRequest: () -> Unit,
onExpanded: () -> Unit, onExpanded: () -> Unit,
onHidden: () -> Unit, onHidden: () -> Unit,
) { ) {
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false) val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight ->
containerHeight*0.6f
}
ModalBottomSheet( val scope = rememberCoroutineScope()
sheetState = sheetState,
onDismissRequest = onDismissRequest, val sheetState = rememberBottomSheetState(
shape = initialDetent = Hidden,
RoundedCornerShape( detents = listOf(Hidden, Peek, FullyExpanded)
topStart = state.value.cornerRadius ?: 0f, )
topEnd = state.value.cornerRadius ?: 0f,
), BottomSheet(
containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT), state = sheetState,
) { modifier = Modifier.fillMaxWidth()
Column( .shadow(4.dp)
Modifier .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f))
.fillMaxWidth() .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT))
.height(contentHeight.dp) .imePadding()
// Prevent covering up the handle // onDismissRequest = onDismissRequest,
.padding(top = 34.dp), // shape =
// RoundedCornerShape(
// topStart = state.value.cornerRadius ?: 0f,
// topEnd = state.value.cornerRadius ?: 0f,
// ),
// containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
) { ) {
AndroidView( AndroidView(
factory = { innerView }, factory = { innerView },
) )
} }
LaunchedEffect(openState) {
Log.d("SheetView", "openState: ${openState.value}")
if (openState.value) {
sheetState.currentDetent = Peek
} else {
sheetState.currentDetent = Hidden
}
} }
LaunchedEffect(sheetState.currentValue) { LaunchedEffect(sheetState.currentDetent) {
if (sheetState.currentValue == SheetValue.PartiallyExpanded || sheetState.currentValue == SheetValue.Expanded) { if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) {
onExpanded() onExpanded()
} else if (sheetState.currentValue == SheetValue.Hidden) { } else if (sheetState.currentDetent == Hidden) {
onHidden() onHidden()
} }
} }