diff --git a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/SearchBarState.kt b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/SearchBarState.kt new file mode 100644 index 0000000000..d64808239e --- /dev/null +++ b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/state/SearchBarState.kt @@ -0,0 +1,11 @@ +package com.tangem.managetokens.presentation.managetokens.state + +/** + * SearchBar state. + */ +internal data class SearchBarState( + val query: String, + val onQueryChange: (String) -> Unit, + val active: Boolean, + val onActiveChange: (Boolean) -> Unit, +) \ No newline at end of file diff --git a/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/SearchBar.kt b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/SearchBar.kt new file mode 100644 index 0000000000..6040c96260 --- /dev/null +++ b/features/manage-tokens/impl/src/main/java/com/tangem/managetokens/presentation/managetokens/ui/components/SearchBar.kt @@ -0,0 +1,143 @@ +package com.tangem.managetokens.presentation.managetokens.ui.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material.* +import androidx.compose.runtime.* +import androidx.compose.ui.ExperimentalComposeUiApi +import androidx.compose.ui.Modifier +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.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.input.ImeAction +import androidx.compose.ui.text.input.KeyboardType +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.res.TangemTheme +import com.tangem.features.managetokens.impl.R +import com.tangem.managetokens.presentation.managetokens.state.SearchBarState + +@OptIn(ExperimentalComposeUiApi::class) +@Composable +internal fun TokensSearchBar(state: SearchBarState, modifier: Modifier = Modifier) { + val keyboardController = LocalSoftwareKeyboardController.current + val focusManager = LocalFocusManager.current + + TextField( + 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.copy( + color = TangemTheme.colors.text.primary1, + ), + leadingIcon = { + Icon( + painter = painterResource(id = R.drawable.ic_search_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + modifier = Modifier.clickable { state.onActiveChange(true) }, + ) + }, + trailingIcon = { + if (state.query.isNotEmpty() || state.active) { + IconButton( + onClick = { + if (state.query.isNotEmpty()) { + state.onQueryChange("") + } + focusManager.clearFocus() + keyboardController?.hide() + state.onActiveChange(false) + }, + ) { + Icon( + painter = painterResource(id = R.drawable.ic_close), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) + } + } + }, + placeholder = { + Text( + text = stringResource(R.string.manage_tokens_search_placeholder), + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.body2, + ) + }, + shape = RoundedCornerShape(TangemTheme.dimens.radius36), + colors = searchbarTextFieldColors(), + modifier = modifier + .fillMaxWidth() + .onFocusChanged { + if (it.isFocused) { + state.onActiveChange(true) + } else { + state.onActiveChange(false) + } + }, + ) +} + +@Composable +private fun searchbarTextFieldColors(): TextFieldColors { + return TextFieldDefaults.textFieldColors( + backgroundColor = TangemTheme.colors.field.primary, + textColor = TangemTheme.colors.text.primary1, + cursorColor = TangemTheme.colors.icon.primary1, + focusedIndicatorColor = Color.Transparent, + unfocusedIndicatorColor = Color.Transparent, + disabledIndicatorColor = Color.Transparent, + ) +} + +@Preview +@Composable +private fun Preview_TokensSearchBar_Light( + @PreviewParameter(SearchBarkConfigProvider::class) + state: SearchBarState, +) { + TangemTheme(isDark = false) { + TokensSearchBar(state) + } +} + +@Preview +@Composable +private fun Preview_TokensSearchBar_Dark(@PreviewParameter(SearchBarkConfigProvider::class) state: SearchBarState) { + TangemTheme(isDark = true) { + TokensSearchBar(state) + } +} + +private class SearchBarkConfigProvider : CollectionPreviewParameterProvider( + collection = listOf( + SearchBarState( + query = "BTC", + onQueryChange = {}, + active = true, + onActiveChange = {}, + ), + SearchBarState( + query = "", + onQueryChange = {}, + active = false, + onActiveChange = {}, + ), + ), +) \ No newline at end of file