stream-chat-android-compose/io.getstream.chat.android.compose.ui.channels.list/ChannelList

ChannelList

fun ChannelList(modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(), viewModel: ChannelListViewModel = viewModel( factory = ChannelViewModelFactory( ChatClient.instance(), QuerySortByField.descByName("last_updated"), filters = null, ), ), lazyListState: LazyListState = rememberLazyListState(), onLastItemReached: () -> Unit = remember(viewModel) { { viewModel.loadMore() } }, onChannelClick: (Channel) -> Unit = {}, onChannelLongClick: (Channel) -> Unit = remember(viewModel) { { viewModel.selectChannel(it) } }, onSearchResultClick: (Message) -> Unit = {}, loadingContent: @Composable () -> Unit = { LoadingIndicator(modifier) }, emptyContent: @Composable () -> Unit = { DefaultChannelListEmptyContent(modifier) }, emptySearchContent: @Composable (String) -> Unit = { searchQuery -> DefaultChannelSearchEmptyContent( searchQuery = searchQuery, modifier = modifier, ) }, helperContent: @Composable BoxScope.() -> Unit = {}, loadingMoreContent: @Composable () -> Unit = { DefaultChannelsLoadingMoreIndicator() }, channelContent: @Composable (ItemState.ChannelItemState) -> Unit = { itemState -> val user by viewModel.user.collectAsState() DefaultChannelItem( channelItem = itemState, currentUser = user, onChannelClick = onChannelClick, onChannelLongClick = onChannelLongClick, ) }, searchResultContent: @Composable (ItemState.SearchResultItemState) -> Unit = { itemState -> val user by viewModel.user.collectAsState() DefaultSearchResultItem( searchResultItemState = itemState, currentUser = user, onSearchResultClick = onSearchResultClick, ) }, divider: @Composable () -> Unit = { DefaultChannelItemDivider() })

Default ChannelList component, that relies on the ChannelListViewModel to load the data and show it on the UI.

Parameters

modifier

Modifier for styling.

contentPadding

Padding values to be applied to the channel list surrounding the content inside.

viewModel

The ViewModel that loads all the data and connects it to the UI. We provide a factory that builds the default ViewModel in case the user doesn't want to provide their own.

lazyListState

State of the lazy list that represents the list of channels. Useful for controlling the scroll state.

onLastItemReached

Handler for pagination, when the user reaches the last item in the list.

onChannelClick

Handler for a single item tap.

onChannelLongClick

Handler for a long item tap.

onSearchResultClick

Handler for a single search result tap.

loadingContent

Composable that represents the loading content, when we're loading the initial data.

emptyContent

Composable that represents the empty content if there are no channels.

emptySearchContent

Composable that represents the empty content if there are no channels matching the search query.

helperContent

Composable that represents the helper content. Empty by default, but can be used to implement scroll to top button.

loadingMoreContent

: Composable that represents the loading more content, when we're loading the next page.

itemContent

Composable that allows the user to completely customize the item UI. It shows ChannelItem if left unchanged, with the actions provided by onChannelClick and onChannelLongClick.

divider

Composable that allows the user to define an item divider.

@Composable

fun ChannelList(channelsState: ChannelsState, currentUser: User?, modifier: Modifier = Modifier, contentPadding: PaddingValues = PaddingValues(0.dp), lazyListState: LazyListState = rememberLazyListState(), onLastItemReached: () -> Unit = {}, onChannelClick: (Channel) -> Unit = {}, onChannelLongClick: (Channel) -> Unit = {}, onSearchResultClick: (Message) -> Unit = {}, loadingContent: @Composable () -> Unit = { DefaultChannelListLoadingIndicator(modifier) }, emptyContent: @Composable () -> Unit = { DefaultChannelListEmptyContent(modifier) }, emptySearchContent: @Composable (String) -> Unit = { searchQuery -> DefaultChannelSearchEmptyContent( searchQuery = searchQuery, modifier = modifier, ) }, helperContent: @Composable BoxScope.() -> Unit = {}, loadingMoreContent: @Composable () -> Unit = { DefaultChannelsLoadingMoreIndicator() }, channelContent: @Composable (ItemState.ChannelItemState) -> Unit = { itemState -> DefaultChannelItem( channelItem = itemState, currentUser = currentUser, onChannelClick = onChannelClick, onChannelLongClick = onChannelLongClick, ) }, searchResultContent: @Composable (ItemState.SearchResultItemState) -> Unit = { itemState -> DefaultSearchResultItem( searchResultItemState = itemState, currentUser = currentUser, onSearchResultClick = onSearchResultClick, ) }, divider: @Composable () -> Unit = { DefaultChannelItemDivider() })

Root Channel list component, that represents different UI, based on the current channel state.

This is decoupled from ViewModels, so the user can provide manual and custom data handling, as well as define a completely custom UI component for the channel item.

If there is no state, no query active or the data is being loaded, we show the LoadingIndicator.

If there are no results or we're offline, usually due to an error in the API or network, we show an EmptyContent.

If there is data available and it is not empty, we show Channels.