@OptIn(ExperimentalComposeUiApi::class) @Suppress("LongParameterList") @Composable fun PocketStories( @PreviewParameter(PocketStoryProvider::class) stories: List<PocketStory>, contentPadding: Dp, backgroundColor: Color = FirefoxTheme.colors.layer2, onStoryShown: (PocketStory, Pair<Int, Int>) -> Unit, onStoryClicked: (PocketStory, Pair<Int, Int>) -> Unit, onDiscoverMoreClicked: (String) -> Unit, ) { // Show stories in at most 3 rows but on any number of columns depending on the data received. val maxRowsNo = 3 val storiesToShow = (stories + placeholderStory).chunked(maxRowsNo) val listState = rememberLazyListState() val flingBehavior = EagerFlingBehavior(lazyRowState = listState) LazyRow( modifier = Modifier.semantics { testTagsAsResourceId = true testTag = "pocket.stories" }, contentPadding = PaddingValues(horizontal = contentPadding), state = listState, flingBehavior = flingBehavior, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { itemsIndexed(storiesToShow) { columnIndex, columnItems -> Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { columnItems.forEachIndexed { rowIndex, story -> Box( modifier = Modifier.semantics { testTagsAsResourceId = true testTag = when (story) { placeholderStory -> "pocket.discover.more.story" is PocketRecommendedStory -> "pocket.recommended.story" else -> "pocket.sponsored.story" } }, ) { if (story == placeholderStory) { ListItemTabLargePlaceholder(stringResource(R.string.pocket_stories_placeholder_text)) { onDiscoverMoreClicked("https://getpocket.com/explore?$POCKET_FEATURE_UTM_KEY_VALUE") } } else if (story is PocketRecommendedStory) { PocketStory( story = story, backgroundColor = backgroundColor, ) { val uri = Uri.parse(story.url) .buildUpon() .appendQueryParameter(URI_PARAM_UTM_KEY, POCKET_STORIES_UTM_VALUE) .build().toString() onStoryClicked(it.copy(url = uri), rowIndex to columnIndex) } } else if (story is PocketSponsoredStory) { Box( modifier = Modifier.onShown(0.5f) { onStoryShown(story, rowIndex to columnIndex) }, ) { PocketSponsoredStory( story = story, backgroundColor = backgroundColor, ) { onStoryClicked(story, rowIndex to columnIndex) } } } } } } } } }
Displays a list of [PocketStory]es on 3 by 3 grid. If there aren't enough stories to fill all columns placeholders containing an external link to go to Pocket for more recommendations are added.