This commit is contained in:
Hailey
2024-10-02 17:53:33 -07:00
parent d007151f49
commit 2ac8308ecb
4 changed files with 100 additions and 78 deletions
@@ -11,7 +11,10 @@ import expo.modules.kotlin.AppContext
import expo.modules.kotlin.viewevent.EventDispatcher import expo.modules.kotlin.viewevent.EventDispatcher
import expo.modules.kotlin.views.ExpoView import expo.modules.kotlin.views.ExpoView
class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(context, appContext) { class BottomSheetView(
context: Context,
appContext: AppContext,
) : ExpoView(context, appContext) {
val sheetState = mutableStateOf(SheetState()) val sheetState = mutableStateOf(SheetState())
private var reactRootView: ReactRootView? = null private var reactRootView: ReactRootView? = null
@@ -33,9 +36,11 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
field = value field = value
this.sheetState.value.isOpen = value this.sheetState.value.isOpen = value
onStateChange(mapOf( onStateChange(
"state" to if (value) "open" else "closed" mapOf(
)) "state" to if (value) "open" else "closed",
),
)
} }
private var isOpening: Boolean = false private var isOpening: Boolean = false
@@ -58,13 +63,26 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
// Lifecycle // Lifecycle
override fun addView(child: View?, index: Int) { override fun addView(
child: View?,
index: Int,
) {
this.innerView = child this.innerView = child
} }
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { override fun onLayout(
changed: Boolean,
l: Int,
t: Int,
r: Int,
b: Int,
) {
this.innerView?.let { this.innerView?.let {
val height = it.allViews.last().measuredHeight.toFloat() val height =
it.allViews
.last()
.measuredHeight
.toFloat()
this.present(height) this.present(height)
} }
} }
@@ -92,7 +110,8 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
this.reactRootView = reactRootView this.reactRootView = reactRootView
this.isOpening = true this.isOpening = true
this.sheetView = ComposeView(context).also { this.sheetView =
ComposeView(context).also {
it.setContent { it.setContent {
SheetView( SheetView(
state = sheetState, state = sheetState,
@@ -113,7 +132,7 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
if (hasInitiallyOpened) { if (hasInitiallyOpened) {
destroy() destroy()
} }
} },
) )
} }
getRootLayout().addView(it) getRootLayout().addView(it)
@@ -127,7 +146,5 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
// Utils // Utils
private fun getRootLayout(): FrameLayout { private fun getRootLayout(): FrameLayout = appContext.currentActivity!!.findViewById(android.R.id.content)
return appContext.currentActivity!!.findViewById(android.R.id.content)
}
} }
@@ -5,7 +5,8 @@ import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition import expo.modules.kotlin.modules.ModuleDefinition
class BottomSheetModule : Module() { class BottomSheetModule : Module() {
override fun definition() = ModuleDefinition { override fun definition() =
ModuleDefinition {
Name("BlueskyBottomSheet") Name("BlueskyBottomSheet")
Function("getSafeAreaInset") { Function("getSafeAreaInset") {
@@ -13,10 +14,12 @@ class BottomSheetModule : Module() {
} }
View(BottomSheetView::class) { View(BottomSheetView::class) {
Events(arrayOf( Events(
arrayOf(
"onStateChange", "onStateChange",
"onAttemptDismiss", "onAttemptDismiss",
)) ),
)
AsyncFunction("dismiss") { view: BottomSheetView -> AsyncFunction("dismiss") { view: BottomSheetView ->
view.dismiss() view.dismiss()
@@ -40,20 +40,22 @@ fun SheetView(
ModalBottomSheet( ModalBottomSheet(
sheetState = sheetState, sheetState = sheetState,
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
shape = RoundedCornerShape( shape =
RoundedCornerShape(
topStart = state.value.cornerRadius ?: 0f, topStart = state.value.cornerRadius ?: 0f,
topEnd = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f,
), ),
containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT), containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
) { ) {
Column( Column(
Modifier.fillMaxWidth() Modifier
.fillMaxWidth()
.height(contentHeight.dp) .height(contentHeight.dp)
// Prevent covering up the handle // Prevent covering up the handle
.padding(top = 34.dp) .padding(top = 34.dp),
) { ) {
AndroidView( AndroidView(
factory = { innerView } factory = { innerView },
) )
} }
} }