Simplify composables and add PullRefreshLayout

README.md

@@ -36,27 +36,17 @@ materii-pullrefresh = { group = "dev.materii.pullrefresh", name = "pullrefresh",
 ```kt
 @Composable
 fun Test() {
-  var isRefreshing by remember {
-      mutableStateOf(false)
-  }
-  var pullRefreshState = rememberPullRefreshState(refreshing = isRefreshing, onRefresh = { /* Refresh some data here */ })
-
-  Scaffold(
-      modifier = Modifier.pullRefresh(pullRefreshState)
-  ) {
-    Box(
-      contentAlignment = Alignment.Center,
-      modifier = Modifier
-        .padding(it)
-        .fillMaxSize()
-        .verticalScroll(rememberScrollState())
+    var isRefreshing by remember {
+        mutableStateOf(false)
+    }
+    var pullRefreshState = rememberPullRefreshState(refreshing = isRefreshing, onRefresh = { /* Refresh some data here */ })
+
+    PullRefreshLayout(
+        modifier = modifier,
+        state = pullRefreshState
     ) {
-      PullRefreshIndicator(
-        refreshing = isRefreshing,
-        state = pullRefreshState,
-        modifier = Modifier.align(Alignment.TopCenter)
-      )
-  }
+        Text("Some content")
+    }
 }
 ```
 
@@ -70,28 +60,16 @@ fun Test() {
 ```kt
 @Composable
 fun Test() {
-  var isRefreshing by remember {
-      mutableStateOf(false)
-  }
-  var pullRefreshState = rememberPullRefreshState(refreshing = isRefreshing, onRefresh = { /* Refresh some data here */ })
-
-  Scaffold(
-      modifier = Modifier.pullRefresh(pullRefreshState)
-  ) {
+    var isRefreshing by remember {
+       mutableStateOf(false)
+    }
+    var pullRefreshState = rememberPullRefreshState(refreshing = isRefreshing, onRefresh = { /* Refresh some data here */ })
+
     DragRefreshLayout(
-      state = pullRefreshState
-      modifier = modifier
-            .padding(it)
-            .fillMaxSize()
+        modifier = modifier,
+        state = pullRefreshState
     ) {
-      Box(
-        contentAlignment = Alignment.Center,
-        modifier = Modifier
-          .fillMaxSize()
-          .verticalScroll(rememberScrollState())
-      ) {
         Text("Some content")
-      }
     }
 }
 ```

demo/src/main/java/dev/materii/pullrefresh/demo/MainActivity.kt

@@ -90,8 +90,7 @@ class MainActivity : ComponentActivity() {
                             }
                         )
                     },
-                    modifier = Modifier
-                        .pullRefresh(pullRefreshState, inverse = flipped)
+                    modifier = Modifier.fillMaxSize()
                 ) {
                     Column(
                         modifier = Modifier.padding(it)
@@ -130,12 +129,13 @@ class MainActivity : ComponentActivity() {
                                 0 -> PullRefreshSample(
                                     flipped = flipped,
                                     pullRefreshState = pullRefreshState,
-                                    isRefreshing = isRefreshing
+                                    modifier = Modifier.fillMaxSize(),
                                 )
 
                                 1 -> DragRefreshSample(
                                     flipped = flipped,
-                                    pullRefreshState = pullRefreshState
+                                    pullRefreshState = pullRefreshState,
+                                    modifier = Modifier.fillMaxSize(),
                                 )
                             }
                         }

demo/src/main/java/dev/materii/pullrefresh/demo/sample/DragRefreshSample.kt

@@ -4,11 +4,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import dev.materii.pullrefresh.DragRefreshLayout
+import dev.materii.pullrefresh.DragRefreshIndicator
 import dev.materii.pullrefresh.PullRefreshState
 
 @Composable
@@ -18,16 +20,22 @@ fun DragRefreshSample(
     modifier: Modifier = Modifier
 ) {
     DragRefreshLayout(
+        modifier = modifier,
         state = pullRefreshState,
         flipped = flipped,
-        modifier = modifier
-            .fillMaxSize()
+        indicator = {
+            DragRefreshIndicator(
+                state = pullRefreshState,
+                flipped = flipped,
+                color = MaterialTheme.colorScheme.primary
+            )
+        }
     ) {
         Box(
-            contentAlignment = Alignment.Center,
-            modifier = modifier
+            modifier = Modifier
                 .fillMaxSize()
-                .verticalScroll(rememberScrollState())
+                .verticalScroll(rememberScrollState()),
+            contentAlignment = Alignment.Center
         ) {
             Text(text = "Pull ${if (flipped) "up" else "down"} to refresh")
         }

demo/src/main/java/dev/materii/pullrefresh/demo/sample/PullRefreshSample.kt

@@ -11,34 +11,36 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import dev.materii.pullrefresh.PullRefreshLayout
 import dev.materii.pullrefresh.PullRefreshIndicator
 import dev.materii.pullrefresh.PullRefreshState
 
 @Composable
 fun PullRefreshSample(
     flipped: Boolean,
     pullRefreshState: PullRefreshState,
-    isRefreshing: Boolean,
     modifier: Modifier = Modifier
 ) {
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = modifier
-            .fillMaxSize()
-            .verticalScroll(rememberScrollState())
+    PullRefreshLayout(
+        modifier = modifier,
+        state = pullRefreshState,
+        flipped = flipped,
+        indicator = {
+            PullRefreshIndicator(
+                state = pullRefreshState,
+                flipped = flipped,
+                backgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
+                contentColor = MaterialTheme.colorScheme.primary
+            )
+        }
     ) {
-        Text(text = "Pull ${if (flipped) "up" else "down"} to refresh")
-
-        PullRefreshIndicator(
-            refreshing = isRefreshing,
-            state = pullRefreshState,
-            flipped = flipped,
-            backgroundColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp),
-            contentColor = MaterialTheme.colorScheme.primary,
+        Box(
             modifier = Modifier
-                .align(
-                    if (flipped) Alignment.BottomCenter else Alignment.TopCenter
-                )
-        )
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState()),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(text = "Pull ${if (flipped) "up" else "down"} to refresh")
+        }
     }
 }

gradle/libs.versions.toml

@@ -1,15 +1,15 @@
 [versions]
-agp = "8.1.3"
-kotlin = "1.9.20"
-compose-multiplatform = "1.5.10"
-compose-compiler = "1.5.4"
+agp = "8.2.0"
+kotlin = "1.9.21"
+compose-multiplatform = "1.5.11"
+compose-compiler = "1.5.7"
 core-ktx = "1.12.0"
 
 [libraries]
 core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
 lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version = "2.6.2" }
-activity-compose = { group = "androidx.activity", name = "activity-compose", version = "1.8.0" }
-material3 = { group = "androidx.compose.material3", name = "material3", version = "1.2.0-alpha09" }
+activity-compose = { group = "androidx.activity", name = "activity-compose", version = "1.8.2" }
+material3 = { group = "androidx.compose.material3", name = "material3", version = "1.2.0-alpha09" } #TODO later versions depend on beta foundation, resulting in incompatibility
 material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended", version = "1.5.4" }
 
 [plugins]

pullrefresh/src/commonMain/kotlin/dev/materii/pullrefresh/DragRefreshLayout.kt

@@ -6,6 +6,9 @@ import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -25,6 +28,20 @@ import androidx.compose.ui.platform.LocalDensity
  * @param indicator The indicator hidden beneath the [content], normally an arrow facing in the drag direction
  * @param content Content to be dragged
  */
+@Deprecated(
+    message = "Use the overload without `contentAlignment` instead",
+    replaceWith = ReplaceWith(
+        "DragRefreshBox(\n" +
+            "state = state,\n" +
+            "modifier = modifier,\n" +
+            "flipped = flipped,\n" +
+            "backdrop = indicatorBackground,\n" +
+            "indicator = indicator,\n" +
+            "content = content,\n" +
+        ")"
+    ),
+    level = DeprecationLevel.HIDDEN
+)
 @Composable
 fun DragRefreshLayout(
     state: PullRefreshState,
@@ -37,7 +54,6 @@ fun DragRefreshLayout(
             state = state,
             color = Color.White,
             flipped = flipped,
-            modifier = Modifier.align(Alignment.Center)
         )
     },
     content: @Composable () -> Unit
@@ -56,7 +72,7 @@ fun DragRefreshLayout(
                 .fillMaxWidth()
                 .clip(RectangleShape)
                 .align(
-                    if (flipped) Alignment.BottomStart else Alignment.TopStart
+                    if (flipped) Alignment.BottomCenter else Alignment.TopCenter
                 )
         ) {
             indicator()
@@ -76,3 +92,69 @@ fun DragRefreshLayout(
     }
 }
 
+/**
+ * Layout for drag to refresh, dragging moves the [content] to reveal the [indicator] beneath
+ *
+ * @param state [PullRefreshState] used to updated the [content]'s position
+ * @param modifier [Modifier] for the layout
+ * @param flipped If true reveals the indicator on the bottom instead of the top
+ * @param backdropColor Color to use for the revealed background, a darker version of the [content]'s background is recommended
+ * @param indicator The indicator hidden beneath the [content], normally an arrow facing in the drag direction
+ * @param content Content to be dragged
+ */
+@Composable
+fun DragRefreshLayout(
+    state: PullRefreshState,
+    modifier: Modifier = Modifier,
+    flipped: Boolean = false,
+    enabled: Boolean = true,
+    indicator: @Composable () -> Unit = {
+        DragRefreshIndicator(
+            state = state,
+            flipped = flipped
+        )
+    },
+    backdropColor: Color = Color.Black.copy(alpha = 0.3f),
+    content: @Composable () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .pullRefresh(
+                state = state,
+                inverse = flipped,
+                enabled = enabled,
+            )
+            .then(modifier)
+    ) {
+        val density = LocalDensity.current
+        val indicatorHeight by remember(density) {
+            derivedStateOf {
+                with(density) {
+                    state.position.toDp()
+                }
+            }
+        }
+        val indicatorAlignment = if (flipped) Alignment.BottomCenter else Alignment.TopCenter
+        Box(
+            modifier = Modifier
+                .background(backdropColor)
+                .height(indicatorHeight)
+                .fillMaxWidth()
+                .align(indicatorAlignment),
+            contentAlignment = Alignment.Center,
+        ) {
+            indicator()
+        }
+
+        Box(
+            modifier = Modifier
+                .graphicsLayer {
+                    translationY = if (flipped) -state.position else state.position
+                    clip = true
+                    shape = RectangleShape
+                },
+        ) {
+            content()
+        }
+    }
+}

pullrefresh/src/commonMain/kotlin/dev/materii/pullrefresh/PullRefreshIndicator.kt

@@ -62,6 +62,19 @@ import kotlin.math.pow
  * @param flipped Whether the indicator is drawn emanating from the bottom instead.
  *                This should be used with the `inverse` param of `pullRefresh`.
  */
+@Deprecated(
+    message = "Use the overload without `refreshing` instead",
+    replaceWith = ReplaceWith(
+        "PullRefreshIndicator(" +
+            "state = state,\n" +
+            "modifier = modifier,\n" +
+            "backgroundColor = backgroundColor,\n" +
+            "contentColor = contentColor,\n" +
+            "scale = scale,\n" +
+            "flipped = flipped," +
+        ")"
+    )
+)
 @Composable
 fun PullRefreshIndicator(
     refreshing: Boolean,
@@ -71,9 +84,26 @@ fun PullRefreshIndicator(
     contentColor: Color = Color.Blue,
     scale: Boolean = false,
     flipped: Boolean = false,
+) = PullRefreshIndicator(
+    state = state,
+    modifier = modifier,
+    backgroundColor = backgroundColor,
+    contentColor = contentColor,
+    scale = scale,
+    flipped = flipped
+)
+
+@Composable
+fun PullRefreshIndicator(
+    state: PullRefreshState,
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = Color.White,
+    contentColor: Color = Color.Blue,
+    scale: Boolean = false,
+    flipped: Boolean = false,
 ) {
-    val showElevation by remember(refreshing, state) {
-        derivedStateOf { refreshing || state.position > 0.5f }
+    val showElevation by remember(state) {
+        derivedStateOf { state.refreshing || state.position > 0.5f }
     }
 
     Box(
@@ -84,7 +114,7 @@ fun PullRefreshIndicator(
             .background(color = backgroundColor, shape = SpinnerShape)
     ) {
         Crossfade(
-            targetState = refreshing,
+            targetState = state.refreshing,
             animationSpec = tween(durationMillis = CrossfadeDurationMs),
             label = "Refresh"
         ) { refreshing ->