@onekeyfe/react-native-native-list 3.0.157-alpha.249 → 3.0.157-alpha.251

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

@@ -0,0 +1,169 @@
+package com.margelo.nitro.nativelist
+
+import android.view.Gravity
+import com.facebook.react.uimanager.ThemedReactContext
+import org.json.JSONArray
+import org.json.JSONObject
+
+internal class NativeListActionRowView(context: ThemedReactContext) :
+  NativeListRendererRowView(context) {
+  private val visual = NativeListLeadingVisual(context)
+  private val title = NativeListTextView(context)
+  private val accessories = NativeListAccessoryStack(context)
+  override val assetFields = listOf("icon")
+
+  init {
+    visual.glyphSize = 24
+    visual.iconBorder = false
+    orientation = HORIZONTAL
+    gravity = Gravity.CENTER_VERTICAL
+    addView(visual)
+    addView(title, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    addView(accessories)
+    accessories.onAction = { key, view, slot, target ->
+      emitAction(key, view, "trailingAccessory", slot, target, accessories.anchorInset(view))
+    }
+  }
+
+  private val titlePaintFlags = title.paintFlags
+  private val fallbackPaintFlags = visual.fallbackTextView.paintFlags
+
+  override fun defaultHeight(item: NativeListItem, layout: String) =
+    when {
+      item.json.optString("presentation") == "accountSelector" -> 48
+      item.json.has("icon") -> 60
+      else -> 44
+    }
+
+  override fun bindContent(
+    item: NativeListItem,
+    theme: JSONObject?,
+    layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+  ) {
+    val style = item.json.optJSONObject("style") ?: JSONObject()
+    val icon = item.json.optJSONObject("icon")
+    val alignment = style.optJSONObject("container")?.optString("contentVerticalAlignment")
+    gravity =
+      when (alignment) {
+        "top" -> Gravity.TOP
+        "bottom" -> Gravity.BOTTOM
+        else -> Gravity.CENTER_VERTICAL
+      }
+    val selector = item.json.optString("presentation") == "accountSelector"
+    visual.roundedGlyphOrigin = selector && item.hasExplicitHeight
+    val descriptors =
+      item.json.optJSONObject("checkbox")?.let { JSONArray().put(it) }
+        ?: item.json.optJSONArray("trailing")
+        ?: JSONArray()
+    accessories.bind(item, descriptors, theme, style, sourceScale, checkboxState)
+    // Legacy: overhanging selector icons/checkboxes must not be clipped by row padding.
+    clipToPadding = !accessories.requestsUnclippedHost
+    val hp =
+      if (style.has("horizontalPadding")) stylePx(style.optDouble("horizontalPadding"))
+      else dp(if (layout == "table") 16 else 12)
+    val vp =
+      if (style.has("verticalPadding")) stylePx(style.optDouble("verticalPadding")) else dp(8)
+    setPadding(hp, vp, if (style.has("horizontalPadding")) hp else accessories.endInset ?: hp, vp)
+    val titleParams = title.layoutParams as LayoutParams
+    // Legacy: the weighted title abuts the trailing accessories without a gap.
+    titleParams.marginEnd = 0
+    title.layoutParams = titleParams
+    val tone = item.json.optString("tone")
+    val token =
+      if (selector && tone != "primary") "secondaryText"
+      else if (!selector && tone == "danger") "negative" else "primaryText"
+    val fallback =
+      if (token == "negative") "#C40006D3"
+      else if (selector || token == "secondaryText") "#0000009B" else "#000000DF"
+    NativeListResolvedText.resolve(
+        context,
+        item.json.optString("title"),
+        style.optJSONObject("title"),
+        16f,
+        if (selector && icon == null) "regular" else "medium",
+        parseNativeListColor(theme?.optString(token, fallback) ?: fallback),
+        24,
+        1,
+        sourceScale,
+      )
+      .bind(title)
+    title.paintFlags = titlePaintFlags
+    // Legacy selector typography covered every text in the row, including the
+    // trailing accessory text; explicit style fontSize/lineHeight stay as set.
+    if (selector && sourceScale) {
+      applyNativeListSourceTypography(title, style.optJSONObject("title"))
+      accessories.applySourceTypography(style)
+    }
+    visual.visibility = if (icon == null) GONE else VISIBLE
+    // Legacy: the 1px icon outline is kept only for a non-selector icon with an
+    // explicit background; selector icons use a plain 8dp rounded fill.
+    visual.iconBorder = !selector && icon?.has("backgroundColor") == true
+    if (icon != null) {
+      val source = JSONObject(icon.toString())
+      if (!source.has("backgroundColor"))
+        source.put(
+          "backgroundColor",
+          if (selector) theme?.optString("strongBackground", "#0000000F") ?: "#0000000F"
+          else "#00000000",
+        )
+      val image = JSONObject(style.optJSONObject("image")?.toString() ?: "{}")
+      if (selector && !image.has("cornerRadius") && !image.has("shape"))
+        image.put("cornerRadius", scaledDp(8f) / resources.displayMetrics.density)
+      visual.layoutParams =
+        LayoutParams(
+            if (image.has("width")) stylePx(image.optDouble("width"))
+            else dp(if (selector) 32 else 40),
+            if (image.has("height")) stylePx(image.optDouble("height"))
+            else dp(if (selector) 32 else 40),
+          )
+          .apply {
+            marginEnd =
+              if (style.has("leadingGap")) stylePx(style.optDouble("leadingGap"))
+              // Legacy: Yoga rounds the cumulative selector edges, not each gap.
+              else if (selector && item.hasExplicitHeight) dp(56) - dp(12) - dp(32)
+              else dp(12)
+          }
+      visual.bind(source, image, item.key, theme, false, sourceScale)
+    } else visual.recycle()
+    visual.fallbackTextView.paintFlags = fallbackPaintFlags
+    // Legacy selector typography also covered the leading fallback text.
+    if (selector && sourceScale && icon != null)
+      applyNativeListSourceTypography(visual.fallbackTextView, null)
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    super.onLayout(changed, l, t, r, b)
+    val item = tag as? NativeListItem ?: return
+    if (
+      item.hasExplicitHeight &&
+        item.json.optString("presentation") == "accountSelector" &&
+        item.json
+          .optJSONObject("style")
+          ?.optJSONObject("container")
+          ?.has("contentVerticalAlignment") != true
+    ) {
+      for (view in listOf(title, accessories)) if (view.visibility != GONE)
+        view.offsetTopAndBottom(
+          paddingTop + (height - paddingTop - paddingBottom - view.height + 1) / 2 - view.top
+        )
+    }
+  }
+
+  override fun bindSelectionContent(
+    item: NativeListItem,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+  ) {
+    accessories.updateSelection(item, checkboxState)
+  }
+
+  override fun recycleContent() {
+    visual.recycle()
+    accessories.reset()
+  }
+
+  override fun disposeContent() {
+    visual.dispose()
+    accessories.reset()
+  }
+}

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

@@ -0,0 +1,243 @@
+package com.margelo.nitro.nativelist
+
+import android.graphics.drawable.GradientDrawable
+import android.text.TextUtils
+import android.view.Gravity
+import android.widget.LinearLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import org.json.JSONObject
+
+internal class NativeListActivityRowView(context: ThemedReactContext) :
+  NativeListRendererRowView(context) {
+  private val content =
+    LinearLayout(context).apply {
+      orientation = HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+    }
+  private val visual = NativeListLeadingVisual(context)
+  private val column = LinearLayout(context).apply { orientation = VERTICAL }
+  private val titleLine =
+    LinearLayout(context).apply {
+      orientation = HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+    }
+  private val title = NativeListTextView(context)
+  private val description = NativeListTextView(context)
+  private val status = NativeListTextView(context)
+  private val failure = NativeListTextView(context)
+  private val amounts =
+    LinearLayout(context).apply {
+      orientation = VERTICAL
+      gravity = Gravity.END
+    }
+  private val values = List(2) { NativeListTextView(context) }
+  private val actions = LinearLayout(context).apply { orientation = HORIZONTAL }
+  private val buttons = List(3) { NativeListTextView(context) }
+  override val assetFields = listOf("leading", "secondaryLeading")
+
+  init {
+    titleLine.addView(title, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    titleLine.addView(failure)
+    column.addView(titleLine)
+    column.addView(description)
+    column.addView(status)
+    values.forEach(amounts::addView)
+    buttons.forEach(actions::addView)
+    content.addView(visual)
+    content.addView(column, LayoutParams(0, LayoutParams.WRAP_CONTENT, 1f))
+    content.addView(amounts)
+    addView(content, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT))
+    addView(actions)
+  }
+
+  override fun defaultHeight(item: NativeListItem, layout: String) =
+    if ((item.json.optJSONArray("footerActions")?.length() ?: 0) > 0) 104 else 60
+
+  override fun bindContent(
+    item: NativeListItem,
+    theme: JSONObject?,
+    layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+  ) {
+    val data = item.json
+    val style = data.optJSONObject("style") ?: JSONObject()
+    val image = style.optJSONObject("image") ?: JSONObject()
+    fun color(name: String, fallback: String) =
+      parseNativeListColor(theme?.optString(name, fallback) ?: fallback)
+    fun fill(value: Int, radius: Int) =
+      GradientDrawable().apply {
+        setColor(value)
+        cornerRadius = dp(radius).toFloat()
+      }
+    fun bind(
+      view: NativeListTextView,
+      value: String,
+      slot: String,
+      size: Float,
+      weight: String = "regular",
+      ink: Int = color("secondaryText", "#0000009B"),
+      line: Int = 0,
+      lines: Int = 1,
+      align: String = "start",
+    ) {
+      val textStyle =
+        JSONObject(style.optJSONObject(slot)?.toString() ?: "{}").apply {
+          if (!has("alignment")) put("alignment", align)
+        }
+      NativeListResolvedText.resolve(
+          context,
+          value,
+          textStyle,
+          size,
+          weight,
+          ink,
+          line,
+          lines,
+          sourceScale,
+        )
+        .bind(view)
+      view.ellipsize =
+        if (textStyle.optString("truncate") == "clip") null else TextUtils.TruncateAt.END
+    }
+    orientation = VERTICAL
+    val hasFooterActions = (data.optJSONArray("footerActions")?.length() ?: 0) > 0
+    gravity =
+      when (style.optJSONObject("container")?.optString("contentVerticalAlignment")) {
+        "bottom" -> Gravity.BOTTOM
+        "top" -> Gravity.TOP
+        "center" -> Gravity.CENTER_VERTICAL
+        // Legacy: the footer-action column is top/start aligned.
+        else -> if (hasFooterActions) Gravity.START else Gravity.CENTER_VERTICAL
+      }
+    content.gravity =
+      when (style.optJSONObject("container")?.optString("contentVerticalAlignment")) {
+        "bottom" -> Gravity.BOTTOM
+        "top" -> Gravity.TOP
+        else -> Gravity.CENTER_VERTICAL
+      }
+    val hp =
+      if (style.has("horizontalPadding")) stylePx(style.optDouble("horizontalPadding"))
+      else dp(if (layout == "table") 16 else 12)
+    val vp =
+      if (style.has("verticalPadding")) stylePx(style.optDouble("verticalPadding")) else dp(8)
+    setPadding(hp, vp, hp, vp)
+    val iw = if (image.has("width")) stylePx(image.optDouble("width")) else dp(40)
+    val ih = if (image.has("height")) stylePx(image.optDouble("height")) else dp(40)
+    val gap = if (style.has("leadingGap")) stylePx(style.optDouble("leadingGap")) else dp(12)
+    visual.layoutParams = LayoutParams(iw, ih).apply { marginEnd = gap }
+    visual.bind(
+      // Legacy: a missing visual still reserves an empty, transparent slot.
+      data.optJSONObject("leading") ?: JSONObject().put("backgroundColor", "#00000000"),
+      image,
+      item.key,
+      theme,
+      false,
+      sourceScale,
+      data.optJSONObject("secondaryLeading"),
+    )
+    bind(
+      title,
+      data.optString("title"),
+      "title",
+      16f,
+      "medium",
+      color("primaryText", "#000000DF"),
+      24,
+    )
+    bind(description, data.optString("description"), "description", 14f, line = 20, lines = 2)
+    val failed = data.optString("status") == "Failed"
+    bind(status, if (failed) "" else data.optString("status"), "status", 12f)
+    bind(
+      failure,
+      if (failed) "Failed" else "",
+      "status",
+      12f,
+      "medium",
+      color("negative", "#C40006D3"),
+    )
+    failure.background = fill(color("criticalBackground", "#F3000D14"), 4)
+    failure.setPadding(dp(8), dp(2), dp(8), dp(2))
+    (failure.layoutParams as LayoutParams).apply {
+      marginStart =
+        if (style.has("titleBadgeGap")) stylePx(style.optDouble("titleBadgeGap")) else 0
+    }
+    for (view in listOf(description, status)) (view.layoutParams as LayoutParams).apply {
+      topMargin = if (style.has("lineGap")) stylePx(style.optDouble("lineGap")) else 0
+    }
+    for ((index, slot) in listOf("primaryAmount", "secondaryAmount").withIndex()) {
+      val value = data.optString(slot)
+      bind(
+        values[index],
+        value,
+        slot,
+        if (index == 0) 16f else 14f,
+        if (index == 0) "medium" else "regular",
+        if (index == 0)
+          color(
+            if (value.startsWith("+")) "positive" else "primaryText",
+            if (value.startsWith("+")) "#00713FDE" else "#000000DF",
+          )
+        // Legacy: both amounts default to primaryText; only "+" amounts are positive.
+        else color("primaryText", "#000000DF"),
+        line = if (index == 0) 24 else 20,
+        align = "end",
+      )
+      values[index].layoutParams =
+        LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {
+          if (index > 0)
+            topMargin = if (style.has("trailingGap")) stylePx(style.optDouble("trailingGap")) else 0
+        }
+    }
+    val descriptors = data.optJSONArray("footerActions")
+    val count = minOf(3, descriptors?.length() ?: 0)
+    actions.visibility = if (count == 0) GONE else VISIBLE
+    actions.layoutParams =
+      LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {
+        marginStart = if (style.has("leadingGap") || image.has("width")) iw + gap else dp(52)
+        topMargin = if (style.has("lineGap")) stylePx(style.optDouble("lineGap")) else dp(8)
+        bottomMargin = dp(4)
+      }
+    for ((index, button) in buttons.withIndex()) {
+      button.visibility = if (index < count) VISIBLE else GONE
+      button.setOnClickListener(null)
+      if (index >= count) continue
+      val action = descriptors!!.getJSONObject(index)
+      NativeListResolvedText.resolve(
+          context,
+          action.optString("label"),
+          null,
+          // Legacy footer action: 14sp semibold on a 20dp line.
+          14f,
+          "semibold",
+          color(
+            if (action.optString("tone") == "danger") "negative" else "primaryText",
+            if (action.optString("tone") == "danger") "#C40006D3" else "#000000DF",
+          ),
+          20,
+          1,
+          sourceScale,
+        )
+        .bind(button)
+      button.background = fill(color("strongBackground", "#0000000F"), 8)
+      button.setPadding(dp(8), dp(4), dp(8), dp(4))
+      button.isEnabled = !data.optBoolean("disabled") && !action.optBoolean("disabled")
+      button.layoutParams =
+        LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply {
+          marginEnd = dp(8)
+        }
+      button.setOnClickListener {
+        emitAction(action.optString("key"), button, "footerAction", index)
+      }
+    }
+  }
+
+  override fun recycleContent() {
+    visual.recycle()
+    buttons.forEach { it.setOnClickListener(null) }
+  }
+
+  override fun disposeContent() {
+    visual.dispose()
+    buttons.forEach { it.setOnClickListener(null) }
+  }
+}

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

@@ -13,6 +13,9 @@ import java.util.WeakHashMap
 import kotlin.math.ceil
 import kotlin.math.roundToInt
 
+internal class NativeListViewHolder(val rowView: NativeListRowHost) :
+  androidx.recyclerview.widget.RecyclerView.ViewHolder(rowView)
+
 internal class NativeListAdapter(
   private val context: ThemedReactContext,
 ) : RecyclerView.Adapter<NativeListViewHolder>() {
@@ -44,7 +47,7 @@ internal class NativeListAdapter(
   private var marketSourceItems: List<NativeListItem>? = null
   private var marketSourceEdges = DoubleArray(0)
   private val createdRows = Collections.newSetFromMap(
-    WeakHashMap<NativeListRowView, Boolean>(),
+    WeakHashMap<NativeListRowHost, Boolean>(),
   )
   var usesSelectorSourceScale = false
   var theme: JSONObject? = null
@@ -52,18 +55,28 @@ internal class NativeListAdapter(
       if (field?.toString() != value?.toString()) needsThemeRebind = true
       field = value
     }
+  // Reuses the theme rebind path: chrome lives outside the row payload, so a
+  // changed list style would otherwise not reach rows DiffUtil considers equal.
+  var listStyle: JSONObject? = null
+    set(value) {
+      if (field?.toString() != value?.toString()) needsThemeRebind = true
+      field = value
+    }
   var layout: String = "linear"
   var orientation: String = "vertical"
   var selectedKeys: Set<String> = emptySet()
   var checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String = { _, _, fallback -> fallback }
   var onRowPress: ((NativeListItem, NativeListActionOrigin) -> Unit)? = null
   var onAction: ((NativeListItem, String, NativeSelectionTarget?, NativeListActionOrigin?) -> Unit)? = null
-  var onBindingInvalidated: ((NativeListRowView, Long) -> Unit)? = null
+  var onBindingInvalidated: ((NativeListRowHost, Long) -> Unit)? = null
 
   override fun getItemCount(): Int = reorderItems?.size ?: differ.currentList.size
 
+  override fun getItemViewType(position: Int): Int =
+    requireNotNull(itemAt(position)).rendererKey.ordinal
+
   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NativeListViewHolder {
-    val view = NativeListRowView(context)
+    val view = NativeListRendererRegistry.create(context, viewType)
     view.layoutParams = ViewGroup.LayoutParams(
       ViewGroup.LayoutParams.MATCH_PARENT,
       ViewGroup.LayoutParams.WRAP_CONTENT,
@@ -79,6 +92,7 @@ internal class NativeListAdapter(
 
   override fun onBindViewHolder(holder: NativeListViewHolder, position: Int) {
     val item = itemAt(position) ?: return
+    holder.rowView.listStyle = listStyle
     holder.rowView.bind(
       item,
       theme,
@@ -135,7 +149,7 @@ internal class NativeListAdapter(
       items.forEachIndexed { index, item ->
         val style = item.json.optJSONObject("style")
         val height = item.json.optDouble("height", 0.0)
-        val sourceHeight = if (item.type == "market" && style != null) {
+        val sourceHeight = item.styledHeight ?: if (item.type == "market" && style != null) {
           val titleHeight = ceil((style.optJSONObject("title")?.optDouble("lineHeight", 24.0) ?: 24.0) * density) / density
           val subtitleHeight = if (item.json.optString("subtitle").isNotEmpty() || item.json.optJSONObject("subtitlePrefix") != null) {
             ceil((style.optJSONObject("subtitle")?.optDouble("lineHeight", 20.0) ?: 20.0) * density) / density + style.optDouble("lineGap", 0.0)
@@ -201,14 +215,14 @@ internal class NativeListAdapter(
     marketSourceEdges = DoubleArray(0)
     reorderItems = null
     suppressDifferUpdates = false
-    createdRows.forEach(NativeListRowView::dispose)
+    createdRows.forEach(NativeListRowHost::dispose)
     createdRows.clear()
   }
 
   companion object {
     private val DIFF = object : DiffUtil.ItemCallback<NativeListItem>() {
       override fun areItemsTheSame(oldItem: NativeListItem, newItem: NativeListItem): Boolean =
-        oldItem.key == newItem.key && oldItem.type == newItem.type
+        oldItem.key == newItem.key
 
       override fun areContentsTheSame(oldItem: NativeListItem, newItem: NativeListItem): Boolean =
         oldItem.revision == newItem.revision && oldItem.content == newItem.content