Make CreateRoomSearchBar stateless

This commit is contained in:
Florian Renaud 2023-03-07 17:32:09 +01:00
parent f43ab8434b
commit a7b6d36fae

View file

@ -22,7 +22,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SearchBarDefaults import androidx.compose.material3.SearchBarDefaults
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.saveable.rememberSaveable
@ -61,25 +60,29 @@ fun CreateRoomRootScreen(
onNewRoomClicked: () -> Unit = {}, onNewRoomClicked: () -> Unit = {},
onInvitePeopleClicked: () -> Unit = {}, onInvitePeopleClicked: () -> Unit = {},
) { ) {
val isSearchActive = rememberSaveable { mutableStateOf(false) } var searchText by rememberSaveable { mutableStateOf("") }
var isSearchActive by rememberSaveable { mutableStateOf(false) }
Scaffold( Scaffold(
modifier = modifier.fillMaxWidth(), modifier = modifier.fillMaxWidth(),
topBar = { topBar = {
if (!isSearchActive.value) { if (!isSearchActive) {
CreateRoomRootViewTopBar(onClosePressed = onClosePressed) CreateRoomRootViewTopBar(onClosePressed = onClosePressed)
} }
} }
) { ) { paddingValues ->
Column( Column(
modifier = Modifier.padding(it) modifier = Modifier.padding(paddingValues)
) { ) {
CreateRoomSearchBar( CreateRoomSearchBar(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
text = searchText,
placeHolderTitle = stringResource(StringR.string.search_for_someone), placeHolderTitle = stringResource(StringR.string.search_for_someone),
active = isSearchActive, active = isSearchActive,
onActiveChanged = { isSearchActive = it },
onTextChanged = { searchText = it },
) )
if (!isSearchActive.value) { if (!isSearchActive) {
TextIconButton( TextIconButton(
modifier = Modifier.padding(start = 8.dp, top = 16.dp, end = 8.dp), modifier = Modifier.padding(start = 8.dp, top = 16.dp, end = 8.dp),
imageVector = ImageVector.vectorResource(DrawableR.drawable.ic_group), imageVector = ImageVector.vectorResource(DrawableR.drawable.ic_group),
@ -124,43 +127,40 @@ fun CreateRoomRootViewTopBar(
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
fun CreateRoomSearchBar( fun CreateRoomSearchBar(
text: String,
placeHolderTitle: String, placeHolderTitle: String,
active: MutableState<Boolean>, active: Boolean,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
onActiveChanged: (Boolean) -> Unit = {},
onTextChanged: (String) -> Unit = {},
) { ) {
var text by rememberSaveable { mutableStateOf("") }
val focusManager = LocalFocusManager.current val focusManager = LocalFocusManager.current
fun closeSearchBar() { if (!active) {
onTextChanged("")
focusManager.clearFocus() focusManager.clearFocus()
active.value = false
} }
DockedSearchBar( DockedSearchBar(
query = text, query = text,
onQueryChange = { text = it }, onQueryChange = onTextChanged,
onSearch = { closeSearchBar() }, onSearch = { focusManager.clearFocus() },
active = active.value, active = active,
onActiveChange = { onActiveChange = onActiveChanged,
active.value = it
if (!active.value) focusManager.clearFocus()
},
modifier = modifier modifier = modifier
.padding(horizontal = if (!active.value) 16.dp else 0.dp), .padding(horizontal = if (!active) 16.dp else 0.dp),
placeholder = { placeholder = {
Text( Text(
text = placeHolderTitle, text = placeHolderTitle,
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine) modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
) )
}, },
leadingIcon = if (active.value) { leadingIcon = if (active) {
{ { BackButton(onClick = { onActiveChanged(false) }) }
BackButton(onClick = { closeSearchBar() })
}
} else null, } else null,
trailingIcon = { trailingIcon = {
if (active.value) { if (active) {
IconButton(onClick = { text = "" }) { IconButton(onClick = { onTextChanged("") }) {
Icon(DrawableR.drawable.ic_close, stringResource(StringR.string.a11y_clear)) Icon(DrawableR.drawable.ic_close, stringResource(StringR.string.a11y_clear))
} }
} else { } else {
@ -171,8 +171,8 @@ fun CreateRoomSearchBar(
) )
} }
}, },
shape = if (!active.value) SearchBarDefaults.dockedShape else SearchBarDefaults.fullScreenShape, shape = if (!active) SearchBarDefaults.dockedShape else SearchBarDefaults.fullScreenShape,
colors = if (!active.value) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent), colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
content = {}, content = {},
) )
} }