Adding multi/single selection variants
This commit is contained in:
Maxime NATUREL
Florian Renaud
parent
2bdd528842
commit
f536c6308d
12 changed files with 242 additions and 156 deletions
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
* Copyright (c) 2023 New Vector Ltd
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package io.element.android.features.selectusers.api
|
||||
|
||||
import io.element.android.libraries.architecture.Presenter
|
||||
|
||||
interface SelectMultipleUsersPresenter : Presenter<SelectUsersState>
|
||||
|
|
@ -18,4 +18,4 @@ package io.element.android.features.selectusers.api
|
|||
|
||||
import io.element.android.libraries.architecture.Presenter
|
||||
|
||||
interface SelectUsersPresenter : Presenter<SelectUsersState>
|
||||
interface SelectSingleUserPresenter : Presenter<SelectUsersState>
|
||||
|
|
@ -24,5 +24,6 @@ data class SelectUsersState(
|
|||
val searchResults: ImmutableList<MatrixUser>,
|
||||
val selectedUsers: ImmutableList<MatrixUser>,
|
||||
val isSearchActive: Boolean,
|
||||
val isMultiSelectionEnabled: Boolean,
|
||||
val eventSink: (SelectUsersEvents) -> Unit,
|
||||
)
|
||||
|
|
|
|||
|
|
@ -24,31 +24,23 @@ import kotlinx.collections.immutable.persistentListOf
|
|||
open class SelectUsersStateProvider : PreviewParameterProvider<SelectUsersState> {
|
||||
override val values: Sequence<SelectUsersState>
|
||||
get() = sequenceOf(
|
||||
// TODO add states with selectedUsers
|
||||
aSelectUsersState(),
|
||||
aSelectUsersState().copy(isSearchActive = true),
|
||||
aSelectUsersState().copy(isSearchActive = true, searchQuery = "someone"),
|
||||
aSelectUsersState().copy(isSearchActive = true, searchQuery = "someone", isMultiSelectionEnabled = true),
|
||||
aSelectUsersState().copy(
|
||||
isSearchActive = true,
|
||||
searchQuery = "@someone:matrix.org",
|
||||
searchResults = persistentListOf(
|
||||
MatrixUser(id = UserId("@someone:matrix.org")),
|
||||
MatrixUser(id = UserId("@someone:matrix.org"), username = "someone"),
|
||||
MatrixUser(
|
||||
id = UserId("@someone_with_a_very_long_matrix_identifier:a_very_long_domain.org"),
|
||||
username = "hey, I am someone with a very long display name"
|
||||
),
|
||||
MatrixUser(id = UserId("@someone_2:matrix.org"), username = "someone 2"),
|
||||
MatrixUser(id = UserId("@someone_3:matrix.org"), username = "someone 3"),
|
||||
MatrixUser(id = UserId("@someone_4:matrix.org"), username = "someone 4"),
|
||||
MatrixUser(id = UserId("@someone_5:matrix.org"), username = "someone 5"),
|
||||
MatrixUser(id = UserId("@someone_6:matrix.org"), username = "someone 6"),
|
||||
MatrixUser(id = UserId("@someone_7:matrix.org"), username = "someone 7"),
|
||||
MatrixUser(id = UserId("@someone_8:matrix.org"), username = "someone 8"),
|
||||
MatrixUser(id = UserId("@someone_9:matrix.org"), username = "someone 9"),
|
||||
MatrixUser(id = UserId("@someone_10:matrix.org"), username = "someone 10"),
|
||||
)
|
||||
selectedUsers = aListOfSelectedUsers(),
|
||||
searchResults = aListOfResults(),
|
||||
),
|
||||
aSelectUsersState().copy(
|
||||
isSearchActive = true,
|
||||
searchQuery = "@someone:matrix.org",
|
||||
isMultiSelectionEnabled = true,
|
||||
selectedUsers = aListOfSelectedUsers(),
|
||||
searchResults = aListOfResults(),
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -57,5 +49,29 @@ fun aSelectUsersState() = SelectUsersState(
|
|||
searchQuery = "",
|
||||
searchResults = persistentListOf(),
|
||||
selectedUsers = persistentListOf(),
|
||||
isMultiSelectionEnabled = false,
|
||||
eventSink = {}
|
||||
)
|
||||
|
||||
fun aListOfSelectedUsers() = persistentListOf(
|
||||
MatrixUser(id = UserId("@someone:matrix.org")),
|
||||
MatrixUser(id = UserId("@someone:matrix.org"), username = "someone"),
|
||||
)
|
||||
|
||||
fun aListOfResults() = persistentListOf(
|
||||
MatrixUser(id = UserId("@someone:matrix.org")),
|
||||
MatrixUser(id = UserId("@someone:matrix.org"), username = "someone"),
|
||||
MatrixUser(
|
||||
id = UserId("@someone_with_a_very_long_matrix_identifier:a_very_long_domain.org"),
|
||||
username = "hey, I am someone with a very long display name"
|
||||
),
|
||||
MatrixUser(id = UserId("@someone_2:matrix.org"), username = "someone 2"),
|
||||
MatrixUser(id = UserId("@someone_3:matrix.org"), username = "someone 3"),
|
||||
MatrixUser(id = UserId("@someone_4:matrix.org"), username = "someone 4"),
|
||||
MatrixUser(id = UserId("@someone_5:matrix.org"), username = "someone 5"),
|
||||
MatrixUser(id = UserId("@someone_6:matrix.org"), username = "someone 6"),
|
||||
MatrixUser(id = UserId("@someone_7:matrix.org"), username = "someone 7"),
|
||||
MatrixUser(id = UserId("@someone_8:matrix.org"), username = "someone 8"),
|
||||
MatrixUser(id = UserId("@someone_9:matrix.org"), username = "someone 9"),
|
||||
MatrixUser(id = UserId("@someone_10:matrix.org"), username = "someone 10"),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import androidx.compose.foundation.background
|
|||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
|
|
@ -62,7 +61,6 @@ import io.element.android.libraries.matrix.ui.model.getBestName
|
|||
import kotlinx.collections.immutable.ImmutableList
|
||||
import io.element.android.libraries.ui.strings.R as StringR
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun SelectUsersView(
|
||||
state: SelectUsersState,
|
||||
|
|
@ -71,28 +69,119 @@ fun SelectUsersView(
|
|||
val eventSink = state.eventSink
|
||||
|
||||
Column(
|
||||
modifier = modifier
|
||||
.fillMaxSize()
|
||||
modifier = modifier,
|
||||
) {
|
||||
SearchUserBar(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
query = state.searchQuery,
|
||||
results = state.searchResults,
|
||||
selectedUsers = state.selectedUsers,
|
||||
active = state.isSearchActive,
|
||||
isMultiSelectionEnabled = state.isMultiSelectionEnabled,
|
||||
onActiveChanged = { eventSink.invoke(SelectUsersEvents.OnSearchActiveChanged(it)) },
|
||||
onTextChanged = { state.eventSink(SelectUsersEvents.UpdateSearchQuery(it)) },
|
||||
onResultSelected = { state.eventSink(SelectUsersEvents.AddToSelection(it)) }
|
||||
)
|
||||
|
||||
// TODO move into search content
|
||||
SelectedUsersList(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
selectedUsers = state.selectedUsers,
|
||||
onUserRemoved = { eventSink(SelectUsersEvents.RemoveFromSelection(it)) }
|
||||
onResultSelected = { state.eventSink(SelectUsersEvents.AddToSelection(it)) },
|
||||
onUserRemoved = { eventSink(SelectUsersEvents.RemoveFromSelection(it)) },
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun SearchUserBar(
|
||||
query: String,
|
||||
results: ImmutableList<MatrixUser>,
|
||||
selectedUsers: ImmutableList<MatrixUser>,
|
||||
active: Boolean,
|
||||
isMultiSelectionEnabled: Boolean,
|
||||
modifier: Modifier = Modifier,
|
||||
placeHolderTitle: String = stringResource(StringR.string.search_for_someone),
|
||||
onActiveChanged: (Boolean) -> Unit = {},
|
||||
onTextChanged: (String) -> Unit = {},
|
||||
onResultSelected: (MatrixUser) -> Unit = {},
|
||||
onUserRemoved: (MatrixUser) -> Unit = {},
|
||||
) {
|
||||
val focusManager = LocalFocusManager.current
|
||||
|
||||
if (!active) {
|
||||
onTextChanged("")
|
||||
focusManager.clearFocus()
|
||||
}
|
||||
|
||||
SearchBar(
|
||||
query = query,
|
||||
onQueryChange = onTextChanged,
|
||||
onSearch = { focusManager.clearFocus() },
|
||||
active = active,
|
||||
onActiveChange = onActiveChanged,
|
||||
modifier = modifier
|
||||
.padding(horizontal = if (!active) 16.dp else 0.dp),
|
||||
placeholder = {
|
||||
Text(
|
||||
text = placeHolderTitle,
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
)
|
||||
},
|
||||
leadingIcon = if (active) {
|
||||
{ BackButton(onClick = { onActiveChanged(false) }) }
|
||||
} else {
|
||||
null
|
||||
},
|
||||
trailingIcon = when {
|
||||
active && query.isNotEmpty() -> {
|
||||
{
|
||||
IconButton(onClick = { onTextChanged("") }) {
|
||||
Icon(Icons.Default.Close, stringResource(StringR.string.a11y_clear))
|
||||
}
|
||||
}
|
||||
}
|
||||
!active -> {
|
||||
{
|
||||
Icon(
|
||||
imageVector = Icons.Default.Search,
|
||||
contentDescription = stringResource(StringR.string.search),
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
)
|
||||
}
|
||||
}
|
||||
else -> null
|
||||
},
|
||||
colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
|
||||
content = {
|
||||
if (isMultiSelectionEnabled && selectedUsers.isNotEmpty()) {
|
||||
SelectedUsersList(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
selectedUsers = selectedUsers,
|
||||
onUserRemoved = onUserRemoved,
|
||||
)
|
||||
}
|
||||
|
||||
LazyColumn {
|
||||
items(results) {
|
||||
SearchUserResultItem(
|
||||
matrixUser = it,
|
||||
onClick = { onResultSelected(it) }
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SearchUserResultItem(
|
||||
matrixUser: MatrixUser,
|
||||
modifier: Modifier = Modifier,
|
||||
onClick: () -> Unit = {},
|
||||
) {
|
||||
MatrixUserRow(
|
||||
modifier = modifier,
|
||||
matrixUser = matrixUser,
|
||||
avatarSize = AvatarSize.Custom(36.dp),
|
||||
onClick = onClick,
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SelectedUsersList(
|
||||
selectedUsers: List<MatrixUser>,
|
||||
|
|
@ -147,99 +236,14 @@ fun SelectedUser(
|
|||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun SearchUserBar(
|
||||
query: String,
|
||||
results: ImmutableList<MatrixUser>,
|
||||
active: Boolean,
|
||||
modifier: Modifier = Modifier,
|
||||
placeHolderTitle: String = stringResource(StringR.string.search_for_someone),
|
||||
onActiveChanged: (Boolean) -> Unit = {},
|
||||
onTextChanged: (String) -> Unit = {},
|
||||
onResultSelected: (MatrixUser) -> Unit = {},
|
||||
) {
|
||||
val focusManager = LocalFocusManager.current
|
||||
|
||||
if (!active) {
|
||||
onTextChanged("")
|
||||
focusManager.clearFocus()
|
||||
}
|
||||
|
||||
SearchBar(
|
||||
query = query,
|
||||
onQueryChange = onTextChanged,
|
||||
onSearch = { focusManager.clearFocus() },
|
||||
active = active,
|
||||
onActiveChange = onActiveChanged,
|
||||
modifier = modifier
|
||||
.padding(horizontal = if (!active) 16.dp else 0.dp),
|
||||
placeholder = {
|
||||
Text(
|
||||
text = placeHolderTitle,
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
)
|
||||
},
|
||||
leadingIcon = if (active) {
|
||||
{ BackButton(onClick = { onActiveChanged(false) }) }
|
||||
} else {
|
||||
null
|
||||
},
|
||||
trailingIcon = when {
|
||||
active && query.isNotEmpty() -> {
|
||||
{
|
||||
IconButton(onClick = { onTextChanged("") }) {
|
||||
Icon(Icons.Default.Close, stringResource(StringR.string.a11y_clear))
|
||||
}
|
||||
}
|
||||
}
|
||||
!active -> {
|
||||
{
|
||||
Icon(
|
||||
imageVector = Icons.Default.Search,
|
||||
contentDescription = stringResource(StringR.string.search),
|
||||
modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
|
||||
)
|
||||
}
|
||||
}
|
||||
else -> null
|
||||
},
|
||||
colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
|
||||
content = {
|
||||
LazyColumn {
|
||||
items(results) {
|
||||
SearchUserResultItem(
|
||||
matrixUser = it,
|
||||
onClick = { onResultSelected(it) }
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SearchUserResultItem(
|
||||
matrixUser: MatrixUser,
|
||||
modifier: Modifier = Modifier,
|
||||
onClick: () -> Unit = {},
|
||||
) {
|
||||
MatrixUserRow(
|
||||
modifier = modifier,
|
||||
matrixUser = matrixUser,
|
||||
avatarSize = AvatarSize.Custom(36.dp),
|
||||
onClick = onClick,
|
||||
)
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun ChangeServerViewLightPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
|
||||
internal fun SelectUsersViewLightPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
|
||||
ElementPreviewLight { ContentToPreview(state) }
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun ChangeServerViewDarkPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
|
||||
internal fun SelectUsersViewDarkPreview(@PreviewParameter(SelectUsersStateProvider::class) state: SelectUsersState) =
|
||||
ElementPreviewDark { ContentToPreview(state) }
|
||||
|
||||
@Composable
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue