TP-24304 | provide support for spannable text (#5)

This commit is contained in:
Tushar Kumar Saha
2023-04-11 13:42:43 +05:30
committed by GitHub Enterprise
parent a45bfd45ac
commit effaae66ef
8 changed files with 184 additions and 17 deletions

View File

@@ -9,20 +9,66 @@
"childrenViews": [
{
"property": {
"viewType": "Spacer",
"layoutId": "item_1",
"backgroundColor": "#ABABAB",
"height": "200",
"width": "200"
}
},
{
"property": {
"viewType": "Spacer",
"layoutId": "item_2",
"backgroundColor": "#010101",
"height": "200",
"width": "200"
"spanProperty": [
{
"stringId": "text_id_1",
"property": {
"fontFamily": "naviSansFamily",
"fontWeight": "BOLD",
"fontSize": 16,
"textColor": "#FFE388"
},
"tag": "CTA",
"cta": "item/navi/amc"
},
{
"stringId": "text_id_2",
"property": {
"fontFamily": "naviSansFamily",
"fontWeight": "BOLD",
"fontSize": 18,
"textColor": "#2F003F"
},
"tag": "CTA1",
"cta": "CTA1"
},
{
"stringId": "text_id_3",
"property": {
"fontFamily": "naviSansFamily",
"fontWeight": "BOLD",
"fontSize": 12,
"textColor": "#3C0050"
},
"tag": "CTA",
"cta": "item/navi/loan"
}
],
"viewType": "SpannableText",
"layoutId": "spannable_id",
"padding": {
"start": 8,
"end": 8,
"top": 5,
"bottom": 5
},
"constraintLinks": {
"start": {
"viewId": "parent",
"constraint": "START",
"margin": 16
},
"end": {
"viewId": "parent",
"constraint": "END",
"margin": 16
},
"top": {
"viewId": "tagCard",
"constraint": "BOTTOM",
"margin": 28
}
}
}
}
]
@@ -32,6 +78,14 @@
"title": {
"viewType": "Text",
"text": "Testing deserializer's"
},
"spannable_id": {
"viewType": "SpannableText",
"textMap": {
"text_id_1": "This is a sample",
"text_id_2": "Spannable text.",
"text_id_3": "Please enjoy while it renders"
}
}
}
}

View File

@@ -109,6 +109,9 @@ class ComposePropertyDeserializer : JsonDeserializer<BaseProperty> {
ComposeViewType.Grid.name -> {
context?.deserialize(jsonObject, GridProperty::class.java)
}
ComposeViewType.SpannableText.name -> {
context?.deserialize(jsonObject, SpannableProperty::class.java)
}
else -> null
}
}

View File

@@ -119,10 +119,13 @@ class UiTronDataDeserializer : JsonDeserializer<UiTronData> {
context?.deserialize(jsonObject, LazyRowData::class.java)
}
ComposeViewType.Pager.name -> {
context?.deserialize(jsonObject , PagerData::class.java)
context?.deserialize(jsonObject, PagerData::class.java)
}
ComposeViewType.Grid.name -> {
context?.deserialize(jsonObject , GridData::class.java)
context?.deserialize(jsonObject, GridData::class.java)
}
ComposeViewType.SpannableText.name -> {
context?.deserialize(jsonObject, SpannableTextData::class.java)
}
else -> null
}

View File

@@ -0,0 +1,17 @@
package com.navi.uitron.model.data
/**
* this text map contains mapping of id and string content of individual spans
*
* for eg:
*
* "textMap": {
* "text_id_1": "This is a sample",
* "text_id_2": "Spannable text.",
* "text_id_3": "Please enjoy while it renders"
* }
*
*/
data class SpannableTextData(
val textMap: HashMap<String, String>? = null,
) : UiTronData()

View File

@@ -0,0 +1,10 @@
package com.navi.uitron.model.ui
data class SpannableProperty(
val spanProperty: List<SpanProperty>
) : BaseProperty()
data class SpanProperty(
val stringId: String? = null,
val property: TextProperty,
)

View File

@@ -133,7 +133,8 @@ enum class ComposeViewType {
PagerIndicator,
LazyColumn,
LazyRow,
Grid
Grid,
SpannableText
}
enum class HorizontalArrangementType {

View File

@@ -0,0 +1,70 @@
package com.navi.uitron.render
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.ClickableText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.navi.uitron.UiTronSdkManager
import com.navi.uitron.model.data.SpannableTextData
import com.navi.uitron.model.data.UiTronData
import com.navi.uitron.model.ui.SpannableProperty
import getTextDecoration
import hexToComposeColor
import setBackground
/**
* this is simple Spannable text renderer. It doesn't handle clicks
* Sample can be found here:
* https://navihq.atlassian.net/wiki/spaces/NAVI/pages/643825690/UITron+Atomic+components+Spannable+text
*/
class SpannableTextRenderer : Renderer<SpannableProperty> {
@Composable
override fun Render(property: SpannableProperty, uiTronData: UiTronData?) {
val spanProperties = property.spanProperty
val spanData = uiTronData as? SpannableTextData
val text = java.lang.StringBuilder()
val annotatedString = buildAnnotatedString {
spanProperties.forEach { spanProperty ->
val string = spanData?.textMap?.get(spanProperty.stringId) ?: ""
val startIndex = text.length
val endIndex = text.length + (string.length)
addStyle(
style = SpanStyle(
fontFamily = UiTronSdkManager.getDependencyProvider().getFontFamily(spanProperty.property.fontFamily),
fontWeight = UiTronSdkManager.getDependencyProvider().getFontWeight(spanProperty.property.fontWeight),
fontSize = spanProperty.property.fontSize?.sp ?: 14.sp,
color = spanProperty.property.textColor?.hexToComposeColor ?: Color.Black,
textDecoration = getTextDecoration(spanProperty.property.textDecoration),
letterSpacing = spanProperty.property.letterSpacing?.sp ?: 0.sp,
), startIndex, endIndex
)
text.append("$string ")
}
append(text.toString())
}
ClickableText(text = annotatedString,
modifier = Modifier
.layoutId(property.layoutId.orEmpty())
.padding(
top = property.padding?.top?.dp ?: 0.dp,
bottom = property.padding?.bottom?.dp ?: 0.dp,
start = property.padding?.start?.dp ?: 0.dp,
end = property.padding?.end?.dp ?: 0.dp
)
.setBackground(
property.backgroundColor,
property.shape,
property.backGroundBrushData
),
onClick = {
})
}
}

View File

@@ -337,6 +337,15 @@ class UiTronRenderer(
)
}
}
ComposeViewType.SpannableText.name -> {
(composeView.property as? SpannableProperty)?.let {
SpannableTextRenderer().Render(property = it,
uiTronData = dataMap?.getOrElse(
it.layoutId.orEmpty()
) { null }
)
}
}
}
}
}