Replace material2 usages with material3

quran · Jun 2, 2024 · c9ca750 · c9ca750
1 parent 1e191d5
commit c9ca750
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 111 deletions.
diff --git a/...ager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt b/...ager/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/SheikhDownloadSummary.kt
@@ -5,8 +5,8 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Surface
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

diff --git a/...r/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt b/...r/src/main/kotlin/com/quran/mobile/feature/downloadmanager/ui/common/DownloadCommonRow.kt
@@ -11,11 +11,11 @@ import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

diff --git a/.../kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt b/.../kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadErrorDialog.kt
@@ -1,8 +1,8 @@
 package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload
 
-import androidx.compose.material.TextButton
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import com.quran.mobile.common.download.R

diff --git a/...tlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt b/...tlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/DownloadProgressDialog.kt
@@ -2,12 +2,10 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload
 
 import android.content.Context
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Text
+import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -43,15 +41,15 @@ fun DownloadProgressDialog(
           currentEvent.asMessage(LocalContext.current),
           modifier = Modifier.padding(bottom = 8.dp, end = 16.dp)
         )
-        LinearProgressIndicator(progress = (progress / 100.0f))
+        LinearProgressIndicator(
+          progress = { (progress / 100.0f) },
+        )
       }
     },
-    buttons = {
-      Row(modifier = Modifier.padding(horizontal = 16.dp)) {
-        Spacer(modifier = Modifier.weight(1f))
-        TextButton(onClick = onCancel) {
-          Text(text = stringResource(id = com.quran.mobile.common.ui.core.R.string.cancel))
-        }
+    confirmButton = {},
+    dismissButton = {
+      TextButton(onClick = onCancel) {
+        Text(text = stringResource(id = com.quran.mobile.common.ui.core.R.string.cancel))
       }
     },
     onDismissRequest = onCancel

diff --git a/...ile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt b/...ile/feature/downloadmanager/ui/sheikhdownload/RequestPostNotificationsPermissionDialog.kt
@@ -1,8 +1,8 @@
 package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload
 
-import androidx.compose.material.AlertDialog
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import com.quran.mobile.feature.downloadmanager.R

diff --git a/...main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt b/...main/kotlin/com/quran/mobile/feature/downloadmanager/ui/sheikhdownload/SuraRangeDialog.kt
@@ -2,11 +2,11 @@ package com.quran.mobile.feature.downloadmanager.ui.sheikhdownload
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextButton
-import androidx.compose.material.contentColorFor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember

diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/QariListWrapper.kt
@@ -1,43 +1,33 @@
 package com.quran.mobile.feature.qarilist
 
-import android.annotation.SuppressLint
 import android.content.Context
 import android.widget.FrameLayout
-import androidx.compose.animation.core.TweenSpec
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.displayCutoutPadding
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ModalBottomSheetDefaults
-import androidx.compose.material.ModalBottomSheetLayout
-import androidx.compose.material.ModalBottomSheetValue
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
-import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SheetValue
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.material3.rememberStandardBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.isSpecified
-import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.onClick
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import com.quran.data.model.SuraAyah
 import com.quran.labs.androidquran.common.audio.model.QariItem
@@ -47,6 +37,7 @@ import com.quran.mobile.feature.qarilist.di.QariListWrapperInjector
 import com.quran.mobile.feature.qarilist.presenter.QariListPresenter
 import com.quran.mobile.feature.qarilist.ui.QariList
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -77,9 +68,11 @@ class QariListWrapper(
 
   @Composable
   fun QariListBottomSheet() {
-    val state = rememberModalBottomSheetState(
-      initialValue = ModalBottomSheetValue.Expanded,
-      skipHalfExpanded = true
+    val state = rememberBottomSheetScaffoldState(
+      bottomSheetState = rememberStandardBottomSheetState(
+        initialValue = SheetValue.Hidden,
+        skipHiddenState = false
+      )
     )
     val qariListFlow =
       qariListPresenter.qariList(startAyah, endAyah) { QariItem.fromQari(context, it) }
@@ -90,7 +83,7 @@ class QariListWrapper(
     val coroutineScope: CoroutineScope = rememberCoroutineScope()
     val closeDialog = {
       coroutineScope.launch {
-        state.hide()
+        state.bottomSheetState.hide()
       }
     }
 
@@ -99,32 +92,16 @@ class QariListWrapper(
       currentQariManager.setCurrentQari(qari.id)
     }
 
-    // This is a bit of an intentional hack - if the screen has a display cut out,
-    // the scrim should cover the entire screen (including "not-cut-out portions"
-    // on the same line as the cutout), but the content should not be cut by the
-    // display cut out.
-    //
-    // Setting a padding on the [ModalBottomSheetLayout] would result in a padding
-    // on the scrim also. Setting a padding on the content would extend the sheet's
-    // background color, looking odd. Setting a transparent sheet color and using
-    // that with padding on the content leaves some artifacts due to a bug that
-    // someone reported at https://issuetracker.google.com/issues/227270960.
-    //
-    // To work around this, the box is full size, containing the full size scrim,
-    // and then the modal sheet with padding according to the display cut out.
-    Box(modifier = Modifier.fillMaxSize()) {
-      Scrim(color = ModalBottomSheetDefaults.scrimColor,
-        onDismiss = {
-          coroutineScope.launch { state.hide() }
-        },
-        visible = state.targetValue != ModalBottomSheetValue.Hidden
-      )
-
-      ModalBottomSheetLayout(
-        sheetState = state,
-        sheetShape = RoundedCornerShape(16.dp),
-        scrimColor = Color.Unspecified,
-        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
+    Box(modifier = Modifier
+      .fillMaxSize()
+      .displayCutoutPadding()
+    ) {
+      BottomSheetScaffold(
+        scaffoldState = state,
+        sheetPeekHeight = 0.dp,
+        sheetDragHandle = null,
+        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        containerColor = MaterialTheme.colorScheme.surface,
         sheetContentColor = MaterialTheme.colorScheme.contentColorFor(MaterialTheme.colorScheme.background),
         sheetContent = {
           Column {
@@ -148,49 +125,23 @@ class QariListWrapper(
             QariList(
               qariListState.value,
               selectedQariId = currentQariState.value?.id ?: -1,
-              onQariSelected = onQariSelected,
-              modifier = Modifier.fillMaxHeight(0.97f)
+              onQariSelected = onQariSelected
             )
           }
-        },
-        modifier = Modifier.displayCutoutPadding()
+        }
       ) {
-      }
-    }
-  }
+        val hasExpanded = remember { mutableStateOf(false) }
 
-  // Scrim Composable taken from [ModalBottomSheetLayout]
-  // Suppressing Lint for using the close_sheet string from androidx
-  @SuppressLint("PrivateResource")
-  @Composable
-  fun Scrim(
-    color: Color,
-    onDismiss: () -> Unit,
-    visible: Boolean
-  ) {
-    if (color.isSpecified) {
-      val alpha by animateFloatAsState(
-        targetValue = if (visible) 1f else 0f,
-        animationSpec = TweenSpec()
-      )
-      val closeSheet = stringResource(id = androidx.compose.ui.R.string.close_sheet)
-      val dismissModifier = if (visible) {
-        Modifier
-          .pointerInput(onDismiss) { detectTapGestures { onDismiss() } }
-          .semantics(mergeDescendants = true) {
-            contentDescription = closeSheet
-            onClick { onDismiss(); true }
-          }
-      } else {
-        Modifier
-      }
+        LaunchedEffect(Unit) {
+          // delay so sheet animates smoothly, otherwise it just snaps open
+          delay(50)
+          state.bottomSheetState.expand()
+          hasExpanded.value = true
+        }
 
-      Canvas(
-        Modifier
-          .fillMaxSize()
-          .then(dismissModifier)
-      ) {
-        drawRect(color = color, alpha = alpha)
+        if (hasExpanded.value && state.bottomSheetState.currentValue == SheetValue.PartiallyExpanded) {
+          closeDialog()
+        }
       }
     }
   }

diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariList.kt
@@ -8,7 +8,12 @@ import com.quran.labs.androidquran.common.audio.model.QariItem
 import com.quran.mobile.feature.qarilist.model.QariUiModel
 
 @Composable
-fun QariList(qaris: List<QariUiModel>, selectedQariId: Int, onQariSelected: ((QariItem) -> Unit), modifier: Modifier) {
+fun QariList(
+  qaris: List<QariUiModel>,
+  selectedQariId: Int,
+  onQariSelected: ((QariItem) -> Unit),
+  modifier: Modifier = Modifier
+) {
   val qarisBySection = qaris.groupBy { it.sectionHeader }
   LazyColumn(modifier = modifier) {
     qarisBySection.forEach { (section, sectionQaris) ->

diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariRow.kt
@@ -4,11 +4,11 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

diff --git a/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt b/feature/qarilist/src/main/kotlin/com/quran/mobile/feature/qarilist/ui/QariSection.kt
@@ -4,8 +4,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Text
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource