Add pull to refresh snippets

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<String>,
+    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<String>,
+    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<String>,
+    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)
+}