@Composable
fun SearchBar(
hint: String,
modifier: Modifier = Modifier,
isEnabled: (Boolean) = true,
height: Dp = Dimens.dp40,
elevation: Dp = Dimens.dp3,
cornerShape: Shape = RoundedCornerShape(Dimens.dp8),
backgroundColor: Color = Color.White,
onSearchClicked: () -> Unit = {},
onTextChange: (String) -> Unit = {},
) {
var text by remember { mutableStateOf(TextFieldValue()) }
Row(
modifier = Modifier
.height(height)
.fillMaxWidth()
.shadow(elevation = elevation, shape = cornerShape)
.background(color = backgroundColor, shape = cornerShape)
.clickable { onSearchClicked() },
verticalAlignment = Alignment.CenterVertically,
) {
BasicTextField(
modifier = modifier
.weight(5f)
.fillMaxWidth()
.padding(horizontal = Dimens.dp24),
value = text,
onValueChange = {
text = it
onTextChange(it.text)
},
enabled = isEnabled,
textStyle = TextStyle(
color = MaterialTheme.colorScheme.primary,
fontSize = Dimens.sp16,
fontWeight = FontWeight.Bold
),
decorationBox = { innerTextField ->
if (text.text.isEmpty()) {
Text(
text = hint,
color = Color.Gray.copy(alpha = 0.5f),
fontSize = Dimens.sp16,
fontWeight = FontWeight.Bold,
)
}
innerTextField()
},
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Search
),
keyboardActions = KeyboardActions(onSearch = { onSearchClicked() }),
singleLine = true
)
Box(
modifier = modifier
.weight(1f)
.size(Dimens.dp40)
.background(color = Color.Transparent, shape = CircleShape)
.clickable {
if (text.text.isNotEmpty()) {
text = TextFieldValue(text = "")
onTextChange("")
}
},
) {
if (text.text.isNotEmpty()) {
Icon(
modifier = modifier
.fillMaxSize()
.padding(Dimens.dp10),
painter = painterResource(id = R.drawable.baseline_clear_24),
contentDescription = stringResource(R.string.search),
tint = MaterialTheme.colorScheme.primary,
)
} else {
Icon(
modifier = modifier
.fillMaxSize()
.padding(Dimens.dp10),
painter = painterResource(id = R.drawable.ic_search),
contentDescription = stringResource(R.string.search),
tint = MaterialTheme.colorScheme.primary,
)
}
}
}