refactor: migrate SliderBottomSheet to M3 (#77)

* migrate SliderBottomSheet to M3 * update usage in advanced settings screen * rename variable for select number bottom sheet state in configure content screen
LiveFastEatTrashRaccoon · Nov 4, 2024 · a1d6ed9 · a1d6ed9
1 parent 5782379
commit a1d6ed9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 52 deletions.
diff --git a/...in/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/modals/SliderBottomSheet.kt b/...in/kotlin/com/livefast/eattrash/raccoonforlemmy/core/commonui/modals/SliderBottomSheet.kt
@@ -1,58 +1,65 @@
 package com.livefast.eattrash.raccoonforlemmy.core.commonui.modals
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetState
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 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.Alignment
 import androidx.compose.ui.Modifier
-import cafe.adriel.voyager.core.screen.Screen
+import androidx.compose.ui.text.style.TextAlign
 import com.livefast.eattrash.raccoonforlemmy.core.appearance.theme.Spacing
-import com.livefast.eattrash.raccoonforlemmy.core.commonui.components.BottomSheetHeader
 import com.livefast.eattrash.raccoonforlemmy.core.l10n.messages.LocalStrings
-import com.livefast.eattrash.raccoonforlemmy.core.navigation.di.getNavigationCoordinator
-import com.livefast.eattrash.raccoonforlemmy.core.notifications.NotificationCenterEvent
-import com.livefast.eattrash.raccoonforlemmy.core.notifications.di.getNotificationCenter
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
 
-class SliderBottomSheet(
-    private val min: Float,
-    private val max: Float,
-    private val initial: Float,
-) : Screen {
-    @Composable
-    override fun Content() {
-        val navigationCoordinator = remember { getNavigationCoordinator() }
-        val notificationCenter = remember { getNotificationCenter() }
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SliderBottomSheet(
+    sheetScope: CoroutineScope = rememberCoroutineScope(),
+    state: SheetState = rememberModalBottomSheetState(),
+    title: String,
+    min: Float,
+    max: Float,
+    initial: Float,
+    onSelected: ((Float?) -> Unit)? = null,
+) {
+    var value by remember {
+        mutableStateOf(initial)
+    }
+
+    ModalBottomSheet(
+        sheetState = state,
+        onDismissRequest = {
+            onSelected?.invoke(null)
+        },
+    ) {
         Column(
-            modifier =
-                Modifier
-                    .windowInsetsPadding(WindowInsets.navigationBars)
-                    .padding(
-                        top = Spacing.s,
-                        start = Spacing.s,
-                        end = Spacing.s,
-                        bottom = Spacing.m,
-                    ),
-            verticalArrangement = Arrangement.spacedBy(Spacing.s),
-            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.padding(bottom = Spacing.xl),
         ) {
-            BottomSheetHeader(LocalStrings.current.settingsZombieModeScrollAmount)
-            var value by remember {
-                mutableStateOf(initial)
-            }
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Center,
+                text = title,
+                style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.onBackground,
+            )
+            Spacer(modifier = Modifier.height(Spacing.xs))
+
             Slider(
                 modifier = Modifier.fillMaxWidth(),
                 value = value,
@@ -64,11 +71,14 @@ class SliderBottomSheet(
 
             Spacer(modifier = Modifier.height(Spacing.s))
             Button(
+                modifier = Modifier.align(Alignment.CenterHorizontally),
                 onClick = {
-                    notificationCenter.send(
-                        NotificationCenterEvent.ChangeZombieScrollAmount(value),
-                    )
-                    navigationCoordinator.hideBottomSheet()
+                    sheetScope
+                        .launch {
+                            state.hide()
+                        }.invokeOnCompletion {
+                            onSelected?.invoke(value)
+                        }
                 },
             ) {
                 Text(text = LocalStrings.current.buttonConfirm)

diff --git a/...com/livefast/eattrash/raccoonforlemmy/feature/settings/advanced/AdvancedSettingsScreen.kt b/...com/livefast/eattrash/raccoonforlemmy/feature/settings/advanced/AdvancedSettingsScreen.kt
@@ -114,7 +114,8 @@ class AdvancedSettingsScreen : Screen {
         var inboxTypeBottomSheetOpened by remember { mutableStateOf(false) }
         var exploreListingTypeBottomSheetOpened by remember { mutableStateOf(false) }
         var exploreResultTypeBottomSheetOpened by remember { mutableStateOf(false) }
-        var selectNumberBottomSheetOpened by remember { mutableStateOf(false) }
+        var selectInboxPreviewMaxLinesBottomSheetOpened by remember { mutableStateOf(false) }
+        var selectZombieModeAmount by remember { mutableStateOf(false) }
 
         LaunchedEffect(model) {
             model.effects
@@ -308,7 +309,7 @@ class AdvancedSettingsScreen : Screen {
                                     uiState.inboxPreviewMaxLines.toString()
                                 },
                             onTap = {
-                                selectNumberBottomSheetOpened = true
+                                selectInboxPreviewMaxLinesBottomSheetOpened = true
                             },
                         )
                     }
@@ -408,13 +409,7 @@ class AdvancedSettingsScreen : Screen {
                                 append(LocalStrings.current.settingsPointsShort)
                             },
                         onTap = {
-                            val sheet =
-                                SliderBottomSheet(
-                                    min = 0f,
-                                    max = screenWidth,
-                                    initial = uiState.zombieModeScrollAmount,
-                                )
-                            navigationCoordinator.showBottomSheet(sheet)
+                            selectZombieModeAmount = true
                         },
                     )
 
@@ -873,12 +868,12 @@ class AdvancedSettingsScreen : Screen {
             }
         }
 
-        if (selectNumberBottomSheetOpened) {
+        if (selectInboxPreviewMaxLinesBottomSheetOpened) {
             SelectNumberBottomSheet(
                 type = SelectNumberBottomSheetType.InboxPreviewMaxLines,
                 initialValue = uiState.inboxPreviewMaxLines,
                 onSelected = { value ->
-                    selectNumberBottomSheetOpened = false
+                    selectInboxPreviewMaxLinesBottomSheetOpened = false
                     if (value != null) {
                         notificationCenter.send(
                             NotificationCenterEvent.SelectNumberBottomSheetClosed(
@@ -890,5 +885,22 @@ class AdvancedSettingsScreen : Screen {
                 },
             )
         }
+
+        if (selectZombieModeAmount) {
+            SliderBottomSheet(
+                title = LocalStrings.current.settingsZombieModeScrollAmount,
+                min = 0f,
+                max = screenWidth,
+                initial = uiState.zombieModeScrollAmount,
+                onSelected = { value ->
+                    selectZombieModeAmount = false
+                    if (value != null) {
+                        notificationCenter.send(
+                            NotificationCenterEvent.ChangeZombieScrollAmount(value),
+                        )
+                    }
+                },
+            )
+        }
     }
 }
diff --git a/...livefast/eattrash/raccoonforlemmy/unit/configurecontentview/ConfigureContentViewScreen.kt b/...livefast/eattrash/raccoonforlemmy/unit/configurecontentview/ConfigureContentViewScreen.kt
@@ -75,7 +75,7 @@ class ConfigureContentViewScreen : Screen {
         var postLayoutBottomSheetOpened by remember { mutableStateOf(false) }
         var fontFamilyBottomSheetOpened by remember { mutableStateOf(false) }
         var fontScaleClassBottomSheet by remember { mutableStateOf<ContentFontClass?>(null) }
-        var selectNumberBottomSheetOpened by remember { mutableStateOf(false) }
+        var selectPostBodyMaxLinesBottomSheetOpened by remember { mutableStateOf(false) }
 
         Scaffold(
             modifier =
@@ -201,7 +201,7 @@ class ConfigureContentViewScreen : Screen {
                                     uiState.postBodyMaxLines.toString()
                                 },
                             onTap = {
-                                selectNumberBottomSheetOpened = true
+                                selectPostBodyMaxLinesBottomSheetOpened = true
                             },
                         )
                     }
@@ -413,12 +413,12 @@ class ConfigureContentViewScreen : Screen {
             )
         }
 
-        if (selectNumberBottomSheetOpened) {
+        if (selectPostBodyMaxLinesBottomSheetOpened) {
             SelectNumberBottomSheet(
                 type = SelectNumberBottomSheetType.PostBodyMaxLines,
                 initialValue = uiState.postBodyMaxLines,
                 onSelected = { value ->
-                    selectNumberBottomSheetOpened = false
+                    selectPostBodyMaxLinesBottomSheetOpened = false
                     if (value != null) {
                         notificationCenter.send(
                             NotificationCenterEvent.SelectNumberBottomSheetClosed(