From 49330fb14227ff51b66270d6a6c215fe2b592e0f Mon Sep 17 00:00:00 2001 From: Derek Ellis Date: Fri, 15 Mar 2024 12:10:20 -0400 Subject: [PATCH] Add a placeholder on the search bar --- .../jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt b/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt index 50419c7..864986c 100644 --- a/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt +++ b/web/src/jsMain/kotlin/ca/derekellis/reroute/search/SearchView.kt @@ -9,6 +9,7 @@ import ca.derekellis.reroute.search.ui.SearchResult import ca.derekellis.reroute.ui.AppStylesheet.SmallMediaQuery import ca.derekellis.reroute.ui.View import org.jetbrains.compose.web.attributes.InputType +import org.jetbrains.compose.web.attributes.placeholder import org.jetbrains.compose.web.css.Color import org.jetbrains.compose.web.css.DisplayStyle import org.jetbrains.compose.web.css.FlexDirection @@ -48,6 +49,7 @@ class SearchView : View { classes(SearchStyleSheet.searchContainer) }) { SearchBar( + placeholder = "Search for stops", onQueryUpdate = { q -> emit(SearchViewEvent.UpdateQuery(q)) }, onFocused = { isFocused = it }, ) @@ -119,7 +121,7 @@ object SearchStyleSheet : StyleSheet() { * TODO: Think about how to best expose input events to parent composable. A flow? */ @Composable -fun SearchBar(onQueryUpdate: (String) -> Unit, onFocused: (focused: Boolean) -> Unit = {}) { +fun SearchBar(placeholder: String? = null, onQueryUpdate: (String) -> Unit, onFocused: (focused: Boolean) -> Unit = {}) { Input(type = InputType.Search, attrs = { classes(SearchStyleSheet.searchInput) onInput { @@ -127,5 +129,6 @@ fun SearchBar(onQueryUpdate: (String) -> Unit, onFocused: (focused: Boolean) -> } onFocusIn { onFocused(true) } onFocusOut { onFocused(false) } + placeholder?.let { placeholder(it) } }) }