Wire in AnimatedSwipeDismiss into UI

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>

app/src/main/java/dev/msfjarvis/todo/MainActivity.kt

@@ -3,8 +3,8 @@ package dev.msfjarvis.todo
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumnFor
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.Button
 import androidx.compose.material.FloatingActionButton
@@ -33,7 +33,7 @@ import dagger.hilt.android.AndroidEntryPoint
 import dev.msfjarvis.todo.compose.utils.IconResource
 import dev.msfjarvis.todo.data.model.TodoItem
 import dev.msfjarvis.todo.data.source.TodoDatabase
-import dev.msfjarvis.todo.ui.TodoRowItem
+import dev.msfjarvis.todo.ui.ListContent
 import dev.msfjarvis.todo.ui.TodoTheme
 import dev.msfjarvis.todo.urllauncher.UrlLauncher
 import kotlinx.coroutines.launch
@@ -97,16 +97,13 @@ fun TodoApp(
       }
     },
     bodyContent = {
-      LazyColumnFor(
+      ListContent(
+        innerPadding = PaddingValues(start = 8.dp, end = 8.dp),
         items = items,
-        modifier = Modifier.padding(top = 16.dp)
+        onSwipe = onDelete::invoke,
-      ) { todoItem ->
+        onClick = { urlLauncher.launch(it.title) },
-        TodoRowItem(
+        modifier = Modifier.padding(top = 16.dp),
-          item = todoItem,
+      )
-          onClick = { urlLauncher.launch(todoItem.title) },
-          onDelete = { onDelete.invoke(todoItem) },
-        )
-      }
     },
   )
 }

app/src/main/java/dev/msfjarvis/todo/ui/ListContent.kt

@@ -4,23 +4,27 @@ import androidx.compose.animation.animate
 import androidx.compose.foundation.Box
 import androidx.compose.foundation.ContentGravity
 import androidx.compose.foundation.Icon
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumnFor
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.DismissDirection
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import dev.msfjarvis.todo.data.model.TodoItem
 
 @Composable
-fun <T> ListContent(
+fun ListContent(
   innerPadding: PaddingValues,
-  items: List<T>,
+  items: List<TodoItem>,
-  onSwipe: (T) -> Unit,
+  onSwipe: (TodoItem) -> Unit,
-  onClick: (T) -> Unit,
+  onClick: (TodoItem) -> Unit,
   modifier: Modifier = Modifier,
 ) {
   LazyColumnFor(
@@ -31,8 +35,8 @@ fun <T> ListContent(
       item = item,
       background = { isDismissed ->
         Box(
-          modifier = Modifier.fillMaxSize(),
+          modifier = Modifier.background(shape = RoundedCornerShape(8.dp), color = Color.Red)
-          backgroundColor = Color.Red,
+            .fillMaxSize(),
           paddingStart = 20.dp,
           paddingEnd = 20.dp,
           gravity = ContentGravity.CenterEnd
@@ -41,8 +45,9 @@ fun <T> ListContent(
           Icon(Icons.Filled.Delete, tint = Color.White.copy(alpha = alpha))
         }
       },
-      content = { /* your item cell (feed your on click here) */ },
+      content = { TodoRowItem(item, onClick) },
-      onDismiss = { onSwipe(it) }
+      onDismiss = { onSwipe(it) },
+      directions = setOf(DismissDirection.EndToStart, DismissDirection.StartToEnd),
     )
   }
 }

app/src/main/java/dev/msfjarvis/todo/ui/TodoRow.kt

@@ -6,9 +6,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
-import androidx.compose.material.IconButton
 import androidx.compose.material.ListItem
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -16,21 +14,18 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import dev.msfjarvis.todo.R
-import dev.msfjarvis.todo.compose.utils.IconResource
 import dev.msfjarvis.todo.data.model.TodoItem
 
 @Composable
 fun LazyItemScope.TodoRowItem(
   item: TodoItem,
-  onClick: () -> Unit,
+  onClick: (TodoItem) -> Unit,
-  onDelete: () -> Unit,
 ) {
   Card(
     shape = RoundedCornerShape(8.dp),
     modifier = Modifier.fillParentMaxWidth()
       .clickable(
-        onClick = onClick,
+        onClick = { onClick.invoke(item) },
         indication = RippleIndication()
       ),
   ) {
@@ -47,14 +42,6 @@ fun LazyItemScope.TodoRowItem(
           modifier = Modifier.padding(16.dp),
         )
       },
-      trailing = {
-        IconButton(onClick = onDelete) {
-          IconResource(
-            resourceId = R.drawable.ic_delete_forever_24dp,
-            tint = MaterialTheme.colors.onPrimary,
-          )
-        }
-      }
     )
   }
 }

app/src/main/res/drawable/ic_delete_forever_24dp.xml

@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M14.12,10.47L12,12.59l-2.13,-2.12 -1.41,1.41L10.59,14l-2.12,2.12 1.41,1.41L12,15.41l2.12,2.12 1.41,-1.41L13.41,14l2.12,-2.12zM15.5,4l-1,-1h-5l-1,1H5v2h14V4zM6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM8,9h8v10H8V9z"/>
-</vector>