[Reply] Replaced deprecated codes and optimised performance (#1423)

Replaced deprecated DockedSearchBar and removed unused codes from Reply to improve performance.
android · Jul 1, 2024 · c844e53 · c844e53
2 parents 38a755c + 6c669ca
commit c844e53
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 91 deletions.
diff --git a/Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt b/Reply/app/src/main/java/com/example/reply/ui/ReplyListContent.kt
@@ -35,7 +35,6 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Edit
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LargeFloatingActionButton
 import androidx.compose.material3.MaterialTheme
@@ -57,7 +56,6 @@ import com.example.reply.ui.utils.ReplyNavigationType
 import com.google.accompanist.adaptive.HorizontalTwoPaneStrategy
 import com.google.accompanist.adaptive.TwoPane
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ReplyInboxScreen(
     contentType: ReplyContentType,

diff --git a/Reply/app/src/main/java/com/example/reply/ui/components/ReplyAppBars.kt b/Reply/app/src/main/java/com/example/reply/ui/components/ReplyAppBars.kt
@@ -27,7 +27,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.DockedSearchBar
@@ -38,6 +37,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
@@ -63,8 +63,11 @@ fun ReplyDockedSearchBar(
     modifier: Modifier = Modifier
 ) {
     var query by remember { mutableStateOf("") }
-    var active by remember { mutableStateOf(false) }
+    var expanded by remember { mutableStateOf(false) }
     val searchResults = remember { mutableStateListOf<Email>() }
+    val onExpandedChange: (Boolean) -> Unit = {
+        expanded = it
+    }
 
     LaunchedEffect(query) {
         searchResults.clear()
@@ -85,84 +88,90 @@ fun ReplyDockedSearchBar(
     }
 
     DockedSearchBar(
-        modifier = modifier,
-        query = query,
-        onQueryChange = {
-            query = it
-        },
-        onSearch = { active = false },
-        active = active,
-        onActiveChange = {
-            active = it
-        },
-        placeholder = { Text(text = stringResource(id = R.string.search_emails)) },
-        leadingIcon = {
-            if (active) {
-                Icon(
-                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                    contentDescription = stringResource(id = R.string.back_button),
-                    modifier = Modifier
-                        .padding(start = 16.dp)
-                        .clickable {
-                            active = false
-                            query = ""
-                        },
-                )
-            } else {
-                Icon(
-                    imageVector = Icons.Default.Search,
-                    contentDescription = stringResource(id = R.string.search),
-                    modifier = Modifier.padding(start = 16.dp),
-                )
-            }
-        },
-        trailingIcon = {
-            ReplyProfileImage(
-                drawableResource = R.drawable.avatar_6,
-                description = stringResource(id = R.string.profile),
-                modifier = Modifier
-                    .padding(12.dp)
-                    .size(32.dp)
-            )
-        },
-    ) {
-        if (searchResults.isNotEmpty()) {
-            LazyColumn(
+        inputField = {
+            SearchBarDefaults.InputField(
+                query = query,
+                onQueryChange = {
+                    query = it
+                },
+                onSearch = { expanded = false },
+                expanded = expanded,
+                onExpandedChange = onExpandedChange,
                 modifier = Modifier.fillMaxWidth(),
-                contentPadding = PaddingValues(16.dp),
-                verticalArrangement = Arrangement.spacedBy(4.dp)
-            ) {
-                items(items = searchResults, key = { it.id }) { email ->
-                    ListItem(
-                        headlineContent = { Text(email.subject) },
-                        supportingContent = { Text(email.sender.fullName) },
-                        leadingContent = {
-                            ReplyProfileImage(
-                                drawableResource = email.sender.avatar,
-                                description = stringResource(id = R.string.profile),
-                                modifier = Modifier
-                                    .size(32.dp)
-                            )
-                        },
-                        modifier = Modifier.clickable {
-                            onSearchItemSelected.invoke(email)
-                            query = ""
-                            active = false
-                        }
+                placeholder = { Text(text = stringResource(id = R.string.search_emails)) },
+                leadingIcon = {
+                    if (expanded) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                            contentDescription = stringResource(id = R.string.back_button),
+                            modifier = Modifier
+                                .padding(start = 16.dp)
+                                .clickable {
+                                    expanded = false
+                                    query = ""
+                                },
+                        )
+                    } else {
+                        Icon(
+                            imageVector = Icons.Default.Search,
+                            contentDescription = stringResource(id = R.string.search),
+                            modifier = Modifier.padding(start = 16.dp),
+                        )
+                    }
+                },
+                trailingIcon = {
+                    ReplyProfileImage(
+                        drawableResource = R.drawable.avatar_6,
+                        description = stringResource(id = R.string.profile),
+                        modifier = Modifier
+                            .padding(12.dp)
+                            .size(32.dp)
                     )
-                }
-            }
-        } else if (query.isNotEmpty()) {
-            Text(
-                text = stringResource(id = R.string.no_item_found),
-                modifier = Modifier.padding(16.dp)
-            )
-        } else
-            Text(
-                text = stringResource(id = R.string.no_search_history),
-                modifier = Modifier.padding(16.dp)
+                },
             )
-    }
+        },
+        expanded = expanded,
+        onExpandedChange = onExpandedChange,
+        modifier = modifier,
+        content = {
+            if (searchResults.isNotEmpty()) {
+                LazyColumn(
+                    modifier = Modifier.fillMaxWidth(),
+                    contentPadding = PaddingValues(16.dp),
+                    verticalArrangement = Arrangement.spacedBy(4.dp)
+                ) {
+                    items(items = searchResults, key = { it.id }) { email ->
+                        ListItem(
+                            headlineContent = { Text(email.subject) },
+                            supportingContent = { Text(email.sender.fullName) },
+                            leadingContent = {
+                                ReplyProfileImage(
+                                    drawableResource = email.sender.avatar,
+                                    description = stringResource(id = R.string.profile),
+                                    modifier = Modifier
+                                        .size(32.dp)
+                                )
+                            },
+                            modifier = Modifier.clickable {
+                                onSearchItemSelected.invoke(email)
+                                query = ""
+                                expanded = false
+                            }
+                        )
+                    }
+                }
+            } else if (query.isNotEmpty()) {
+                Text(
+                    text = stringResource(id = R.string.no_item_found),
+                    modifier = Modifier.padding(16.dp)
+                )
+            } else
+                Text(
+                    text = stringResource(id = R.string.no_search_history),
+                    modifier = Modifier.padding(16.dp)
+                )
+        }
+    )
 }
 
 @OptIn(ExperimentalMaterial3Api::class)

diff --git a/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailListItem.kt b/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailListItem.kt
@@ -17,7 +17,6 @@
 package com.example.reply.ui.components
 
 import androidx.compose.animation.AnimatedContent
-import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -51,10 +50,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.example.reply.data.Email
 
-@OptIn(
-    ExperimentalFoundationApi::class,
-    ExperimentalAnimationApi::class
-)
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun ReplyEmailListItem(
     email: Email,

diff --git a/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailThreadItem.kt b/Reply/app/src/main/java/com/example/reply/ui/components/ReplyEmailThreadItem.kt
@@ -29,7 +29,6 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -42,7 +41,6 @@ import androidx.compose.ui.unit.dp
 import com.example.reply.R
 import com.example.reply.data.Email
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ReplyEmailThreadItem(
     email: Email,

diff --git a/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationActions.kt b/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationActions.kt
@@ -17,7 +17,7 @@
 package com.example.reply.ui.navigation
 
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Article
+import androidx.compose.material.icons.automirrored.filled.Article
 import androidx.compose.material.icons.filled.Inbox
 import androidx.compose.material.icons.filled.People
 import androidx.compose.material.icons.outlined.ChatBubbleOutline
@@ -68,8 +68,8 @@ val TOP_LEVEL_DESTINATIONS = listOf(
     ),
     ReplyTopLevelDestination(
         route = ReplyRoute.ARTICLES,
-        selectedIcon = Icons.Default.Article,
-        unselectedIcon = Icons.Default.Article,
+        selectedIcon = Icons.AutoMirrored.Filled.Article,
+        unselectedIcon = Icons.AutoMirrored.Filled.Article,
         iconTextId = R.string.tab_article
     ),
     ReplyTopLevelDestination(

diff --git a/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt b/Reply/app/src/main/java/com/example/reply/ui/navigation/ReplyNavigationComponents.kt
@@ -35,7 +35,6 @@ import androidx.compose.material.icons.automirrored.filled.MenuOpen
 import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.DrawerValue
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -342,7 +341,6 @@ fun PermanentNavigationDrawerContent(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ModalNavigationDrawerContent(
     selectedDestination: String,