Merge pull request #199 from tarkalabs/sheshu/feature/tui_text_row_st…

…yling

Date Style is added in Tui text row

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt

@@ -1,6 +1,7 @@
 package com.tarkalabs.tarkaui.components
 
 import android.util.Log
+import androidx.compose.foundation.Canvas
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -24,18 +25,21 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.PathEffect
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.components.TextRowStyle.DateStyle
 import com.tarkalabs.tarkaui.components.TextRowStyle.Title
 import com.tarkalabs.tarkaui.components.TextRowStyle.TitleWithDescription
 import com.tarkalabs.tarkaui.components.TextRowStyle.TitleWithNotAvailable
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle.GHOST
 import com.tarkalabs.tarkaui.components.base.TUIIconButton
 import com.tarkalabs.tarkaui.components.base.TUIIconButtonTags
-import com.tarkalabs.tarkaui.icons.ChevronRight20
+import com.tarkalabs.tarkaui.icons.Circle24
 import com.tarkalabs.tarkaui.icons.TarkaIcon
 import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
@@ -92,7 +96,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   menuItemList: List<TUIPopUpMenu>? = null,
   onMenuItemClick: ((TUIPopUpMenu) -> Unit)? = null,
   paddingValues: PaddingValues = PaddingValues(),
-  tags: TUITextRowTags = TUITextRowTags()
+  tags: TUITextRowTags = TUITextRowTags(),
 ) {
 
   var expanded by remember { mutableStateOf(false) }
@@ -103,7 +107,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       .testTag(tags.parentTag)
       .then(if (onTextRowClick == null) Modifier else Modifier.clickable { onTextRowClick() })
       .padding(paddingValues),
-    verticalAlignment = Alignment.CenterVertically) {
+    verticalAlignment = Alignment.CenterVertically
+  ) {
     Column(Modifier.weight(1f)) {
       when (style) {
         is TitleWithDescription -> {
@@ -114,6 +119,10 @@ import com.tarkalabs.tarkaui.theme.TUITheme
           TUITextRowTitle(title)
         }
 
+        is DateStyle -> {
+          TUIDateStyle(title, style)
+        }
+
         is TitleWithNotAvailable -> {
           TUITextRowTitleWithNotAvailable(title, style)
         }
@@ -190,6 +199,72 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   }
 }
 
+@Composable fun TUIDateStyle(
+  title: String,
+  style: DateStyle,
+) {
+  Text(
+    text = title,
+    style = TUITheme.typography.body8,
+    color = TUITheme.colors.inputTextDim
+  )
+  Box(modifier = Modifier) {
+    val color = TUITheme.colors.utilityOutline
+    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(4f, 4f), 0f)
+    Canvas(
+      Modifier
+        .width(0.dp)
+        .height(5.dp)
+        .align(Alignment.CenterStart)
+    ) {
+      drawLine(
+        color = color,
+        start = Offset(16f, -2f),
+        end = Offset(16f, 20f),
+        pathEffect = pathEffect
+      )
+    }
+    Column(modifier = Modifier) {
+      Row {
+        Icon(
+          painter = painterResource(id = TarkaIcons.Regular.Circle24.iconRes),
+          contentDescription = TarkaIcons.Regular.Circle24.contentDescription,
+          modifier = Modifier
+            .height(18.dp)
+            .width(12.dp)
+            .align(Alignment.CenterVertically),
+          tint = TUITheme.colors.utilityOutline
+        )
+        Text(
+          text = style.startDate,
+          style = TUITheme.typography.body7,
+          color = TUITheme.colors.onSurface,
+          modifier = Modifier.padding(start = 4.dp)
+        )
+
+      }
+      Row {
+        Icon(
+          painter = painterResource(id = TarkaIcons.Regular.Circle24.iconRes),
+          contentDescription = TarkaIcons.Regular.Circle24.contentDescription,
+          modifier = Modifier
+            .height(18.dp)
+            .width(12.dp)
+            .align(Alignment.CenterVertically),
+          tint = TUITheme.colors.utilityOutline
+        )
+        Text(
+          text = style.endDate,
+          style = TUITheme.typography.body7,
+          color = TUITheme.colors.onSurface,
+          modifier = Modifier.padding(start = 4.dp)
+        )
+      }
+    }
+
+  }
+}
+
 @Composable
 private fun TUITextRowTitle(title: String) {
   Text(
@@ -227,7 +302,15 @@ private fun TUITextRowTitle(title: String) {
 
 sealed class TextRowStyle {
   data class TitleWithDescription(val description: String) : TextRowStyle()
+
+  data class DateStyle(
+    val startDate: String,
+    val endDate: String,
+  ) :
+    TextRowStyle()
+
   data class TitleWithNotAvailable(val text: String) : TextRowStyle()
+
   object Title : TextRowStyle()
 }
 
@@ -241,28 +324,18 @@ data class TUITextRowTags(
   val iconOneTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITextRow_IconOne"),
   val iconTwoTags: TUIIconButtonTags = TUIIconButtonTags(parentTag = "TUITextRow_IconTwo"),
   val buttonTag: String = "TUITextRow_Button",
-  val infoIconTag: String = "TUITextRow_InfoIcon"
+  val infoIconTag: String = "TUITextRow_InfoIcon",
 )
 
 @Preview(showBackground = true)
 @Composable
 fun TUITextRowPreview() {
-  Column {
-
-    TUITextRow(
-      title = "Title",
-      style = Title,
-      infoIcon = TarkaIcons.Regular.ChevronRight20,
-      onTextRowClick = {
-        Log.d("TAG", "TUITextRowPreview: ")
-      },
-      onInfoIconClick = null
-    )
-
-    TUITextRow(
-      title = "Title", style = TitleWithNotAvailable("Not Available"), onTextRowClick = {
-        Log.d("TAG", "TUITextRowPreview: ")
-      }, onInfoIconClick = null
-    )
-  }
+  TUITextRow(
+    title = "Duration", style = DateStyle(
+    "Jan 20 3000 friday march 32",
+    "Jan 20 3000 friday march 32"
+  ), onTextRowClick = {
+    Log.d("TAG", "TUITextRowPreview: ")
+  }, onInfoIconClick = null
+  )
 }