tweak
This commit is contained in:
@@ -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()
|
||||||
|
.shadow(4.dp)
|
||||||
|
.clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f))
|
||||||
|
.background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT))
|
||||||
|
.imePadding()
|
||||||
|
// onDismissRequest = onDismissRequest,
|
||||||
|
// shape =
|
||||||
|
// RoundedCornerShape(
|
||||||
|
// topStart = state.value.cornerRadius ?: 0f,
|
||||||
|
// topEnd = state.value.cornerRadius ?: 0f,
|
||||||
|
// ),
|
||||||
|
// containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
|
||||||
) {
|
) {
|
||||||
Column(
|
AndroidView(
|
||||||
Modifier
|
factory = { innerView },
|
||||||
.fillMaxWidth()
|
)
|
||||||
.height(contentHeight.dp)
|
}
|
||||||
// Prevent covering up the handle
|
|
||||||
.padding(top = 34.dp),
|
LaunchedEffect(openState) {
|
||||||
) {
|
Log.d("SheetView", "openState: ${openState.value}")
|
||||||
AndroidView(
|
if (openState.value) {
|
||||||
factory = { innerView },
|
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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user