Merge pull request #212 from tarkalabs/nilesh/search-bar

Improvements in TUIAppTopBar, handled searchview visibility from consumer side
tarkalabs · Mar 5, 2024 · aca4c2e · aca4c2e
2 parents 992afae + bd962ec
commit aca4c2e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 43 deletions.
diff --git a/example/src/main/java/com/tarkalabs/ui/UIComponentListActivity.kt b/example/src/main/java/com/tarkalabs/ui/UIComponentListActivity.kt
@@ -17,13 +17,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.tarkalabs.tarkaui.components.TUIAppTopBar
-import com.tarkalabs.tarkaui.components.TUISearchBar
-import com.tarkalabs.tarkaui.icons.BarcodeScanner24
+import com.tarkalabs.tarkaui.components.VerticalSpacer
+import com.tarkalabs.tarkaui.components.base.TUIButton
 import com.tarkalabs.tarkaui.icons.ChevronRight20
-import com.tarkalabs.tarkaui.icons.Dismiss16
+import com.tarkalabs.tarkaui.icons.Search24
 import com.tarkalabs.tarkaui.icons.TarkaIcons
-import com.tarkalabs.tarkaui.icons.TarkaIcons.Filled
-import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@@ -38,13 +36,24 @@ class UIComponentListActivity : ComponentActivity() {
           mutableStateOf("")
         }
 
+        var showSearchbar by remember {
+          mutableStateOf(false)
+        }
+
         Scaffold(topBar = {
           TUIAppTopBar(
             title = "Lorem Ipsum",
             navigationIcon = TarkaIcons.Regular.ChevronRight20,
             menuItemIconOne = TarkaIcons.Regular.ChevronRight20,
             menuItemIconTwo = TarkaIcons.Regular.ChevronRight20,
             menuItemIconThree = TarkaIcons.Regular.ChevronRight20,
+            searchIcon = TarkaIcons.Regular.Search24,
+            searchQuery = query,
+            searchQueryHint = "Search something",
+            onSearchQuery = {
+              query = it
+            },
+            showSearchBar = showSearchbar
           )
 
         }) { paddingValues ->
@@ -55,29 +64,16 @@ class UIComponentListActivity : ComponentActivity() {
               .fillMaxHeight()
               .padding(horizontal = 8.dp)
           ) {
-            TUISearchBar(
-              query = "My Search",
-              placeholder = "Search",
-              onQueryTextChange = {},
-              trailingIcon = Filled.Dismiss16,
-              leadingIcon = Regular.BarcodeScanner24,
-              onLeadingIconClick = {},
-              modifier = Modifier
-                .fillMaxWidth()
-                .padding(10.dp),
-            )
-            TUISearchBar(
-              query = "Search",
-              placeholder = "Search Here",
-              onQueryTextChange = {},
-              trailingIcon = Filled.Dismiss16,
-              leadingIcon = Regular.BarcodeScanner24,
-              onLeadingIconClick = {},
-              modifier = Modifier
-                .fillMaxWidth()
-                .padding(10.dp),
-            )
-
+            VerticalSpacer(space = 20)
+            TUIButton(label = "Show Searchbar") {
+              query = "Hello there"
+              showSearchbar = true
+            }
+            VerticalSpacer(space = 20)
+            TUIButton(label = "Hide Searchbar") {
+              query = ""
+              showSearchbar = false
+            }
           }
 
         }

diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt
@@ -12,6 +12,7 @@ import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -81,34 +82,37 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   onSecondMenuItemClicked: () -> Unit = {},
   onThirdMenuItemClicked: () -> Unit = {},
   onSearchQuery: (String) -> Unit = {},
-  searchQuery : String = "",
-  searchQueryHint : String = "",
+  searchQuery: String = "",
+  searchQueryHint: String = "",
   disableSearchIcon: Boolean = false,
   clearQueryAndHideSearchBar: Boolean = false,
+  showSearchBar: Boolean = false,
   colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(
     containerColor = TUITheme.colors.surface
   ),
   scrollBehavior: TopAppBarScrollBehavior? = null,
   tags: TUIAppTopBarTags = TUIAppTopBarTags(),
 ) {
 
-  var showSearchBar by remember {
+  var showSearchBarState by remember {
     mutableStateOf(false)
   }
 
-  if (clearQueryAndHideSearchBar && showSearchBar) {
-    showSearchBar = false
+  if (clearQueryAndHideSearchBar && showSearchBarState) {
+    showSearchBarState = false
     onSearchQuery("")
   }
+  LaunchedEffect(key1 = showSearchBar) {
+    showSearchBarState = showSearchBar
+  }
 
   Column(
     modifier = modifier
       .background(color = TUITheme.colors.surface)
       .fillMaxWidth()
-      .wrapContentHeight(),
-    horizontalAlignment = Alignment.CenterHorizontally
+      .wrapContentHeight(), horizontalAlignment = Alignment.CenterHorizontally
   ) {
-    if (showSearchBar) {
+    if (showSearchBarState) {
       TUISearchBar(
         modifier = Modifier
           .fillMaxWidth()
@@ -117,7 +121,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         placeholder = searchQueryHint,
         leadingIcon = TarkaIcons.Regular.ChevronLeft24,
         onLeadingIconClick = {
-          showSearchBar = false
+          showSearchBarState = false
           onSearchQuery("")
         },
         onQueryTextChange = {
@@ -136,7 +140,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         },
         navigationIcon = {
           if (navigationIcon != null) {
-            if (!showSearchBar) {
+            if (!showSearchBarState) {
               TUIIconButton(
                 onIconClick = onNavigationIconClick,
                 icon = navigationIcon,
@@ -148,15 +152,15 @@ import com.tarkalabs.tarkaui.theme.TUITheme
           }
         },
         actions = {
-          if (!showSearchBar) {
+          if (!showSearchBarState) {
             if (searchIcon != null) {
               TUIIconButton(
                 icon = searchIcon,
                 tags = tags.searchIconTags,
                 iconButtonStyle = GHOST,
                 onIconClick = {
                   if (!disableSearchIcon) {
-                    showSearchBar = true
+                    showSearchBarState = true
                   }
                 },
                 buttonSize = XL
@@ -224,16 +228,21 @@ data class TUIAppTopBarTags(
         menuItemIconThree = TarkaIcons.Regular.ChevronRight20,
         searchQuery = "Search",
         onSearchQuery = { _ ->
-        },
-        searchIcon = TarkaIcons.Regular.Search24,
-        searchQueryHint = "Search"
+        }, searchIcon = TarkaIcons.Regular.Search24, searchQueryHint = "Search"
       )
       VerticalSpacer(space = 5)
       TUIAppTopBar(
         title = "Lorem Ipsum",
         navigationIcon = TarkaIcons.Regular.ChevronRight20,
         searchIcon = TarkaIcons.Regular.Search16
       )
+      VerticalSpacer(space = 5)
+      TUIAppTopBar(
+        title = "Lorem Ipsum",
+        navigationIcon = TarkaIcons.Regular.ChevronRight20,
+        searchIcon = TarkaIcons.Regular.Search16,
+        showSearchBar = true
+      )
     }
   }
 }