Tag view container Implementation

core/test/src/main/AndroidManifest.xml

@@ -1,15 +1,3 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <application>
-        <activity
-            android:name="co.yml.coreui.core.test.TestActivity"
-            android:exported="true">
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-        </activity>
-    </application>
 </manifest>

core/ui/src/androidTest/java/co/yml/coreui/ui/ytag/TagViewContainerTesting.kt

@@ -0,0 +1,102 @@
+package co.yml.coreui.ui.ytag
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.test.*
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.unit.dp
+import co.yml.coreui.core.ui.ytag.TagViewContainer
+import co.yml.coreui.core.ui.ytag.model.TagViewContainerModifiers
+import co.yml.coreui.core.ui.ytag.model.TagViewData
+import co.yml.coreui.core.ui.ytag.model.TagViewModifiers
+import org.junit.Rule
+import org.junit.Test
+
+class TagViewContainerTesting {
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    private fun launchTagViewContainer(
+        tagViewContainerModifiers: TagViewContainerModifiers = TagViewContainerModifiers.Builder()
+            .shape(RoundedCornerShape(10.dp))
+            .width(200.dp)
+            .height(120.dp)
+            .build()
+    ) {
+        val tagViewModifiers = TagViewModifiers.Builder()
+            .shape(CircleShape)
+            .backgroundColor(Color.Black)
+            .textColor(Color.White)
+            .build()
+
+        val tagViewData = listOf(
+            TagViewData(text = "Tag 1", tagViewModifiers = tagViewModifiers),
+            TagViewData(text = "Tag 2", tagViewModifiers = tagViewModifiers),
+            TagViewData(text = "Tag 3", tagViewModifiers = tagViewModifiers),
+            TagViewData(text = "Tag 4", tagViewModifiers = tagViewModifiers)
+        )
+
+        composeTestRule.setContent {
+            TagViewContainer(
+                tagViewData = tagViewData,
+                tagViewContainerModifiers = tagViewContainerModifiers
+            )
+        }
+    }
+
+    @Test
+    fun tagViewContainer_shown() {
+        launchTagViewContainer()
+
+        println(
+            "tag_view_container ${composeTestRule.onNodeWithTag("tag_view_container", useUnmergedTree = true).printToString()}"
+        )
+
+        composeTestRule.onNodeWithTag("tag_view_container").assertIsDisplayed()
+    }
+
+    @Test
+    fun tagViewContainer_with_modifiers_are_executed() {
+        val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
+            .minWidth(150.dp)
+            .minHeight(150.dp)
+            .width(200.dp)
+            .height(150.dp)
+            .enableBorder(true)
+            .borderWidth(1.dp)
+            .borderColor(Color.Red)
+            .backgroundColor(Color.Gray)
+            .shape(CircleShape)
+            .containerPaddingValues(PaddingValues(8.dp))
+            .tagSpacingHorizontal(8.dp)
+            .tagSpacingVertical(8.dp)
+            .moreTagConfiguration(TagViewData(text = "more"))
+            .build()
+
+        launchTagViewContainer(tagViewContainerModifiers)
+
+        composeTestRule.onNodeWithTag("tag_view_container")
+            .assertIsDisplayed()
+    }
+
+    @Test
+    fun tagViewContainer_tags_shown(){
+        launchTagViewContainer()
+
+        composeTestRule.onNodeWithText("Tag 1").assertIsDisplayed()
+    }
+
+    @Test
+    fun tagViewContainer_with_less_space_more_tag_shown(){
+        val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
+            .width(150.dp)
+            .height(50.dp)
+            .build()
+
+        launchTagViewContainer(tagViewContainerModifiers)
+
+        composeTestRule.onNodeWithText("more").assertIsDisplayed()
+    }
+}

core/ui/src/main/AndroidManifest.xml

@@ -3,4 +3,4 @@
     <application>
         <activity android:name="androidx.activity.ComponentActivity" />
     </application>
-</manifest>
+</manifest>

core/ui/src/main/java/co/yml/coreui/core/ui/ytag/TagView.kt

@@ -7,9 +7,11 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
@@ -21,6 +23,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 import co.yml.coreui.core.ui.ytag.model.TagViewModifiers
 
 /**
@@ -38,7 +42,9 @@ fun TagView(
     leadingIcon: @Composable ((enable: Boolean) -> Unit)? = null,
     trailingIcon: @Composable ((enable: Boolean) -> Unit)? = null,
     enabled: Boolean = true,
-    tagViewModifiers: TagViewModifiers = TagViewModifiers.Builder().build()
+    tagViewModifiers: TagViewModifiers = TagViewModifiers.Builder().build(),
+    overFlowText: String = "",
+    onClick: () -> Unit = {}
 ) {
     with(tagViewModifiers) {
         Surface(
@@ -50,8 +56,10 @@ fun TagView(
                 .width(width = width ?: Dp.Unspecified)
                 .height(height = height)
         ) {
-            Row(
+            ConstraintLayout(
                 modifier = Modifier
+                    .width(width = width ?: Dp.Unspecified)
+                    .height(height)
                     .run {
                         if (enableBorder) {
                             border(
@@ -66,33 +74,48 @@ fun TagView(
                     .clickable {
                         if (enabled) {
                             onClick.invoke()
+                            tagViewModifiers.onClick.invoke()
                         }
                     }
                     .defaultMinSize(minWidth = minWidth, minHeight = minHeight)
                     .padding(containerPaddingValues)
                     .background(
                         color = backgroundColor,
                         shape = shape
-                    ),
-                verticalAlignment = Alignment.CenterVertically
+                    )
             ) {
-                leadingIcon?.invoke(enabled)
+                val (leading_icon, text_view, trailing_icon) = createRefs()
+
+                Box(modifier = Modifier.constrainAs(leading_icon) {
+                    start.linkTo(parent.start)
+                    top.linkTo(parent.top)
+                    bottom.linkTo(parent.bottom)
+                }
+                ) {
+                    leadingIcon?.invoke(enabled)
+                }
 
                 Text(
-                    text = text,
+                    text = overFlowText.ifEmpty { text },
                     color = textColor,
                     fontSize = fontSize,
                     fontWeight = fontWeight,
                     fontFamily = fontFamily,
                     fontStyle = fontStyle,
                     letterSpacing = letterSpacing,
                     modifier = Modifier
+                        .constrainAs(text_view) {
+                            start.linkTo(leading_icon.end)
+                            end.linkTo(trailing_icon.start)
+                            top.linkTo(parent.top)
+                            bottom.linkTo(parent.bottom)
+                            width = Dimension.fillToConstraints
+                        }
                         .padding(
                             textPadding
                         )
-                        .align(Alignment.CenterVertically)
                         .semantics {
-                            this.contentDescription = text
+                            this.contentDescription = semantics
                         },
                     style = style,
                     textDecoration = textDecoration,
@@ -103,7 +126,15 @@ fun TagView(
                     maxLines = maxLines,
                     onTextLayout = onTextLayout
                 )
-                trailingIcon?.invoke(enabled)
+                Box(modifier = Modifier.constrainAs(trailing_icon) {
+                    end.linkTo(parent.end)
+                    top.linkTo(parent.top)
+                    bottom.linkTo(parent.bottom)
+                }
+                ) {
+                    trailingIcon?.invoke(enabled)
+                }
+
             }
         }
     }