From 32e3adabfadb7be245b47a91865f56c3af1a6821 Mon Sep 17 00:00:00 2001 From: Tangem Date: Mon, 8 Jul 2024 13:35:15 +0400 Subject: [PATCH] Updated on 2026-08-14 --- .../core/ui/components/fields/SearchBar.kt | 162 ++++++++++++++++++ .../components/fields/entity/SearchBarUM.kt | 11 ++ .../com/tangem/core/ui/res/TangemShapes.kt | 2 + 3 files changed, 175 insertions(+) create mode 100644 core/ui/src/main/java/com/tangem/core/ui/components/fields/SearchBar.kt create mode 100644 core/ui/src/main/java/com/tangem/core/ui/components/fields/entity/SearchBarUM.kt diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/fields/SearchBar.kt b/core/ui/src/main/java/com/tangem/core/ui/components/fields/SearchBar.kt new file mode 100644 index 0000000000..0c669a23ad --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/fields/SearchBar.kt @@ -0,0 +1,162 @@ +package com.tangem.core.ui.components.fields + +import android.content.res.Configuration +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.* +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.focus.FocusManager +import androidx.compose.ui.focus.onFocusChanged +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalFocusManager +import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.SoftwareKeyboardController +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.input.KeyboardType +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider +import com.tangem.core.ui.R +import com.tangem.core.ui.components.fields.entity.SearchBarUM +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview + +@Composable +fun SearchBar(state: SearchBarUM, modifier: Modifier = Modifier, colors: TextFieldColors = TangemSearchBarColors) { + val keyboardController = LocalSoftwareKeyboardController.current + val focusManager = LocalFocusManager.current + + TextField( + modifier = modifier + .fillMaxWidth() + .height(TangemTheme.dimens.size48) + .onFocusChanged { + if (it.isFocused) { + state.onActiveChange(true) + } else { + state.onActiveChange(false) + } + }, + value = state.query, + onValueChange = state.onQueryChange, + keyboardOptions = KeyboardOptions( + keyboardType = KeyboardType.Text, + imeAction = ImeAction.Search, + ), + keyboardActions = KeyboardActions( + onSearch = { + keyboardController?.hide() + focusManager.clearFocus() + }, + ), + singleLine = true, + maxLines = 1, + textStyle = TangemTheme.typography.body2, + leadingIcon = { + Icon( + modifier = Modifier.size(TangemTheme.dimens.size20), + painter = painterResource(id = R.drawable.ic_search_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + }, + trailingIcon = { + ClearButton( + state = state, + focusManager = focusManager, + keyboardController = keyboardController, + ) + }, + placeholder = { + Text( + text = state.placeholderText.resolveReference(), + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.body2, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + }, + shape = TangemTheme.shapes.roundedCornersXLarge, + colors = colors, + ) +} + +@Composable +private fun ClearButton( + state: SearchBarUM, + focusManager: FocusManager, + keyboardController: SoftwareKeyboardController?, + modifier: Modifier = Modifier, +) { + if (state.query.isNotEmpty() || state.isActive) { + IconButton( + modifier = modifier, + onClick = { + if (state.query.isNotEmpty()) { + state.onQueryChange("") + } + focusManager.clearFocus() + keyboardController?.hide() + state.onActiveChange(false) + }, + ) { + Icon( + modifier = Modifier.size(TangemTheme.dimens.size20), + painter = painterResource(id = R.drawable.ic_close_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + } +} + +private val TangemSearchBarColors: TextFieldColors + @Composable + get() = TextFieldDefaults.colors().copy( + focusedContainerColor = TangemTheme.colors.field.primary, + unfocusedContainerColor = TangemTheme.colors.field.primary, + focusedTextColor = TangemTheme.colors.text.primary1, + unfocusedTextColor = TangemTheme.colors.text.primary1, + cursorColor = TangemTheme.colors.icon.primary1, + focusedIndicatorColor = Color.Transparent, + unfocusedIndicatorColor = Color.Transparent, + disabledIndicatorColor = Color.Transparent, + ) + +// region Previews +@Preview(widthDp = 328) +@Preview(widthDp = 328, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun Preview_TokensSearchBar(@PreviewParameter(SearchBarkConfigProvider::class) state: SearchBarUM) { + TangemThemePreview { + SearchBar(state) + } +} + +private class SearchBarkConfigProvider : CollectionPreviewParameterProvider( + collection = listOf( + SearchBarUM( + placeholderText = resourceReference(R.string.manage_tokens_search_placeholder), + query = "BTC", + onQueryChange = {}, + isActive = true, + onActiveChange = {}, + ), + SearchBarUM( + placeholderText = resourceReference(R.string.manage_tokens_search_placeholder), + query = "", + onQueryChange = {}, + isActive = false, + onActiveChange = {}, + ), + ), +) +// endregion \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/fields/entity/SearchBarUM.kt b/core/ui/src/main/java/com/tangem/core/ui/components/fields/entity/SearchBarUM.kt new file mode 100644 index 0000000000..d2ac8fcc8b --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/fields/entity/SearchBarUM.kt @@ -0,0 +1,11 @@ +package com.tangem.core.ui.components.fields.entity + +import com.tangem.core.ui.extensions.TextReference + +data class SearchBarUM( + val placeholderText: TextReference, + val query: String, + val onQueryChange: (String) -> Unit, + val isActive: Boolean, + val onActiveChange: (Boolean) -> Unit, +) \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemShapes.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemShapes.kt index 8bf99452ed..5da8defa94 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemShapes.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemShapes.kt @@ -12,6 +12,7 @@ data class TangemShapes internal constructor( val roundedCornersMedium: Shape, val roundedCornersXMedium: Shape, val roundedCornersLarge: Shape, + val roundedCornersXLarge: Shape, val bottomSheet: Shape, val bottomSheetLarge: Shape, ) { @@ -22,6 +23,7 @@ data class TangemShapes internal constructor( roundedCornersMedium = RoundedCornerShape(size = dimens.radius12), roundedCornersXMedium = RoundedCornerShape(size = dimens.radius16), roundedCornersLarge = RoundedCornerShape(size = dimens.radius28), + roundedCornersXLarge = RoundedCornerShape(size = dimens.radius36), bottomSheet = RoundedCornerShape( topStart = dimens.radius16, topEnd = dimens.radius16,