Fix AdaptiveDatePicker cutoff when using padding on iOS

MohamedRejeb · Aug 26, 2024 · e1f0c55 · e1f0c55
1 parent 48dfa8b
commit e1f0c55
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/AdaptiveDatePicker.ios.kt b/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/AdaptiveDatePicker.ios.kt
@@ -1,7 +1,8 @@
 package com.mohamedrejeb.calf.ui.datepicker
 
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.DatePickerColors
 import androidx.compose.material3.DatePickerFormatter
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -10,7 +11,6 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.interop.UIKitView
-import androidx.compose.ui.unit.dp
 import com.mohamedrejeb.calf.core.InternalCalfApi
 import kotlinx.cinterop.ExperimentalForeignApi
 import platform.UIKit.UIDatePicker
@@ -46,23 +46,26 @@ actual fun AdaptiveDatePicker(
         datePickerManager.applyColors(colors)
     }
 
-    UIKitView(
-        factory = {
-            datePicker
-        },
-        background = colors.containerColor,
+    Box(
         modifier = modifier
-            .then(
-                if (datePickerManager.datePickerWidth.value > 0f)
-                    Modifier.width(datePickerManager.datePickerWidth.value.dp)
-                else
-                    Modifier
-            )
-            .then(
-                if (datePickerManager.datePickerHeight.value > 0f)
-                    Modifier.height(datePickerManager.datePickerHeight.value.dp)
-                else
-                    Modifier
-            )
-    )
+    ) {
+        UIKitView(
+            factory = {
+                datePicker
+            },
+            onResize = { _, size ->
+                datePicker.setFrame(size)
+            },
+            background = colors.containerColor,
+            modifier = Modifier
+                .fillMaxWidth()
+                .then(
+                    if (datePickerManager.aspectRatio.isFinite() && datePickerManager.aspectRatio > 0f)
+                        Modifier
+                            .aspectRatio(datePickerManager.aspectRatio)
+                    else
+                        Modifier
+                )
+        )
+    }
 }
diff --git a/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/DatePickerManager.kt b/calf-ui/src/iosMain/kotlin/com/mohamedrejeb/calf/ui/datepicker/DatePickerManager.kt
@@ -2,7 +2,9 @@ package com.mohamedrejeb.calf.ui.datepicker
 
 import androidx.compose.material3.DatePickerColors
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.setValue
 import com.mohamedrejeb.calf.core.InternalCalfApi
 import com.mohamedrejeb.calf.ui.utils.applyTheme
 import com.mohamedrejeb.calf.ui.utils.datetime.KotlinxDatetimeCalendarModel
@@ -47,8 +49,8 @@ class DatePickerManager @OptIn(ExperimentalMaterial3Api::class) internal constru
         )
     }
 
-    internal val datePickerWidth = mutableStateOf(0f)
-    internal val datePickerHeight = mutableStateOf(0f)
+    internal var aspectRatio by mutableFloatStateOf(0f)
+        private set
 
     init {
         val date =
@@ -79,8 +81,7 @@ class DatePickerManager @OptIn(ExperimentalMaterial3Api::class) internal constru
             forControlEvents = UIControlEventValueChanged
         )
         datePicker.frame.useContents {
-            datePickerWidth.value = this.size.width.toFloat()
-            datePickerHeight.value = this.size.height.toFloat()
+            aspectRatio = this.size.width.toFloat() / this.size.height.toFloat()
         }
         applyColors(colors)
     }