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,32 +110,33 @@ 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 =
it.setContent { ComposeView(context).also {
SheetView( it.setContent {
state = sheetState, SheetView(
innerView = reactRootView, state = sheetState,
contentHeight = innerView.height.toFloat(), innerView = reactRootView,
onDismissRequest = { contentHeight = innerView.height.toFloat(),
onAttemptDismiss(mapOf()) onDismissRequest = {
if (!preventDismiss) { onAttemptDismiss(mapOf())
dismiss() if (!preventDismiss) {
} dismiss()
}, }
onExpanded = { },
isOpening = false onExpanded = {
isOpen = true isOpening = false
hasInitiallyOpened = true isOpen = true
}, hasInitiallyOpened = true
onHidden = { },
if (hasInitiallyOpened) { onHidden = {
destroy() if (hasInitiallyOpened) {
} destroy()
} }
) },
)
}
getRootLayout().addView(it)
} }
getRootLayout().addView(it)
}
} }
fun dismiss() { fun dismiss() {
@@ -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,46 +5,49 @@ 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() =
Name("BlueskyBottomSheet") ModuleDefinition {
Name("BlueskyBottomSheet")
Function("getSafeAreaInset") { Function("getSafeAreaInset") {
return@Function 10 // @TODO return@Function 10 // @TODO
}
View(BottomSheetView::class) {
Events(arrayOf(
"onStateChange",
"onAttemptDismiss",
))
AsyncFunction("dismiss") { view: BottomSheetView ->
view.dismiss()
} }
Prop("preventDismiss") { view: BottomSheetView, prop: Boolean -> View(BottomSheetView::class) {
view.preventDismiss = prop Events(
} arrayOf(
"onStateChange",
"onAttemptDismiss",
),
)
Prop("minHeight") { view: BottomSheetView, prop: Float -> AsyncFunction("dismiss") { view: BottomSheetView ->
view.minHeight = prop view.dismiss()
} }
Prop("maxHeight") { view: BottomSheetView, prop: Float -> Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
view.maxHeight = prop view.preventDismiss = prop
} }
Prop("cornerRadius") { view: BottomSheetView, prop: Float -> Prop("minHeight") { view: BottomSheetView, prop: Float ->
view.sheetState.value.cornerRadius = prop view.minHeight = prop
} }
Prop("containerBackgroundColor") { view: BottomSheetView, prop: String -> Prop("maxHeight") { view: BottomSheetView, prop: Float ->
view.sheetState.value.containerBackgroundColor = Color.parseColor(prop) view.maxHeight = prop
} }
Prop("preventExpansion") { view: BottomSheetView, prop: Boolean -> Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
view.sheetState.value.preventExpansion = prop view.sheetState.value.cornerRadius = prop
}
Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
}
Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
view.sheetState.value.preventExpansion = prop
}
} }
} }
}
} }
@@ -21,7 +21,7 @@ import androidx.compose.ui.viewinterop.AndroidView
data class SheetState( data class SheetState(
var isOpen: Boolean = false, var isOpen: Boolean = false,
var cornerRadius: Float? = null, var cornerRadius: Float? = null,
var containerBackgroundColor: Int ? = null, var containerBackgroundColor: Int? = null,
var preventExpansion: Boolean = false, var preventExpansion: Boolean = false,
) )
@@ -40,20 +40,22 @@ fun SheetView(
ModalBottomSheet( ModalBottomSheet(
sheetState = sheetState, sheetState = sheetState,
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
shape = RoundedCornerShape( shape =
topStart = state.value.cornerRadius ?: 0f, RoundedCornerShape(
topEnd = state.value.cornerRadius ?: 0f, topStart = 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 },
) )
} }
} }