fix: rtl layout direction of time picker (closes #376)

you-apps · Nov 4, 2024 · a829fb9 · a829fb9
1 parent 0e3fe4c
commit a829fb9
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 102 deletions.
diff --git a/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt b/app/src/main/java/com/bnyro/clock/presentation/components/TimePickerDial.kt
@@ -8,10 +8,13 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import com.bnyro.clock.R
 import com.bnyro.clock.presentation.screens.timer.components.ScrollTimePicker
@@ -20,62 +23,66 @@ import com.bnyro.clock.presentation.screens.timer.model.TimerModel
 @Composable
 fun TimePickerDial(timerModel: TimerModel) {
     Column {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(40.dp)
-        ) {
-            Text(
-                text = stringResource(R.string.hours),
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.primary
-            )
-            Text(
-                text = stringResource(R.string.minutes),
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.primary
-            )
-            Text(
-                text = stringResource(R.string.seconds),
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.primary
-            )
+        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(40.dp)
+            ) {
+                Text(
+                    text = stringResource(R.string.hours),
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                Text(
+                    text = stringResource(R.string.minutes),
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                Text(
+                    text = stringResource(R.string.seconds),
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.primary
+                )
+            }
         }
         Spacer(modifier = Modifier.height(32.dp))
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(16.dp)
-        ) {
-            ScrollTimePicker(
-                value = remember { timerModel.hours },
-                onValueChanged = {
-                    timerModel.hours = it
-                },
-                maxValue = 24
-            )
-            Text(
-                text = ":",
-                style = MaterialTheme.typography.displayMedium,
-                color = MaterialTheme.colorScheme.primary
-            )
-            ScrollTimePicker(
-                value = remember { timerModel.minutes },
-                onValueChanged = {
-                    timerModel.minutes = it
-                },
-                maxValue = 60
-            )
-            Text(
-                text = ":",
-                style = MaterialTheme.typography.displayMedium,
-                color = MaterialTheme.colorScheme.primary
-            )
-            ScrollTimePicker(
-                value = remember { timerModel.seconds },
-                onValueChanged = {
-                    timerModel.seconds = it
-                },
-                maxValue = 60
-            )
+        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(16.dp)
+            ) {
+                ScrollTimePicker(
+                    value = remember { timerModel.hours },
+                    onValueChanged = {
+                        timerModel.hours = it
+                    },
+                    maxValue = 24
+                )
+                Text(
+                    text = ":",
+                    style = MaterialTheme.typography.displayMedium,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                ScrollTimePicker(
+                    value = remember { timerModel.minutes },
+                    onValueChanged = {
+                        timerModel.minutes = it
+                    },
+                    maxValue = 60
+                )
+                Text(
+                    text = ":",
+                    style = MaterialTheme.typography.displayMedium,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                ScrollTimePicker(
+                    value = remember { timerModel.seconds },
+                    onValueChanged = {
+                        timerModel.seconds = it
+                    },
+                    maxValue = 60
+                )
+            }
         }
     }
 }
diff --git a/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt b/app/src/main/java/com/bnyro/clock/presentation/screens/alarm/components/AlarmTimePicker.kt
@@ -14,11 +14,15 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import com.bnyro.clock.presentation.screens.timer.components.ScrollTimePicker
 
@@ -44,62 +48,67 @@ fun AlarmTimePicker(
         modifier = Modifier.fillMaxWidth(),
         contentAlignment = Alignment.Center
     ) {
-        Row {
-            /**
-             * Hour value in 24 hour format 0-23
-             */
-            var hours = remember { initialHours }
-            ScrollTimePicker(
-                value = if (is24Hour) initialHours else initialHours % 24,
-                onValueChanged = {
-                    hours = if (is24Hour) {
-                        it
-                    } else {
-                        when (meridiem) {
-                            Meridiem.AM -> {
-                                if (it == 12) 0 else it
-                            }
+        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
+            Row {
+                /**
+                 * Hour value in 24 hour format 0-23
+                 */
+                /**
+                 * Hour value in 24 hour format 0-23
+                 */
+                var hours = remember { initialHours }
+                ScrollTimePicker(
+                    value = if (is24Hour) initialHours else initialHours % 24,
+                    onValueChanged = {
+                        hours = if (is24Hour) {
+                            it
+                        } else {
+                            when (meridiem) {
+                                Meridiem.AM -> {
+                                    if (it == 12) 0 else it
+                                }
 
-                            Meridiem.PM -> {
-                                if (it == 12) 12 else it + 12
+                                Meridiem.PM -> {
+                                    if (it == 12) 12 else it + 12
+                                }
                             }
                         }
-                    }
-                    assert(hours < 24)
-                    onHoursChanged(
-                        hours
-                    )
-                },
-                maxValue = if (is24Hour) 24 else 12,
-                offset = if (is24Hour) 0 else 1
-            )
-            Spacer(modifier = Modifier.width(16.dp))
-            ScrollTimePicker(value = initialMinutes, onValueChanged = {
-                onMinutesChanged(it)
-            }, maxValue = 60)
-            if (!is24Hour) {
+                        assert(hours < 24)
+                        onHoursChanged(
+                            hours
+                        )
+                    },
+                    maxValue = if (is24Hour) 24 else 12,
+                    offset = if (is24Hour) 0 else 1
+                )
                 Spacer(modifier = Modifier.width(16.dp))
-                MeridiemPicker(value = meridiem, onValueChanged = {
-                    hours = when (it) {
-                        Meridiem.PM -> {
-                            if (hours >= 12) {
-                                hours
+                ScrollTimePicker(value = initialMinutes, onValueChanged = {
+                    onMinutesChanged(it)
+                }, maxValue = 60)
+                if (!is24Hour) {
+                    Spacer(modifier = Modifier.width(16.dp))
+                    MeridiemPicker(value = meridiem, onValueChanged = {
+                        hours = when (it) {
+                            Meridiem.PM -> {
+                                if (hours >= 12) {
+                                    hours
+                                } else {
+                                    hours + 12
+                                }
+                            }
+
+                            Meridiem.AM -> if (hours >= 12) {
+                                hours - 12
                             } else {
-                                hours + 12
+                                hours
                             }
                         }
-
-                        Meridiem.AM -> if (hours >= 12) {
-                            hours - 12
-                        } else {
+                        assert(hours < 24)
+                        onHoursChanged(
                             hours
-                        }
-                    }
-                    assert(hours < 24)
-                    onHoursChanged(
-                        hours
-                    )
-                })
+                        )
+                    })
+                }
             }
         }
     }
@@ -138,3 +147,9 @@ fun MeridiemPicker(
 enum class Meridiem {
     AM, PM
 }
+
+@Preview
+@Composable
+fun AlarmTimePickerPreview() {
+    AlarmTimePicker(10, 20, {}) { }
+}