ANDROAPP-5692-mobile-ui-Add-onImageClick-callback-to-ImageBlock-compo…

…nent (#128) * [ANDROAPP-5692] add clickable event and parameter to Input Image and Input Signature * Fix tests * add focus request on click events * ktlint fix
dhis2 · Oct 31, 2023 · 0d44146 · 0d44146
1 parent 389381a
commit 0d44146
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 3 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/ImageBlockScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/ImageBlockScreen.kt
@@ -14,6 +14,7 @@ fun ImageBlockScreen() {
         load = { sampleImage },
         painterFor = { remember { it } },
         onClick = {},
+        onImageClick = {},
     )
 }
 

diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputImageScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputImageScreen.kt
@@ -47,6 +47,7 @@ fun InputImageScreen() {
                     uploadState = UploadState.LOADED
                 }
             },
+            onImageClick = {},
         )
         Spacer(Modifier.size(Spacing.Spacing18))
 
@@ -60,6 +61,7 @@ fun InputImageScreen() {
             onDownloadButtonClick = {},
             onResetButtonClicked = {},
             onAddButtonClicked = {},
+            onImageClick = {},
         )
         Spacer(Modifier.size(Spacing.Spacing18))
 
@@ -75,6 +77,7 @@ fun InputImageScreen() {
             onDownloadButtonClick = {},
             onResetButtonClicked = { },
             onAddButtonClicked = {},
+            onImageClick = {},
         )
     }
 }

diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputSignatureScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputSignatureScreen.kt
@@ -47,6 +47,7 @@ fun InputSignatureScreen() {
                     uploadState = UploadState.LOADED
                 }
             },
+            onImageClick = {},
         )
         Spacer(Modifier.size(Spacing.Spacing18))
 
@@ -60,6 +61,7 @@ fun InputSignatureScreen() {
             onDownloadButtonClick = {},
             onResetButtonClicked = {},
             onAddButtonClicked = {},
+            onImageClick = {},
         )
         Spacer(Modifier.size(Spacing.Spacing18))
 
@@ -75,6 +77,7 @@ fun InputSignatureScreen() {
             onDownloadButtonClick = {},
             onResetButtonClicked = { },
             onAddButtonClicked = {},
+            onImageClick = {},
         )
     }
 }

diff --git a/...m/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BasicInputImage.kt b/...m/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BasicInputImage.kt
@@ -10,8 +10,11 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Cancel
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.testTag
@@ -56,11 +59,14 @@ internal fun <T> BasicInputImage(
     addButtonIcon: ImageVector,
     modifier: Modifier = Modifier,
     onDownloadButtonClick: () -> Unit,
+    onImageClick: () -> Unit,
     onResetButtonClicked: () -> Unit,
     onAddButtonClicked: () -> Unit,
 ) {
+    val focusRequester = remember { FocusRequester() }
+
     InputShell(
-        modifier = modifier.testTag("INPUT_$testTag"),
+        modifier = modifier.testTag("INPUT_$testTag").focusRequester(focusRequester),
         title = title,
         state = state,
         isRequiredField = isRequired,
@@ -100,6 +106,7 @@ internal fun <T> BasicInputImage(
                                     .testTag("INPUT_" + testTag + "_ADD_BUTTON"),
                             ) {
                                 onAddButtonClicked.invoke()
+                                focusRequester.requestFocus()
                             }
                         },
                     )
@@ -127,7 +134,10 @@ internal fun <T> BasicInputImage(
                         ImageBlock(
                             load = load,
                             painterFor = painterFor,
-                            onClick = onDownloadButtonClick,
+                            onClick = {
+                                onDownloadButtonClick.invoke()
+                                focusRequester.requestFocus()
+                            },
                             downloadButtonVisible = downloadButtonVisible,
                             modifier = Modifier.padding(
                                 end = if (state == InputShellState.DISABLED) {
@@ -136,6 +146,10 @@ internal fun <T> BasicInputImage(
                                     Spacing.Spacing0
                                 },
                             ),
+                            onImageClick = {
+                                onImageClick.invoke()
+                                focusRequester.requestFocus()
+                            },
                         )
                     }
                 }

diff --git a/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ImageBlock.kt b/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ImageBlock.kt
@@ -1,6 +1,7 @@
 package org.hisp.dhis.mobile.ui.designsystem.component
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -40,6 +41,7 @@ fun <T> ImageBlock(
     painterFor: @Composable (T) -> Painter,
     modifier: Modifier = Modifier,
     downloadButtonVisible: Boolean = true,
+    onImageClick: () -> Unit,
     onClick: () -> Unit,
 ) {
     val image: T? by produceState<T?>(null) {
@@ -65,7 +67,8 @@ fun <T> ImageBlock(
                 modifier = Modifier
                     .fillMaxWidth()
                     .clip(shape = RoundedCornerShape(Radius.S))
-                    .height(160.dp),
+                    .height(160.dp)
+                    .clickable { onImageClick.invoke() },
             )
             if (downloadButtonVisible) {
                 SquareIconButton(

diff --git a/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputImage.kt b/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputImage.kt
@@ -42,6 +42,7 @@ fun <T> InputImage(
     onDownloadButtonClick: () -> Unit,
     onResetButtonClicked: () -> Unit,
     onAddButtonClicked: () -> Unit,
+    onImageClick: () -> Unit,
 ) {
     BasicInputImage(
         title = title,
@@ -60,5 +61,6 @@ fun <T> InputImage(
         onDownloadButtonClick = onDownloadButtonClick,
         onResetButtonClicked = onResetButtonClicked,
         onAddButtonClicked = onAddButtonClicked,
+        onImageClick = onImageClick,
     )
 }
diff --git a/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputSignature.kt b/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputSignature.kt
@@ -42,6 +42,7 @@ fun <T> InputSignature(
     onDownloadButtonClick: () -> Unit,
     onResetButtonClicked: () -> Unit,
     onAddButtonClicked: () -> Unit,
+    onImageClick: () -> Unit,
 ) {
     BasicInputImage(
         title = title,
@@ -60,5 +61,6 @@ fun <T> InputSignature(
         onDownloadButtonClick = onDownloadButtonClick,
         onResetButtonClicked = onResetButtonClicked,
         onAddButtonClicked = onAddButtonClicked,
+        onImageClick = onImageClick,
     )
 }
diff --git a/.../desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BasicInputImageTest.kt b/.../desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/BasicInputImageTest.kt
@@ -36,6 +36,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -58,6 +59,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -80,6 +82,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -101,6 +104,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -123,6 +127,8 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
+
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -148,6 +154,8 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
+
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -174,6 +182,8 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
+
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -197,6 +207,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()
@@ -220,6 +231,7 @@ class BasicInputImageTest {
                 },
                 onAddButtonClicked = {
                 },
+                onImageClick = {},
             )
         }
         rule.onNodeWithTag("INPUT_IMAGE").assertExists()

diff --git a/...m/src/desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ImageBlockTest.kt b/...m/src/desktopTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ImageBlockTest.kt
@@ -20,6 +20,7 @@ class ImageBlockTest {
                 load = { provideImage(File("")) },
                 painterFor = { BitmapPainter(it!!) },
                 onClick = {},
+                onImageClick = {},
             )
         }