Migrate the ModalBottomSheet to Compose Unstyled

gradle/libs.versions.toml

@@ -34,6 +34,7 @@ startup = "1.1.1"
 moshi = "1.15.1"
 testCoreKtx = "1.6.1"
 mockwebserver = "4.12.0"
+composablesCore = "1.14.0"
 
 [libraries]
 kotlinx-coroutines = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-android", version.ref = "kotlinCoroutines" }
@@ -76,7 +77,8 @@ roborazzi = { group = "io.github.takahirom.roborazzi", name = "roborazzi", versi
 roborazzi-compose = { group = "io.github.takahirom.roborazzi", name = "roborazzi-compose", version.ref = "roborazzi" }
 roborazzi-junit-rule = { group = "io.github.takahirom.roborazzi", name = "roborazzi-junit-rule", version.ref = "roborazzi" }
 turbine = { group = "app.cash.turbine", name = "turbine", version.ref = "turbine" }
-mockwebserver = { group = "com.squareup.okhttp3", name = "mockwebserver", version.ref = "mockwebserver"}
+mockwebserver = { group = "com.squareup.okhttp3", name = "mockwebserver", version.ref = "mockwebserver" }
+composables-core = {group = "com.composables", name = "core", version.ref = "composablesCore" }
 
 
 [plugins]

gravatar-quickeditor/build.gradle.kts

@@ -121,6 +121,7 @@ dependencies {
     implementation(libs.androidx.activity.compose)
     implementation(libs.compose.adaptive)
     debugImplementation(libs.androidx.compose.ui.tooling)
+    implementation(libs.composables.core)
 
     testImplementation(libs.junit)
     testImplementation(libs.mockk.android)

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/components/QEDragHandle.kt

@@ -1,28 +1,26 @@
 package com.gravatar.quickeditor.ui.components
 
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.composables.core.BottomSheetScope
+import com.composables.core.DragIndication
 
 @Composable
-internal fun QEDragHandle(modifier: Modifier = Modifier) {
-    Surface(
+internal fun BottomSheetScope.QEDragHandle(modifier: Modifier = Modifier) {
+    DragIndication(
         modifier = modifier
-            .padding(top = 10.dp),
-        shape = MaterialTheme.shapes.extraLarge,
-        color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.4f),
-    ) {
-        Box(
-            Modifier
-                .size(
-                    width = 32.dp,
-                    height = 4.dp,
-                ),
-        )
-    }
+            .padding(top = 10.dp)
+            .background(
+                MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.4f),
+                MaterialTheme.shapes.extraLarge,
+            )
+            .width(32.dp)
+            .height(4.dp),
+    )
 }

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/editor/bottomsheet/GravatarQuickEditorBottomSheet.kt

@@ -1,20 +1,37 @@
 package com.gravatar.quickeditor.ui.editor.bottomsheet
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Surface
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
-import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import androidx.window.core.layout.WindowHeightSizeClass
+import com.composables.core.ModalBottomSheet
+import com.composables.core.ModalBottomSheetState
+import com.composables.core.Scrim
+import com.composables.core.Sheet
+import com.composables.core.SheetDetent
+import com.composables.core.SheetDetent.Companion.FullyExpanded
+import com.composables.core.SheetDetent.Companion.Hidden
+import com.composables.core.rememberModalBottomSheetState
 import com.gravatar.quickeditor.ui.components.QEDragHandle
 import com.gravatar.quickeditor.ui.components.QETopBar
 import com.gravatar.quickeditor.ui.editor.AuthenticationMethod
@@ -38,41 +55,31 @@ import kotlinx.coroutines.launch
  * @param onDismiss The callback for the dismiss action.
  *                  [GravatarQuickEditorError] will be non-null if the dismiss was caused by an error.
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 public fun GravatarQuickEditorBottomSheet(
     gravatarQuickEditorParams: GravatarQuickEditorParams,
     authenticationMethod: AuthenticationMethod,
     onAvatarSelected: () -> Unit,
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit = {},
 ) {
-    val windowHeightSizeClass = currentWindowAdaptiveInfo().windowSizeClass.windowHeightSizeClass
     GravatarQuickEditorBottomSheet(
         gravatarQuickEditorParams = gravatarQuickEditorParams,
         authenticationMethod = authenticationMethod,
         onAvatarSelected = onAvatarSelected,
         onDismiss = onDismiss,
-        modalBottomSheetState = if (windowHeightSizeClass == WindowHeightSizeClass.COMPACT) {
-            rememberModalBottomSheetState(
-                skipPartiallyExpanded = true,
-            )
-        } else {
-            rememberModalBottomSheetState(
-                skipPartiallyExpanded =
-                    gravatarQuickEditorParams.avatarPickerContentLayout == AvatarPickerContentLayout.Horizontal,
-            )
-        },
+        modalBottomSheetState = rememberGravatarModalBottomSheetState(
+            avatarPickerContentLayout = gravatarQuickEditorParams.avatarPickerContentLayout,
+        ),
     )
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun GravatarQuickEditorBottomSheet(
     gravatarQuickEditorParams: GravatarQuickEditorParams,
     authenticationMethod: AuthenticationMethod,
     onAvatarSelected: () -> Unit,
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit = {},
-    modalBottomSheetState: SheetState,
+    modalBottomSheetState: ModalBottomSheetState,
 ) {
     GravatarModalBottomSheet(
         onDismiss = onDismiss,
@@ -100,41 +107,96 @@ internal fun GravatarQuickEditorBottomSheet(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun GravatarModalBottomSheet(
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit = {},
-    modalBottomSheetState: SheetState,
+    modalBottomSheetState: ModalBottomSheetState,
     content: @Composable () -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
 
+    LaunchedEffect(modalBottomSheetState.currentDetent) {
+        if (modalBottomSheetState.currentDetent == Hidden) {
+            onDismiss(GravatarQuickEditorDismissReason.Finished)
+        }
+    }
+
     GravatarTheme {
         ModalBottomSheet(
-            onDismissRequest = { onDismiss(GravatarQuickEditorDismissReason.Finished) },
-            sheetState = modalBottomSheetState,
-            dragHandle = { QEDragHandle() },
-            containerColor = MaterialTheme.colorScheme.surface,
-            tonalElevation = 1.dp,
-            contentWindowInsets = { WindowInsets(0, 0, 0, 0) },
+            state = modalBottomSheetState,
         ) {
-            Surface(
-                modifier = Modifier.navigationBarsPadding(),
+            Scrim(
+                modifier = Modifier.clickable { modalBottomSheetState.currentDetent = Hidden },
+                scrimColor = MaterialTheme.colorScheme.scrim.copy(alpha = 0.32f),
+            )
+            Sheet(
+                modifier = Modifier
+                    .clip(RoundedCornerShape(topStart = 28.dp, topEnd = 28.dp))
+                    .background(MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp))
+                    .widthIn(max = 640.dp)
+                    .fillMaxWidth()
+                    .padding(
+                        WindowInsets.navigationBars
+                            .only(WindowInsetsSides.Vertical)
+                            .asPaddingValues(),
+                    ),
             ) {
-                Column {
-                    QETopBar(
-                        onDoneClick = {
-                            coroutineScope.launch {
-                                modalBottomSheetState.hide()
-                                onDismiss(GravatarQuickEditorDismissReason.Finished)
-                            }
-                        },
-                    )
-                    content()
+                Surface(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    tonalElevation = 1.dp,
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                    ) {
+                        QEDragHandle()
+                        QETopBar(
+                            onDoneClick = {
+                                coroutineScope.launch {
+                                    modalBottomSheetState.currentDetent = Hidden
+                                }
+                            },
+                        )
+                        content()
+                    }
                 }
             }
         }
     }
 }
 
+@Composable
+internal fun rememberGravatarModalBottomSheetState(
+    avatarPickerContentLayout: AvatarPickerContentLayout,
+): ModalBottomSheetState {
+    val windowHeightSizeClass = currentWindowAdaptiveInfo().windowSizeClass.windowHeightSizeClass
+    val peek = SheetDetent(identifier = "peek") { containerHeight, _ ->
+        containerHeight * 0.6f
+    }
+
+    val initialDetent =
+        if (windowHeightSizeClass == WindowHeightSizeClass.COMPACT) {
+            FullyExpanded
+        } else {
+            when (avatarPickerContentLayout) {
+                AvatarPickerContentLayout.Horizontal -> FullyExpanded
+                AvatarPickerContentLayout.Vertical -> peek
+            }
+        }
+
+    val detents = buildList {
+        add(Hidden)
+        if (avatarPickerContentLayout == AvatarPickerContentLayout.Horizontal) {
+            add(FullyExpanded)
+        } else {
+            add(peek)
+            add(FullyExpanded)
+        }
+    }
+    return rememberModalBottomSheetState(
+        initialDetent = initialDetent,
+        detents = detents,
+    )
+}
+
 internal val DEFAULT_PAGE_HEIGHT = 250.dp

gravatar-quickeditor/src/main/java/com/gravatar/quickeditor/ui/editor/extensions/QuickEditorExtensions.kt

@@ -2,21 +2,18 @@ package com.gravatar.quickeditor.ui.editor.extensions
 
 import android.view.ViewGroup
 import androidx.activity.compose.BackHandler
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.SheetValue
-import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.platform.ComposeView
+import com.composables.core.SheetDetent.Companion.Hidden
 import com.gravatar.quickeditor.ui.editor.AuthenticationMethod
 import com.gravatar.quickeditor.ui.editor.GravatarQuickEditorDismissReason
 import com.gravatar.quickeditor.ui.editor.GravatarQuickEditorParams
 import com.gravatar.quickeditor.ui.editor.bottomsheet.GravatarQuickEditorBottomSheet
+import com.gravatar.quickeditor.ui.editor.bottomsheet.rememberGravatarModalBottomSheetState
 import kotlinx.coroutines.launch
 
 internal fun addQuickEditorToView(
@@ -42,7 +39,6 @@ internal fun addQuickEditorToView(
     )
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun GravatarQuickEditorBottomSheetWrapper(
     parent: ViewGroup,
@@ -53,9 +49,10 @@ private fun GravatarQuickEditorBottomSheetWrapper(
     onDismiss: (dismissReason: GravatarQuickEditorDismissReason) -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
-    var isSheetOpened by remember { mutableStateOf(false) }
 
-    val modalBottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    val modalBottomSheetState = rememberGravatarModalBottomSheetState(
+        avatarPickerContentLayout = gravatarQuickEditorParams.avatarPickerContentLayout,
+    )
 
     GravatarQuickEditorBottomSheet(
         gravatarQuickEditorParams = gravatarQuickEditorParams,
@@ -67,23 +64,15 @@ private fun GravatarQuickEditorBottomSheetWrapper(
 
     BackHandler {
         coroutineScope.launch {
-            modalBottomSheetState.hide()
+            modalBottomSheetState.currentDetent = Hidden
         }
-        onDismiss(GravatarQuickEditorDismissReason.Finished)
     }
 
-    LaunchedEffect(modalBottomSheetState.currentValue) {
-        when (modalBottomSheetState.currentValue) {
-            SheetValue.Hidden -> {
-                if (isSheetOpened) {
-                    parent.removeView(composeView)
-                } else {
-                    isSheetOpened = true
-                    modalBottomSheetState.show()
-                }
+    LaunchedEffect(modalBottomSheetState.currentDetent) {
+        when (modalBottomSheetState.currentDetent) {
+            Hidden -> {
+                parent.removeView(composeView)
             }
-
-            else -> Unit
         }
     }
 }