@onekeyfe/react-native-native-list 3.0.157-alpha.248 → 3.0.157-alpha.250

package/android/src/main/java/com/onekey/nativelist/NativeListMediaTileRenderer.kt

@@ -0,0 +1,234 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.Color
+import android.graphics.Outline
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import org.json.JSONObject
+
+internal class NativeListMediaTileRowView(context: ThemedReactContext) :
+    NativeListRendererRowView(context) {
+    private val picture = FrameLayout(context)
+    private val image = NativeListImageSlot(context)
+    private val network = NativeListImageSlot(context)
+    private val errorIcon = OneKeyIconView(context)
+    private val title = NativeListTextView(context)
+    private val subtitle = NativeListTextView(context)
+    private val badge = NativeListTextView(context)
+    private val metadata = LinearLayout(context).apply { orientation = VERTICAL }
+    private val subtitleLine =
+        LinearLayout(context).apply {
+            orientation = HORIZONTAL
+            gravity = Gravity.CENTER_VERTICAL
+        }
+    private val close = NativeListTextView(context)
+    private var imageStyle = JSONObject()
+    private var closeKey = ""
+    override val defaultCornerRadius = 16
+    override val showsSelection = false
+    override val pressChangesBackground = false
+    override val assetFields = listOf("image", "networkImage")
+
+    override fun horizontalWidth(item: NativeListItem) = dp(200)
+
+    override fun pressContent(pressed: Boolean) {
+        picture.alpha = if (pressed) 0.8f else 1f
+    }
+
+    init {
+        orientation = VERTICAL
+        picture.addView(image.view, FrameLayout.LayoutParams(-1, -1))
+        picture.addView(errorIcon)
+        picture.addView(badge)
+        subtitleLine.addView(subtitle, LayoutParams(0, -2, 1f))
+        subtitleLine.addView(network.view)
+        metadata.addView(subtitleLine, LayoutParams(-1, -2))
+        metadata.addView(title, LayoutParams(-1, -2))
+        addView(picture)
+        addView(metadata, LayoutParams(-1, -2))
+        addView(close, LayoutParams(-1, -2))
+        close.setOnClickListener { emitAction(closeKey, close, "mediaClose") }
+        close.gravity = Gravity.END
+    }
+
+    override fun bindContent(
+        item: NativeListItem,
+        theme: JSONObject?,
+        layout: String,
+        checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+    ) {
+        val style = item.json.optJSONObject("style") ?: JSONObject()
+        imageStyle = style.optJSONObject("image") ?: JSONObject()
+        fun size(name: String, fallback: Int) =
+            if (style.has(name)) stylePx(style.optDouble(name)) else dp(fallback)
+        fun tint(name: String, fallback: String) =
+            parseNativeListColor(theme?.optString(name, fallback) ?: fallback)
+        setPadding(
+            size("horizontalPadding", 10),
+            size("verticalPadding", 10),
+            size("horizontalPadding", 10),
+            size("verticalPadding", 10),
+        )
+        gravity =
+            Gravity.START or
+                when (style.optJSONObject("container")?.optString("contentVerticalAlignment")) {
+                    "bottom" -> Gravity.BOTTOM
+                    "center" -> Gravity.CENTER_VERTICAL
+                    else -> Gravity.TOP
+                }
+        NativeListResolvedText.resolve(
+                reactContext,
+                item.json.optString("title"),
+                style.optJSONObject("title"),
+                16f,
+                "medium",
+                tint("primaryText", "#000000DF"),
+                24,
+                1,
+                sourceScale,
+            )
+            .bind(title)
+        NativeListResolvedText.resolve(
+                reactContext,
+                item.json.optString("subtitle"),
+                style.optJSONObject("subtitle"),
+                12f,
+                "regular",
+                tint("secondaryText", "#0000009B"),
+                16,
+                1,
+                sourceScale,
+            )
+            .bind(subtitle)
+        NativeListResolvedText.resolve(
+                reactContext,
+                item.json.optJSONObject("badge")?.optString("text") ?: "",
+                style.optJSONObject("badge"),
+                14f,
+                "regular",
+                parseNativeListColor("#FCFCFC"),
+                0,
+                1,
+                sourceScale,
+            )
+            .bind(badge)
+        if (style.optJSONObject("badge") == null) {
+            // Legacy badge text keeps the platform font padding and proportional digits.
+            badge.includeFontPadding = true
+            badge.fontFeatureSettings = null
+        }
+        if (!style.optJSONObject("badge").let { it?.has("alignment") == true })
+            badge.gravity = Gravity.CENTER
+        badge.setPadding(dp(8), 0, dp(8), 0)
+        badge.background =
+            GradientDrawable().apply {
+                setColor(parseNativeListColor("#000000DF"))
+                cornerRadius = dp(10).toFloat()
+                setStroke(dp(2), Color.WHITE)
+            }
+        badge.layoutParams = FrameLayout.LayoutParams(-2, dp(24), Gravity.END or Gravity.BOTTOM)
+        title.layoutParams = LayoutParams(-1, -2).apply { topMargin = size("lineGap", 0) }
+        metadata.layoutParams = LayoutParams(-1, -2).apply { topMargin = size("leadingGap", 8) }
+        (subtitle.layoutParams as LayoutParams).marginEnd = dp(8)
+        val state = item.json.optString("imageState")
+        errorIcon.visibility = if (state == "error") VISIBLE else GONE
+        errorIcon.iconName = "ImageSquareWavesOutline"
+        errorIcon.tintColor = parseNativeListColor("#00000044")
+        errorIcon.useSourceScale = sourceScale
+        errorIcon.layoutParams = FrameLayout.LayoutParams(dp(24), dp(24), Gravity.CENTER)
+        if (state != "empty" && state != "error" && item.json.has("image"))
+            image.bind(
+                item.json.getJSONObject("image"),
+                "${item.key}:media",
+                fit = imageStyle.optString("contentFit").takeIf { it.isNotEmpty() },
+                placeholder =
+                    theme?.optString("strongBackground", "#0000000F")?.takeIf(String::isNotEmpty)
+                        ?: "#0000000F",
+            )
+        else image.recycle()
+        // Legacy: only the empty/error states paint a slot fill; loaded images show
+        // their own placeholder without a white backing.
+        image.view.background =
+            when (state) {
+                "error" -> GradientDrawable().apply { setColor(tint("strongBackground", "#0000000F")) }
+                "empty" -> GradientDrawable().apply { setColor(Color.WHITE) }
+                else -> null
+            }
+        image.view.outlineProvider =
+            object : ViewOutlineProvider() {
+                override fun getOutline(view: View, outline: Outline) {
+                    if (
+                        imageStyle.optString("shape") == "circle" && !imageStyle.has("cornerRadius")
+                    )
+                        outline.setOval(0, 0, view.width, view.height)
+                    else
+                        outline.setRoundRect(
+                            0,
+                            0,
+                            view.width,
+                            view.height,
+                            if (imageStyle.has("cornerRadius"))
+                                stylePx(imageStyle.optDouble("cornerRadius")).toFloat()
+                            else if (imageStyle.optString("shape") == "square") 0f
+                            else dp(10).toFloat(),
+                        )
+                }
+            }
+        image.view.clipToOutline = true
+        network.view.layoutParams = LayoutParams(dp(14), dp(14))
+        network.view.outlineProvider =
+            object : ViewOutlineProvider() {
+                override fun getOutline(view: View, outline: Outline) {
+                    outline.setOval(0, 0, view.width, view.height)
+                }
+            }
+        network.view.clipToOutline = true
+        item.json.optJSONObject("networkImage")?.let { source ->
+            network.view.visibility = VISIBLE
+            network.view.alpha = 0f
+            network.bind(source, "${item.key}:network", variant = "network", round = true) { loaded
+                ->
+                network.view.alpha = if (loaded) 1f else 0f
+            }
+        }
+            ?: run {
+                network.recycle()
+                network.view.visibility = GONE
+            }
+        closeKey = item.json.optString("closeActionKey")
+        close.text = "×"
+        close.textSize = if (sourceScale) 22f else NativeListScale.font(resources, 22f)
+        close.setTextColor(tint("primaryText", "#000000DF"))
+        close.visibility = if (closeKey.isEmpty()) GONE else VISIBLE
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        val width =
+            if (imageStyle.has("width")) stylePx(imageStyle.optDouble("width"))
+            else
+                (MeasureSpec.getSize(widthMeasureSpec) - paddingLeft - paddingRight).coerceAtLeast(
+                    0
+                )
+        val height =
+            if (imageStyle.has("height")) stylePx(imageStyle.optDouble("height")) else width
+        picture.layoutParams = LayoutParams(width, height)
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    }
+
+    override fun recycleContent() {
+        image.recycle()
+        network.recycle()
+        closeKey = ""
+        picture.alpha = 1f
+    }
+
+    override fun disposeContent() {
+        image.dispose()
+        network.dispose()
+    }
+}

package/android/src/main/java/com/onekey/nativelist/NativeListMessageRenderer.kt

@@ -0,0 +1,232 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.Color
+import android.graphics.Outline
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.ViewOutlineProvider
+import android.widget.LinearLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import kotlin.math.roundToInt
+import org.json.JSONObject
+
+internal object NativeListMessageRenderer {
+  data class Resolved(
+    val title: NativeListResolvedText,
+    val body: NativeListResolvedText,
+    val time: NativeListResolvedText,
+    val horizontalPadding: Int,
+    val verticalPadding: Int,
+    val bodyGap: Int,
+    val timeGap: Int,
+    val leadingGap: Int,
+    val imageWidth: Int,
+    val imageHeight: Int,
+    val imageStyle: JSONObject,
+    val leading: JSONObject?,
+    val thumbnail: JSONObject?,
+    val unread: Boolean,
+    val gravity: Int,
+  )
+
+  fun resolve(
+    context: ThemedReactContext,
+    item: NativeListItem,
+    theme: JSONObject?,
+    sourceScale: Boolean,
+  ): Resolved {
+    val style = item.json.optJSONObject("style") ?: JSONObject()
+    val density = context.resources.displayMetrics.density
+    fun dp(value: Int) =
+      if (sourceScale) (value * density).roundToInt()
+      else NativeListScale.dp(context.resources, value)
+    fun dimension(source: JSONObject, name: String, default: Int) =
+      if (source.has(name)) (source.optDouble(name) * density).roundToInt() else dp(default)
+    fun color(name: String, fallback: String) =
+      parseNativeListColor(theme?.optString(name, fallback) ?: fallback)
+    fun text(name: String, size: Float, weight: String, color: Int, height: Int, lines: Int) =
+      NativeListResolvedText.resolve(
+        context,
+        item.json.optString(name),
+        style.optJSONObject(name),
+        size,
+        weight,
+        color,
+        height,
+        lines,
+        sourceScale,
+      )
+    val image = style.optJSONObject("image") ?: JSONObject()
+    return Resolved(
+      text("title", 14f, "semibold", color("primaryText", "#000000DF"), 20, 2),
+      text(
+        "body",
+        14f,
+        "regular",
+        color("secondaryText", "#0000009B"),
+        20,
+        item.json.optInt("bodyLines", 3),
+      ),
+      text("time", 12f, "regular", color("disabledText", "#00000072"), 16, 1),
+      dimension(style, "horizontalPadding", 12),
+      dimension(style, "verticalPadding", 16),
+      dimension(style, "lineGap", 2),
+      dimension(style, "lineGap", 4),
+      dimension(style, "leadingGap", 12),
+      dimension(image, "width", 28),
+      dimension(image, "height", 28),
+      image,
+      item.json.optJSONObject("leading"),
+      item.json.optJSONObject("thumbnail"),
+      item.json.optBoolean("unread"),
+      when (style.optJSONObject("container")?.optString("contentVerticalAlignment")) {
+        "bottom" -> Gravity.BOTTOM
+        "center" -> Gravity.CENTER_VERTICAL
+        else -> Gravity.TOP
+      },
+    )
+  }
+
+  class Views(private val context: ThemedReactContext) {
+    val column = LinearLayout(context).apply { orientation = LinearLayout.VERTICAL }
+    val title = NativeListTextView(context)
+    val body = NativeListTextView(context)
+    val time = NativeListTextView(context)
+    private var leading: NativeListLeadingVisual? = null
+    private var thumbnail: NativeListImageSlot? = null
+
+    init {
+      listOf(title, body, time).forEach {
+        column.addView(
+          it,
+          LinearLayout.LayoutParams(
+            LinearLayout.LayoutParams.MATCH_PARENT,
+            LinearLayout.LayoutParams.WRAP_CONTENT,
+          ),
+        )
+      }
+    }
+
+    fun bind(
+      root: LinearLayout,
+      resolved: Resolved,
+      item: NativeListItem,
+      theme: JSONObject?,
+      sourceScale: Boolean,
+    ) {
+      resolved.title.bind(title)
+      resolved.body.bind(body)
+      resolved.time.bind(time)
+      root.gravity = resolved.gravity
+      root.clipChildren =
+        !(resolved.leading?.optString("kind") == "token" && resolved.leading.has("networkImage"))
+      root.setPadding(
+        resolved.horizontalPadding,
+        resolved.verticalPadding,
+        resolved.horizontalPadding,
+        resolved.verticalPadding,
+      )
+      resolved.leading?.let { visual ->
+        val host = leading ?: NativeListLeadingVisual(context).also { leading = it }
+        host.bind(visual, resolved.imageStyle, item.key, theme, resolved.unread, sourceScale)
+        val params =
+          LinearLayout.LayoutParams(resolved.imageWidth, resolved.imageHeight).apply {
+            marginEnd = resolved.leadingGap
+          }
+        if (host.parent == null) root.addView(host, 0, params) else host.layoutParams = params
+      }
+        ?: leading?.let {
+          it.recycle()
+          root.removeView(it)
+        }
+      if (column.parent == null)
+        root.addView(
+          column,
+          LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f),
+        )
+      body.layoutParams =
+        LinearLayout.LayoutParams(
+            LinearLayout.LayoutParams.MATCH_PARENT,
+            LinearLayout.LayoutParams.WRAP_CONTENT,
+          )
+          .apply { topMargin = resolved.bodyGap }
+      time.layoutParams =
+        LinearLayout.LayoutParams(
+            LinearLayout.LayoutParams.MATCH_PARENT,
+            LinearLayout.LayoutParams.WRAP_CONTENT,
+          )
+          .apply { topMargin = resolved.timeGap }
+      resolved.thumbnail?.let { image ->
+        val slot = thumbnail ?: NativeListImageSlot(context).also { thumbnail = it }
+        val dp: (Int) -> Int = {
+          if (sourceScale) (it * context.resources.displayMetrics.density).roundToInt()
+          else NativeListScale.dp(context.resources, it)
+        }
+        slot.view.outlineProvider =
+          object : ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) {
+              outline.setRoundRect(0, 0, view.width, view.height, dp(6).toFloat())
+            }
+          }
+        slot.view.clipToOutline = true
+        slot.view.foreground =
+          GradientDrawable().apply {
+            setColor(Color.TRANSPARENT)
+            cornerRadius = dp(6).toFloat()
+            setStroke(
+              1,
+              parseNativeListColor(theme?.optString("strongBackground", "#0000000F") ?: "#0000000F"),
+            )
+          }
+        val params = LinearLayout.LayoutParams(dp(64), dp(64)).apply { marginStart = dp(12) }
+        if (slot.view.parent == null) root.addView(slot.view, params)
+        else slot.view.layoutParams = params
+        slot.bind(
+          image,
+          "${item.key}:thumbnail",
+          placeholder = theme?.optString("strongBackground", "#0000000F") ?: "#0000000F",
+        )
+      }
+        ?: thumbnail?.let {
+          it.recycle()
+          root.removeView(it.view)
+        }
+    }
+
+    fun recycle() {
+      leading?.recycle()
+      thumbnail?.recycle()
+    }
+
+    fun dispose() {
+      leading?.dispose()
+      thumbnail?.dispose()
+    }
+  }
+}
+
+internal class NativeListMessageRowView(context: ThemedReactContext) :
+  NativeListRendererRowView(context) {
+  override val assetFields = listOf("leading", "thumbnail")
+  private val views = NativeListMessageRenderer.Views(context)
+
+  override fun bindContent(
+    item: NativeListItem,
+    theme: JSONObject?,
+    layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+  ) {
+    views.bind(
+      this,
+      NativeListMessageRenderer.resolve(reactContext, item, theme, sourceScale),
+      item,
+      theme,
+      sourceScale,
+    )
+  }
+
+  override fun recycleContent() = views.recycle()
+
+  override fun disposeContent() = views.dispose()
+}