Merge pull request #28 from plaidev/android-1

[android] support background img and vup to 0.1.1

android/nativebrik/build.gradle.kts

@@ -8,7 +8,7 @@ plugins {
 }
 
 group = "com.nativebrik"
-version = "0.1.0"
+version = "0.1.1"
 
 android {
     namespace = "com.nativebrik.sdk"

android/nativebrik/src/main/java/com/nativebrik/sdk/component/renderer/flex.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -20,7 +21,14 @@ 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.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import coil.compose.AsyncImage
+import coil.compose.rememberAsyncImagePainter
+import coil.request.ImageRequest
+import com.nativebrik.sdk.component.provider.data.DataContext
 import com.nativebrik.sdk.component.provider.event.eventDispatcher
 import com.nativebrik.sdk.schema.AlignItems
 import com.nativebrik.sdk.schema.FlexDirection
@@ -29,6 +37,8 @@ import com.nativebrik.sdk.schema.JustifyContent
 import com.nativebrik.sdk.schema.Overflow
 import com.nativebrik.sdk.schema.UIBlock
 import com.nativebrik.sdk.schema.UIFlexContainerBlock
+import com.nativebrik.sdk.template.compile
+import com.nativebrik.sdk.vendor.blurhash.BlurHashDecoder
 import com.nativebrik.sdk.schema.Color as SchemaColor
 
 private fun calcWeight(frameData: FrameData?, flexDirection: FlexDirection): Float? {
@@ -57,29 +67,37 @@ private fun childFrameWeight(block: UIBlock, direction: FlexDirection): Float? {
     }
 }
 
-internal fun framedModifier(modifier: Modifier, frame: FrameData?): Modifier {
-    var mod: Modifier = modifier
+@Composable
+internal fun Modifier.styleByFrame(frame: FrameData?): Modifier {
+    return this
+        .frameSize(frame)
+        .framePadding(frame)
+}
+
 
+@Composable
+internal fun Modifier.frameSize(frame: FrameData?): Modifier {
+    var mod = this
     // size should be set most lastly to make padding insets.
     // width should be content fit by default
     if (frame?.width != null) {
-        if  (frame.width == 0) {
+        mod = if (frame.width == 0) {
             // parent fit
-            mod = mod.fillMaxWidth()
+            mod.fillMaxWidth()
         } else {
             // fixed size
-            mod = mod.width(frame.width.dp)
+            mod.width(frame.width.dp)
         }
     }
 
     // height should be content fit by default
     if (frame?.height != null) {
-        if (frame.height == 0) {
+        mod = if (frame.height == 0) {
             // parent fit
-            mod = mod.fillMaxHeight()
+            mod.fillMaxHeight()
         } else {
             // fixed size
-            mod = mod.height(frame.height.dp)
+            mod.height(frame.height.dp)
         }
     }
 
@@ -94,16 +112,20 @@ internal fun framedModifier(modifier: Modifier, frame: FrameData?): Modifier {
         shape = roundedShape,
     )
 
-    mod = mod.padding(
+    return mod
+}
+
+@Composable
+internal fun Modifier.framePadding(frame: FrameData?): Modifier {
+    return this.padding(
         start = frame?.paddingLeft?.dp ?: 0.dp,
         top = frame?.paddingTop?.dp ?: 0.dp,
         end = frame?.paddingRight?.dp ?: 0.dp,
         bottom = frame?.paddingBottom?.dp ?: 0.dp,
     )
-
-    return mod
 }
 
+
 internal fun parseFramePadding(frame: FrameData?): PaddingValues {
     return PaddingValues(
         start = frame?.paddingLeft?.dp ?: 0.dp,
@@ -112,16 +134,15 @@ internal fun parseFramePadding(frame: FrameData?): PaddingValues {
         bottom = frame?.paddingBottom?.dp ?: 0.dp,
     )
 }
-
 @Composable
-internal fun overflowModifier(modifier: Modifier, direction: FlexDirection, overflow: Overflow?): Modifier {
-    val overflow = overflow ?: return modifier
-    if (overflow != Overflow.SCROLL) return modifier
-    if (direction == FlexDirection.ROW) {
-        return modifier
+internal fun Modifier.flexOverflow(direction: FlexDirection, overflow: Overflow?): Modifier {
+    val overflow = overflow ?: return this
+    if (overflow != Overflow.SCROLL) return this
+    return if (direction == FlexDirection.ROW) {
+        this
             .horizontalScroll(rememberScrollState())
     } else {
-        return modifier
+        this
             .verticalScroll(rememberScrollState())
     }
 }
@@ -185,35 +206,64 @@ internal fun Flex(
     block: UIFlexContainerBlock,
     modifier: Modifier = Modifier,
 ) {
+    val data = DataContext.state
     val direction: FlexDirection = block.data?.direction ?: FlexDirection.ROW
-    var modifier = framedModifier(modifier, block.data?.frame)
-    modifier = overflowModifier(modifier, direction, block.data?.overflow)
-    modifier = modifier.eventDispatcher(block.data?.onClick)
+    val modifier = modifier.frameSize(block.data?.frame)
+    val flexModifier = modifier
+        .framePadding(block.data?.frame)
+        .flexOverflow(direction, block.data?.overflow)
+        .eventDispatcher(block.data?.onClick)
+
     val gap = block.data?.gap
     val justifyContent = block.data?.justifyContent
     val alignItems = block.data?.alignItems
 
-    if (direction == FlexDirection.ROW) {
-        Row(
-            modifier = modifier,
-            horizontalArrangement = parseHorizontalJustifyContent(gap, justifyContent),
-            verticalAlignment = parseVerticalAlignItems(alignItems),
-        ) {
-            block.data?.children?.map {
-                val weight = childFrameWeight(it, direction)
-                Block(block = it, if (weight != null) Modifier.weight(weight) else Modifier)
-            }
+    Box(modifier = modifier) {
+        if (block.data?.frame?.backgroundSrc != null) {
+            val src = compile(block.data.frame.backgroundSrc, data.data)
+            val fallback = parseImageFallbackToBlurhash(src)
+            val decoded = BlurHashDecoder.decode(
+                blurHash = fallback.blurhash,
+                height = fallback.height,
+                width = fallback.width
+            )
+            AsyncImage(
+                modifier = Modifier
+                    .zIndex(0f)
+                    .matchParentSize(),
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data(src)
+                    .crossfade(true)
+                    .build(),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                placeholder = rememberAsyncImagePainter(decoded),
+            )
         }
-    } else {
-        Column(
-            modifier = modifier,
-            horizontalAlignment = parseHorizontalAlignItems(alignItems),
-            verticalArrangement = parseVerticalJustifyContent(gap, justifyContent)
-        ) {
-            block.data?.children?.map {
-                val weight = childFrameWeight(it, direction)
-                Block(block = it, if (weight != null) Modifier.weight(weight) else Modifier)
+        if (direction == FlexDirection.ROW) {
+            Row(
+                modifier = flexModifier.zIndex(1f),
+                horizontalArrangement = parseHorizontalJustifyContent(gap, justifyContent),
+                verticalAlignment = parseVerticalAlignItems(alignItems),
+            ) {
+                block.data?.children?.map {
+                    val weight = childFrameWeight(it, direction)
+                    Block(block = it, if (weight != null) Modifier.weight(weight) else Modifier)
+                }
+            }
+        } else {
+            Column(
+                modifier = flexModifier.zIndex(1f),
+                horizontalAlignment = parseHorizontalAlignItems(alignItems),
+                verticalArrangement = parseVerticalJustifyContent(gap, justifyContent)
+            ) {
+                block.data?.children?.map {
+                    val weight = childFrameWeight(it, direction)
+                    Block(block = it, if (weight != null) Modifier.weight(weight) else Modifier)
+                }
             }
         }
     }
+
+
 }

android/nativebrik/src/main/java/com/nativebrik/sdk/component/renderer/image.kt

@@ -55,8 +55,10 @@ internal fun Image(block: UIImageBlock, modifier: Modifier = Modifier) {
         src = if (loading) block.data?.src ?: "" else compile(block.data?.src ?: "", data.data)
     }
 
-    var modifier = framedModifier(modifier, block.data?.frame)
-    modifier = modifier.eventDispatcher(block.data?.onClick).skeleton(skeleton)
+    val modifier = modifier
+        .styleByFrame(block.data?.frame)
+        .eventDispatcher(block.data?.onClick)
+        .skeleton(skeleton)
 
     val fallback = parseImageFallbackToBlurhash(src)
     val decoded = BlurHashDecoder.decode(

android/nativebrik/src/main/java/com/nativebrik/sdk/component/renderer/select.kt

@@ -65,7 +65,7 @@ internal fun Select(block: UISelectInputBlock, modifier: Modifier = Modifier) {
                 (it.width.toFloat() / this.density).dp
             }
         }
-    val selectModifier = framedModifier(Modifier, block.data?.frame)
+    val selectModifier = modifier.styleByFrame(block.data?.frame)
     val fontStyle = parseFontStyle(
         size = block.data?.size,
         color = block.data?.color,
@@ -172,7 +172,7 @@ internal fun MultiSelect(block: UIMultiSelectInputBlock, modifier: Modifier = Mo
                 (it.width.toFloat() / this.density).dp
             }
         }
-    val selectModifier = framedModifier(Modifier, block.data?.frame)
+    val selectModifier = Modifier.styleByFrame(block.data?.frame)
         .fillMaxWidth()
     val fontStyle = parseFontStyle(
         size = block.data?.size,

android/nativebrik/src/main/java/com/nativebrik/sdk/component/renderer/text.kt

@@ -1,10 +1,17 @@
 package com.nativebrik.sdk.component.renderer
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
+import coil.compose.AsyncImage
+import coil.compose.rememberAsyncImagePainter
+import coil.request.ImageRequest
 import com.nativebrik.sdk.component.provider.data.DataContext
 import com.nativebrik.sdk.component.provider.event.eventDispatcher
 import com.nativebrik.sdk.component.provider.event.skeleton
@@ -15,6 +22,7 @@ import com.nativebrik.sdk.schema.TextAlign
 import com.nativebrik.sdk.schema.UITextBlock
 import com.nativebrik.sdk.template.compile
 import com.nativebrik.sdk.template.hasPlaceholder
+import com.nativebrik.sdk.vendor.blurhash.BlurHashDecoder
 import androidx.compose.ui.graphics.Color as PrimitiveColor
 import androidx.compose.ui.text.font.FontFamily as PrimitiveFontFamily
 import androidx.compose.ui.text.font.FontWeight as PrimitiveFontWeight
@@ -75,9 +83,11 @@ internal fun Text(block: UITextBlock, modifier: Modifier = Modifier) {
         skeleton = loading
         value = if (loading) block.data?.value ?: "" else compile(block.data?.value ?: "", data.data)
     }
+    var modifier = modifier
+        .styleByFrame(block.data?.frame)
+        .skeleton(skeleton)
+        .eventDispatcher(block.data?.onClick)
 
-    var modifier = framedModifier(modifier, block.data?.frame)
-    modifier = modifier.skeleton(skeleton).eventDispatcher(block.data?.onClick)
     val fontStyle = parseFontStyle(
         size = block.data?.size,
         color = block.data?.color,
@@ -86,10 +96,38 @@ internal fun Text(block: UITextBlock, modifier: Modifier = Modifier) {
         alignment = null,
         transparent = skeleton,
     )
+    var maxLines = block.data?.maxLines ?: Int.MAX_VALUE
+    if (maxLines <= 0) {
+        maxLines = Int.MAX_VALUE
+    }
 
-    BasicText(
-        text = value,
-        modifier = modifier,
-        style = fontStyle,
-    )
+    Box(modifier = modifier) {
+        if (block.data?.frame?.backgroundSrc != null) {
+            val src = compile(block.data.frame.backgroundSrc, data.data)
+            val fallback = parseImageFallbackToBlurhash(src)
+            val decoded = BlurHashDecoder.decode(
+                blurHash = fallback.blurhash,
+                height = fallback.height,
+                width = fallback.width
+            )
+            AsyncImage(
+                modifier = Modifier
+                    .zIndex(0f)
+                    .matchParentSize(),
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data(src)
+                    .crossfade(true)
+                    .build(),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                placeholder = rememberAsyncImagePainter(decoded),
+            )
+        }
+        BasicText(
+            text = value,
+            modifier = Modifier.zIndex(1f),
+            style = fontStyle,
+            maxLines = maxLines,
+        )
+    }
 }

android/nativebrik/src/main/java/com/nativebrik/sdk/component/renderer/textinput.kt

@@ -38,7 +38,7 @@ internal fun TextInput(block: UITextInputBlock, modifier: Modifier = Modifier) {
         fontDesign = block.data?.design,
         alignment = block.data?.textAlign,
     )
-    val modifier = framedModifier(modifier, block.data?.frame).fillMaxWidth()
+    val modifier = modifier.styleByFrame(block.data?.frame).fillMaxWidth()
 
     BasicTextField(
         value = value,