diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt new file mode 100644 index 000000000..81280151a --- /dev/null +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/PullToRefreshBox.kt @@ -0,0 +1,241 @@ +/* + * Copyright 2024 The Android Open Source Project + * + * 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 + * + * https://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 com.example.compose.snippets.components + +import androidx.compose.animation.Crossfade +import androidx.compose.animation.core.tween +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.CloudDownload +import androidx.compose.material3.CircularProgressIndicator +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon +import androidx.compose.material3.ListItem +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.material3.pulltorefresh.PullToRefreshBox +import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults +import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults.Indicator +import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults.PositionalThreshold +import androidx.compose.material3.pulltorefresh.PullToRefreshState +import androidx.compose.material3.pulltorefresh.pullToRefreshIndicator +import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.example.compose.snippets.components.PullToRefreshIndicatorConstants.CROSSFADE_DURATION_MILLIS +import com.example.compose.snippets.components.PullToRefreshIndicatorConstants.SPINNER_SIZE +import kotlinx.coroutines.delay +import kotlinx.coroutines.launch + +private object PullToRefreshIndicatorConstants { + const val CROSSFADE_DURATION_MILLIS = 100 + val SPINNER_SIZE = 16.dp +} + +@Preview +@Composable +fun PullToRefreshBasicPreview() { + PullToRefreshStatefulWrapper { itemCount, isRefreshing, onRefresh -> + val items = List(itemCount) { "Item ${itemCount - it}" } + PullToRefreshBasicSample(items, isRefreshing, onRefresh) + } +} + +@Preview +@Composable +fun PullToRefreshCustomStylePreview() { + PullToRefreshStatefulWrapper { itemCount, isRefreshing, onRefresh -> + val items = List(itemCount) { "Item ${itemCount - it}" } + PullToRefreshCustomStyleSample(items, isRefreshing, onRefresh) + } +} + +@Preview +@Composable +fun PullToRefreshCustomIndicatorPreview() { + PullToRefreshStatefulWrapper { itemCount, isRefreshing, onRefresh -> + val items = List(itemCount) { "Item ${itemCount - it}" } + PullToRefreshCustomIndicatorSample(items, isRefreshing, onRefresh) + } +} + +@OptIn(ExperimentalMaterial3Api::class) +// [START android_compose_components_pull_to_refresh_basic] +@Composable +fun PullToRefreshBasicSample( + items: List, + isRefreshing: Boolean, + onRefresh: () -> Unit, + modifier: Modifier = Modifier +) { + PullToRefreshBox( + isRefreshing = isRefreshing, + onRefresh = onRefresh, + modifier = modifier + ) { + LazyColumn(Modifier.fillMaxSize()) { + items(items) { + ListItem({ Text(text = it) }) + } + } + } +} +// [END android_compose_components_pull_to_refresh_basic] + +@OptIn(ExperimentalMaterial3Api::class) +// [START android_compose_components_pull_to_refresh_custom_style] +@Composable +fun PullToRefreshCustomStyleSample( + items: List, + isRefreshing: Boolean, + onRefresh: () -> Unit, + modifier: Modifier = Modifier +) { + val state = rememberPullToRefreshState() + + PullToRefreshBox( + isRefreshing = isRefreshing, + onRefresh = onRefresh, + modifier = modifier, + state = state, + indicator = { + Indicator( + modifier = Modifier.align(Alignment.TopCenter), + isRefreshing = isRefreshing, + containerColor = MaterialTheme.colorScheme.primaryContainer, + color = MaterialTheme.colorScheme.onPrimaryContainer, + state = state + ) + }, + ) { + LazyColumn(Modifier.fillMaxSize()) { + items(items) { + ListItem({ Text(text = it) }) + } + } + } +} +// [END android_compose_components_pull_to_refresh_custom_style] + +@OptIn(ExperimentalMaterial3Api::class) +// [START android_compose_components_pull_to_refresh_custom_indicator] +@Composable +fun PullToRefreshCustomIndicatorSample( + items: List, + isRefreshing: Boolean, + onRefresh: () -> Unit, + modifier: Modifier = Modifier +) { + val state = rememberPullToRefreshState() + + PullToRefreshBox( + isRefreshing = isRefreshing, + onRefresh = onRefresh, + modifier = modifier, + state = state, + indicator = { + MyCustomIndicator( + state = state, + isRefreshing = isRefreshing, + modifier = Modifier.align(Alignment.TopCenter) + ) + } + ) { + LazyColumn(Modifier.fillMaxSize()) { + items(items) { + ListItem({ Text(text = it) }) + } + } + } +} + +// [START_EXCLUDE] +@OptIn(ExperimentalMaterial3Api::class) +// [END_EXCLUDE] +@Composable +fun MyCustomIndicator( + state: PullToRefreshState, + isRefreshing: Boolean, + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier.pullToRefreshIndicator( + state = state, + isRefreshing = isRefreshing, + containerColor = PullToRefreshDefaults.containerColor, + threshold = PositionalThreshold + ), + contentAlignment = Alignment.Center + ) { + Crossfade( + targetState = isRefreshing, + animationSpec = tween(durationMillis = CROSSFADE_DURATION_MILLIS), + modifier = Modifier.align(Alignment.Center) + ) { refreshing -> + if (refreshing) { + CircularProgressIndicator(Modifier.size(SPINNER_SIZE)) + } else { + val distanceFraction = { state.distanceFraction.coerceIn(0f, 1f) } + Icon( + imageVector = Icons.Filled.CloudDownload, + contentDescription = "Refresh", + modifier = Modifier + .size(18.dp) + .graphicsLayer { + val progress = distanceFraction() + this.alpha = progress + this.scaleX = progress + this.scaleY = progress + } + ) + } + } + } +} +// [END android_compose_components_pull_to_refresh_custom_indicator] + +@Composable +fun PullToRefreshStatefulWrapper( + content: @Composable (itemCount: Int, isRefreshing: Boolean, onRefresh: () -> Unit) -> Unit +) { + var itemCount by remember { mutableIntStateOf(15) } + var isRefreshing by remember { mutableStateOf(false) } + val coroutineScope = rememberCoroutineScope() + val onRefresh: () -> Unit = { + isRefreshing = true + coroutineScope.launch { + delay(1500) + itemCount += 5 + isRefreshing = false + } + } + content(itemCount, isRefreshing, onRefresh) +}