Popup attachment element

toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/Popup.kt

@@ -46,8 +46,12 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
+import com.arcgismaps.mapping.popup.AttachmentsPopupElement
 import com.arcgismaps.mapping.popup.Popup
 import com.arcgismaps.mapping.popup.TextPopupElement
+import com.arcgismaps.toolkit.popup.internal.element.attachment.AttachmentsElementState
+import com.arcgismaps.toolkit.popup.internal.element.attachment.AttachmentsPopupElement
+import com.arcgismaps.toolkit.popup.internal.element.attachment.rememberAttachmentElementState
 import com.arcgismaps.toolkit.popup.internal.element.state.PopupElementStateCollection
 import com.arcgismaps.toolkit.popup.internal.element.state.mutablePopupElementStateCollection
 import com.arcgismaps.toolkit.popup.internal.element.textelement.TextElementState
@@ -89,6 +93,9 @@ private fun Popup(popupState: PopupState, modifier: Modifier = Modifier) {
 
     LaunchedEffect(popup) {
         popupState.popup.evaluateExpressions()
+        popupState.popup.evaluatedElements
+            .filterIsInstance<AttachmentsPopupElement>()
+            .firstOrNull()?.fetchAttachments()
         evaluated = true
     }
 
@@ -142,6 +149,12 @@ private fun PopupBody(popupState: PopupState) {
                         )
                     }
 
+                    is AttachmentsPopupElement -> {
+                        AttachmentsPopupElement(
+                            state = entry.state as AttachmentsElementState
+                        )
+                    }
+
                     else -> {
                         // other popup elements are not created
                     }
@@ -191,6 +204,13 @@ internal fun rememberStates(
                 )
             }
 
+            is AttachmentsPopupElement -> {
+                states.add(
+                    element,
+                    rememberAttachmentElementState(popup = popup, element = element)
+                )
+            }
+
             else -> {
                 // TODO remove for release
                 println("encountered element of type ${element::class.java}")

toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/attachment/AttachmentTile.kt

@@ -0,0 +1,277 @@
+/*
+ * Copyright 2024 Esri
+ *
+ * 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
+ *
+ * http://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.arcgismaps.toolkit.popup.internal.element.attachment
+
+import android.text.format.Formatter
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ArrowDownward
+import androidx.compose.material.icons.outlined.ErrorOutline
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.arcgismaps.LoadStatus
+import com.arcgismaps.mapping.popup.PopupAttachmentType
+import kotlinx.coroutines.flow.MutableStateFlow
+
+@Composable
+internal fun AttachmentTile(
+    state: PopupAttachmentState
+) {
+    val loadStatus by state.loadStatus.collectAsState()
+    val coroutineScope = rememberCoroutineScope()
+    val thumbnail by state.thumbnail
+    val colors = AttachmentsElementDefaults.colors()
+    val shapes = AttachmentsElementDefaults.shapes()
+    Box(
+        modifier = Modifier
+            .width(shapes.tileWidth)
+            .height(shapes.tileHeight)
+            .clip(shape = shapes.tileShape)
+            .border(
+                border = BorderStroke(shapes.tileStrokeWidth, colors.tileBorderColor),
+                shape = shapes.tileShape
+            )
+            .clickable {
+                if (loadStatus is LoadStatus.NotLoaded || loadStatus is LoadStatus.FailedToLoad) {
+                    // load attachment
+                    state.loadAttachment(coroutineScope)
+                }
+                // TODO open attachment viewer in `else` here
+            }
+    ) {
+        when (loadStatus) {
+            LoadStatus.Loaded -> LoadedView(
+                thumbnail = thumbnail,
+                attachmentType = state.type,
+                title = state.name
+            )
+
+            LoadStatus.Loading -> DefaultView(
+                title = state.name,
+                size = state.size,
+                attachmentType = state.type,
+                isLoading = true,
+                isError = false
+            )
+
+            LoadStatus.NotLoaded -> DefaultView(
+                title = state.name,
+                size = state.size,
+                attachmentType = state.type,
+                isLoading = false,
+                isError = false
+            )
+
+            is LoadStatus.FailedToLoad -> DefaultView(
+                title = state.name,
+                size = state.size,
+                attachmentType = state.type,
+                isLoading = false,
+                isError = true
+            )
+        }
+    }
+}
+
+@Composable
+private fun LoadedView(
+    thumbnail: ImageBitmap?,
+    title: String,
+    attachmentType: PopupAttachmentType,
+    modifier: Modifier = Modifier
+) {
+
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+    ) {
+        if (thumbnail != null) {
+            Image(
+                bitmap = thumbnail,
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize(),
+                contentScale = ContentScale.Crop
+            )
+        } else {
+            Icon(
+                imageVector = attachmentType.getIcon(),
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = 10.dp, bottom = 25.dp)
+                    .align(Alignment.Center)
+            )
+        }
+        Column(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxWidth()
+                .height(20.dp)
+                .background(
+                    MaterialTheme.colorScheme.onBackground.copy(
+                        alpha = 0.7f
+                    )
+                ),
+            verticalArrangement = Arrangement.Center
+        ) {
+            Title(
+                text = title,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 5.dp),
+                color = MaterialTheme.colorScheme.background
+            )
+        }
+    }
+}
+
+@Composable
+private fun DefaultView(
+    title: String,
+    size: Long,
+    attachmentType: PopupAttachmentType,
+    isLoading: Boolean,
+    isError: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(horizontal = 5.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceEvenly
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            AttachmentSize(size = size)
+            Icon(
+                imageVector = Icons.Outlined.ArrowDownward,
+                contentDescription = null,
+                modifier = Modifier.size(11.dp)
+            )
+        }
+        if (isLoading) {
+            CircularProgressIndicator(
+                modifier = Modifier.size(20.dp),
+                strokeWidth = 2.dp
+            )
+        } else if (isError) {
+            Image(
+                imageVector = Icons.Outlined.ErrorOutline,
+                contentDescription = null,
+                modifier = Modifier.size(20.dp),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.error)
+            )
+        } else {
+            Icon(
+                imageVector = attachmentType.getIcon(),
+                contentDescription = null,
+                modifier = Modifier.size(20.dp)
+            )
+        }
+        Title(text = title, modifier = Modifier)
+    }
+}
+
+@Composable
+private fun Title(
+    text: String,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+    style: TextStyle = MaterialTheme.typography.labelSmall
+) {
+    Text(
+        text = text,
+        color = color,
+        style = style,
+        textAlign = TextAlign.Center,
+        overflow = TextOverflow.Ellipsis,
+        maxLines = 1,
+        modifier = modifier.padding(horizontal = 1.dp)
+    )
+}
+
+@Composable
+private fun AttachmentSize(
+    size: Long, modifier:
+    Modifier = Modifier
+) {
+    val context = LocalContext.current
+    val fileSize = Formatter.formatFileSize(context, size)
+    Text(
+        text = fileSize,
+        style = MaterialTheme.typography.labelSmall.copy(
+            fontWeight = FontWeight.W300,
+            fontSize = 9.sp
+        ),
+        overflow = TextOverflow.Ellipsis,
+        modifier = modifier
+            .padding(horizontal = 1.dp)
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+internal fun PreviewAttachmentTile() {
+    AttachmentTile(
+        state = PopupAttachmentState(
+            name = "Some attachment",
+            size = 1234L,
+            type = PopupAttachmentType.Other,
+            loadStatus = MutableStateFlow(LoadStatus.NotLoaded),
+            onLoadAttachment = { Result.success(Unit) },
+            onLoadThumbnail = null
+        )
+    )
+}

toolkit/popup/src/main/java/com/arcgismaps/toolkit/popup/internal/element/attachment/AttachmentsElementDefaults.kt

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2024 Esri
+ *
+ * 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
+ *
+ *  http://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.arcgismaps.toolkit.popup.internal.element.attachment
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * A central place for theming values. To be promoted to a public theme type.
+ */
+internal object AttachmentsElementDefaults {
+    @Composable
+    fun shapes(): AttachmentElementShapes = AttachmentElementShapes(
+        borderThickness = 1.dp,
+        containerShape = RoundedCornerShape(5.dp),
+        tileShape = RoundedCornerShape(8.dp),
+        galleryPadding = 15.dp,
+        tileStrokeWidth = 0.5.dp,
+        tileWidth = 92.dp,
+        tileHeight = 75.dp
+    )
+
+    @Suppress("unused")
+    @Composable
+    fun colors() : AttachmentsElementColors = AttachmentsElementColors(
+        containerColor = MaterialTheme.colorScheme.background,
+        galleryContainerColor = MaterialTheme.colorScheme.onBackground,
+        borderColor = MaterialTheme.colorScheme.outline,
+        tileBorderColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.6f)
+
+    )
+}
+
+internal data class AttachmentElementShapes(
+    val borderThickness: Dp,
+    val containerShape: RoundedCornerShape,
+    val tileShape: RoundedCornerShape,
+    val galleryPadding: Dp,
+    val tileStrokeWidth: Dp,
+    val tileWidth: Dp,
+    val tileHeight: Dp
+)
+
+internal data class AttachmentsElementColors(
+    val containerColor : Color,
+    val galleryContainerColor: Color,
+    val tileBorderColor : Color,
+    val borderColor : Color
+)