library: Opt dialog & popup

* Display dialog in the center when in landscape mode * Add BackHandler to dialog & popup
miuix-kotlin-multiplatform · Aug 31, 2024 · f64767c · f64767c
1 parent 72e0718
commit f64767c
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 9 deletions.
diff --git a/composeApp/src/desktopMain/kotlin/main.kt b/composeApp/src/desktopMain/kotlin/main.kt
@@ -16,7 +16,7 @@ fun main() = application {
         onCloseRequest = ::exitApplication,
         title = "Miuix",
     ) {
-        WindowSizeProvider.init(window)
+        WindowProvider.init(window)
         App()
     }
 }
diff --git a/miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.android.kt b/miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.android.kt
@@ -3,6 +3,7 @@ package top.yukonga.miuix.kmp
 import android.annotation.SuppressLint
 import android.os.Build
 import android.view.RoundedCorner
+import androidx.activity.compose.BackHandler
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
@@ -35,4 +36,15 @@ fun getCornerRadiusBottom(): Int {
     val context = LocalContext.current
     val resourceId = context.resources.getIdentifier("rounded_corner_radius_bottom", "dimen", "android")
     return if (resourceId > 0) context.resources.getDimensionPixelSize(resourceId) else 0
+}
+
+@Composable
+actual fun BackHandler(
+    dismiss: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    BackHandler {
+        dismiss()
+        onDismissRequest()
+    }
 }
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperArrow.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperArrow.kt
@@ -13,8 +13,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import top.yukonga.miuix.kmp.basic.MiuixBasicComponent
 import top.yukonga.miuix.kmp.basic.MiuixText
-import top.yukonga.miuix.kmp.icon.icons.ArrowRight
 import top.yukonga.miuix.kmp.icon.MiuixIcons
+import top.yukonga.miuix.kmp.icon.icons.ArrowRight
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.kt
@@ -6,7 +6,9 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.pointer.pointerInput
@@ -16,6 +18,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import getWindowSize
 import top.yukonga.miuix.kmp.basic.MiuixBox
 import top.yukonga.miuix.kmp.basic.MiuixText
 import top.yukonga.miuix.kmp.theme.MiuixTheme
@@ -28,6 +31,12 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
 @Composable
 expect fun getRoundedCorner(): Dp
 
+@Composable
+expect fun BackHandler(
+    dismiss: () -> Unit,
+    onDismissRequest: () -> Unit
+)
+
 /**
  * A dialog with a title, a summary, and a content.
  *
@@ -45,10 +54,16 @@ fun MiuixSuperDialog(
     insideMargin: DpSize = DpSize(14.dp, 14.dp),
     content: @Composable () -> Unit
 ) {
-    val bottomCornerRadius = if (getRoundedCorner() != 0.dp) getRoundedCorner() - insideMargin.width else 32.dp
+    val bottomCornerRadius = rememberUpdatedState(if (getRoundedCorner() != 0.dp) getRoundedCorner() - insideMargin.width else 32.dp)
+    val getWindowSize = rememberUpdatedState(getWindowSize())
+    val contentAlignment = if (getWindowSize.value.width > getWindowSize.value.height) Alignment.Center else Alignment.BottomCenter
+
+    BackHandler(
+        dismiss = { dismissDialog() },
+        onDismissRequest = onDismissRequest
+    )
 
     MiuixBox(
-        contentAlignment = Alignment.BottomCenter,
         modifier = Modifier
             .fillMaxSize()
             .padding(horizontal = insideMargin.width)
@@ -62,13 +77,14 @@ fun MiuixSuperDialog(
     ) {
         Column(
             modifier = Modifier
+                .then(if (contentAlignment != Alignment.Center) Modifier.fillMaxWidth() else Modifier.widthIn(max = 400.dp))
                 .pointerInput(Unit) {
                     detectTapGestures { /* Do nothing to consume the click */ }
                 }
-                .fillMaxWidth()
+                .align(contentAlignment)
                 .background(
                     color = MiuixTheme.colorScheme.dropdownBackground,
-                    shape = SquircleShape(bottomCornerRadius)
+                    shape = SquircleShape(bottomCornerRadius.value)
                 )
                 .padding(24.dp),
         ) {

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDropdown.kt
@@ -181,13 +181,17 @@ fun MiuixSuperDropdown(
     if (isDropdownExpanded.value) hapticFeedback.performHapticFeedback(HapticFeedbackType.LongPress)
 
     if (isDropdownExpanded.value) {
+        BackHandler(
+            dismiss = { dismissPopup() },
+            onDismissRequest = { isDropdownExpanded.value = false }
+        )
         showPopup(
             content = {
                 MiuixBox(
                     modifier = Modifier
                         .fillMaxSize()
                         .pointerInput(Unit) {
-                            detectTapGestures(onPress = {
+                            detectTapGestures(onTap = {
                                 dismissPopup()
                                 isDropdownExpanded.value = false
                             })

diff --git a/miuix/src/desktopMain/kotlin/expectUtils.desktop.kt b/miuix/src/desktopMain/kotlin/expectUtils.desktop.kt
@@ -3,7 +3,7 @@ import androidx.compose.ui.awt.ComposeWindow
 import androidx.compose.ui.platform.LocalDensity
 import kotlin.math.roundToInt
 
-object WindowSizeProvider {
+object WindowProvider {
     private var composeWindow: ComposeWindow? = null
 
     fun init(window: ComposeWindow) {
@@ -23,7 +23,7 @@ object WindowSizeProvider {
 @Composable
 actual fun getWindowSize(): WindowSize {
     val density = LocalDensity.current.density
-    val windowSize = WindowSizeProvider.getWindowSize()
+    val windowSize = WindowProvider.getWindowSize()
     return WindowSize(
         width = (windowSize.width * density).roundToInt(),
         height = (windowSize.height * density).roundToInt()

diff --git a/miuix/src/desktopMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.desktop.kt b/miuix/src/desktopMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.desktop.kt
@@ -6,3 +6,10 @@ import androidx.compose.ui.unit.dp
 
 @Composable
 actual fun getRoundedCorner(): Dp = 0.dp
+
+@Composable
+actual fun BackHandler(
+    dismiss: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+}
diff --git a/miuix/src/iosMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.ios.kt b/miuix/src/iosMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.ios.kt
@@ -6,3 +6,10 @@ import androidx.compose.ui.unit.dp
 
 @Composable
 actual fun getRoundedCorner(): Dp = 0.dp
+
+@Composable
+actual fun BackHandler(
+    dismiss: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+}
diff --git a/miuix/src/wasmJsMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.wasmJs.kt b/miuix/src/wasmJsMain/kotlin/top/yukonga/miuix/kmp/MiuixSuperDialog.wasmJs.kt
@@ -1,9 +1,26 @@
 package top.yukonga.miuix.kmp
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import kotlinx.browser.window
+import org.w3c.dom.events.KeyboardEvent
 
 @Composable
 actual fun getRoundedCorner(): Dp = 0.dp
 
+@Composable
+actual fun BackHandler(
+    dismiss: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    LaunchedEffect(Unit) {
+        window.addEventListener("keydown") { event ->
+            if ((event as KeyboardEvent).key == "Escape") {
+                dismiss()
+                onDismissRequest()
+            }
+        }
+    }
+}