Improve sample screens to allow multiple or single selection

MohamedRejeb · Jan 8, 2024 · b5ca0cb · b5ca0cb
1 parent ba6b524
commit b5ca0cb
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/sample/common/src/commonMain/kotlin/com.mohamedrejeb.calf.sample/ui/FilePickerScreen.kt b/sample/common/src/commonMain/kotlin/com.mohamedrejeb.calf.sample/ui/FilePickerScreen.kt
@@ -2,6 +2,7 @@ package com.mohamedrejeb.calf.sample.ui
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
@@ -11,6 +12,8 @@ import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBackIosNew
 import androidx.compose.material3.Button
@@ -29,6 +32,7 @@ import com.mohamedrejeb.calf.io.name
 import com.mohamedrejeb.calf.picker.FilePickerFileType
 import com.mohamedrejeb.calf.picker.FilePickerSelectionMode
 import com.mohamedrejeb.calf.picker.rememberFilePickerLauncher
+import com.mohamedrejeb.calf.ui.toggle.AdaptiveSwitch
 
 @Composable
 fun FilePickerScreen(
@@ -37,7 +41,15 @@ fun FilePickerScreen(
     var fileNames by remember {
         mutableStateOf<List<String>>(emptyList())
     }
-    val pickerLauncher = rememberFilePickerLauncher(
+    var isMultiple by remember { mutableStateOf(false) }
+    val singlePickerLauncher = rememberFilePickerLauncher(
+        type = FilePickerFileType.All,
+        selectionMode = FilePickerSelectionMode.Single,
+        onResult = { files ->
+            fileNames = files.map { it.name.orEmpty() }
+        },
+    )
+    val multiplePickerLauncher = rememberFilePickerLauncher(
         type = FilePickerFileType.All,
         selectionMode = FilePickerSelectionMode.Multiple,
         onResult = { files ->
@@ -51,6 +63,7 @@ fun FilePickerScreen(
             .background(MaterialTheme.colorScheme.background)
             .windowInsetsPadding(WindowInsets.systemBars)
             .windowInsetsPadding(WindowInsets.ime)
+            .verticalScroll(rememberScrollState())
     ) {
         IconButton(
             onClick = {
@@ -66,9 +79,20 @@ fun FilePickerScreen(
             )
         }
 
+        Row(Modifier.padding(16.dp)) {
+            Text("Select multiple files?", Modifier.weight(1f))
+            AdaptiveSwitch(isMultiple, onCheckedChange = { checked ->
+                isMultiple = checked
+            })
+        }
+
         Button(
             onClick = {
-                pickerLauncher.launch()
+                if (isMultiple) {
+                    multiplePickerLauncher.launch()
+                } else {
+                    singlePickerLauncher.launch()
+                }
             },
             modifier = Modifier.padding(16.dp)
         ) {

diff --git a/sample/common/src/commonMain/kotlin/com.mohamedrejeb.calf.sample/ui/ImagePickerScreen.kt b/sample/common/src/commonMain/kotlin/com.mohamedrejeb.calf.sample/ui/ImagePickerScreen.kt
@@ -3,6 +3,8 @@ package com.mohamedrejeb.calf.sample.ui
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
@@ -17,21 +19,37 @@ import com.mohamedrejeb.calf.picker.FilePickerSelectionMode
 import com.mohamedrejeb.calf.picker.FilePickerFileType
 import com.mohamedrejeb.calf.picker.rememberFilePickerLauncher
 import com.mohamedrejeb.calf.picker.toImageBitmap
+import com.mohamedrejeb.calf.ui.toggle.AdaptiveSwitch
 
 @Composable
 fun ImagePickerScreen(
     navigateBack: () -> Unit
 ) {
-    var imageBitmap by remember {
-        mutableStateOf<ImageBitmap?>(null)
+    var imageBitmaps by remember {
+        mutableStateOf<List<ImageBitmap>>(emptyList())
     }
-    val pickerLauncher = rememberFilePickerLauncher(
+    var isMultiple by remember { mutableStateOf(false) }
+    val singlePickerLauncher = rememberFilePickerLauncher(
         type = FilePickerFileType.Image,
         selectionMode = FilePickerSelectionMode.Single,
         onResult = { files ->
-            files.firstOrNull()?.let { file ->
-                imageBitmap = try {
-                    file.readByteArray().toImageBitmap()
+            imageBitmaps = files.mapNotNull {
+                try {
+                    it.readByteArray().toImageBitmap()
+                } catch (e: Exception) {
+                    e.printStackTrace()
+                    null
+                }
+            }
+        },
+    )
+    val multiplePickerLauncher = rememberFilePickerLauncher(
+        type = FilePickerFileType.Image,
+        selectionMode = FilePickerSelectionMode.Multiple,
+        onResult = { files ->
+            imageBitmaps = files.mapNotNull {
+                try {
+                    it.readByteArray().toImageBitmap()
                 } catch (e: Exception) {
                     e.printStackTrace()
                     null
@@ -46,6 +64,7 @@ fun ImagePickerScreen(
             .background(MaterialTheme.colorScheme.background)
             .windowInsetsPadding(WindowInsets.systemBars)
             .windowInsetsPadding(WindowInsets.ime)
+            .verticalScroll(rememberScrollState())
     ) {
         IconButton(
             onClick = {
@@ -61,9 +80,20 @@ fun ImagePickerScreen(
             )
         }
 
+        Row(Modifier.padding(16.dp)) {
+            Text("Select multiple images?", Modifier.weight(1f))
+            AdaptiveSwitch(isMultiple, onCheckedChange = { checked ->
+                isMultiple = checked
+            })
+        }
+
         Button(
             onClick = {
-                pickerLauncher.launch()
+                if (isMultiple) {
+                    multiplePickerLauncher.launch()
+                } else {
+                    singlePickerLauncher.launch()
+                }
             },
             modifier = Modifier.padding(16.dp)
         ) {
@@ -76,7 +106,7 @@ fun ImagePickerScreen(
             modifier = Modifier.padding(16.dp)
         )
 
-        imageBitmap?.let {
+        imageBitmaps.forEach {
             Image(
                 bitmap = it,
                 contentDescription = "Image",