@onekeyfe/react-native-native-list 6.7.0-alpha.375 → 6.7.0-alpha.382

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

@@ -28,11 +28,19 @@ class HybridNativeList(context: ThemedReactContext) : HybridNativeListSpec() {
     set(value) {
       if (field == value) return
       field = value
-      dispatchToUi { hostView.setContainerSlotHeightsJson(value) }
+      slotHeightsChanged = true
+    }
+
+  override var sidecarLayoutJson: String = ""
+    set(value) {
+      if (field == value) return
+      field = value
+      dispatchToUi { hostView.setSidecarLayoutJson(value) }
     }
 
   private var fontsChanged = false
   private var snapshotChanged = false
+  private var slotHeightsChanged = false
 
   override var fontFamiliesJson: String = "{}"
     set(value) {
@@ -44,11 +52,14 @@ class HybridNativeList(context: ThemedReactContext) : HybridNativeListSpec() {
   override fun afterUpdate() {
     super.afterUpdate()
     val fonts = if (fontsChanged) fontFamiliesJson else null
+    val slotHeights = if (slotHeightsChanged) containerSlotHeightsJson else null
     val snapshot = if (snapshotChanged) snapshotJson else null
     fontsChanged = false
+    slotHeightsChanged = false
     snapshotChanged = false
     dispatchToUi {
       fonts?.let { hostView.setFontFamiliesJson(it) }
+      slotHeights?.let { hostView.setContainerSlotHeightsJson(it, snapshot) }
       snapshot?.let { hostView.applySnapshot(it) }
     }
   }
@@ -90,6 +101,8 @@ class HybridNativeList(context: ThemedReactContext) : HybridNativeListSpec() {
     set(value) { field = value; hostView.onEndReached = value }
   override var onVisibleRangeChanged: ((payloadJson: String) -> Unit)? = null
     set(value) { field = value; hostView.onVisibleRangeChanged = value }
+  override var onStructuralTransitionSettled: ((payloadJson: String) -> Unit)? = null
+    set(value) { field = value; hostView.onStructuralTransitionSettled = value }
 
   override fun applySnapshot(snapshotJson: String) {
     dispatchToUi { hostView.applySnapshot(snapshotJson) }

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

@@ -8,11 +8,14 @@ import android.graphics.drawable.StateListDrawable
 import android.text.Spannable
 import android.text.SpannableStringBuilder
 import android.text.TextUtils
+import android.text.TextPaint
 import android.text.style.AbsoluteSizeSpan
 import android.text.style.ForegroundColorSpan
+import android.text.style.MetricAffectingSpan
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.View
+import android.view.MotionEvent
 import android.widget.LinearLayout
 import android.widget.ProgressBar
 import android.widget.TextView
@@ -29,11 +32,14 @@ import org.json.JSONObject
 // Bounded controls only. Event ownership and epochs stay with the row host.
 internal class NativeListAccessoryStack(context: android.content.Context, val fonts: NativeListFonts) : LinearLayout(context) {
   private val trailingViews = List(2) { NativeListTextView(context) }
+  private val buttonDownEpochs = IntArray(2) { -1 }
+  private var bindingEpoch = 0
   private val trailingIcons = List(2) { OneKeyIconView(context) }
   private val checkbox = OneKeyCheckboxView(context)
   private val spinner = ProgressBar(context)
   private var boundCheckboxData: JSONObject? = null
   private val semanticValueViews = mutableListOf<TextView>()
+  private val segmentedValuePairs = mutableMapOf<TextView, JSONObject>()
   private var selectorUsesSourceScale = false
   private var checkboxUsesSelectorStyle = false
   private var checkboxCheckedColor = Color.BLACK
@@ -66,6 +72,19 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
         info.viewIdResourceName = host.getTag(com.facebook.react.R.id.react_test_id) as? String
       }
     }
+  private val buttonAccessibilityDelegate =
+    object : View.AccessibilityDelegate() {
+      override fun onInitializeAccessibilityNodeInfo(
+        host: View,
+        info: android.view.accessibility.AccessibilityNodeInfo,
+      ) {
+        super.onInitializeAccessibilityNodeInfo(host, info)
+        info.className = android.widget.Button::class.java.name
+        info.isEnabled = host.isEnabled
+        info.isClickable = host.isEnabled && host.isClickable
+        info.viewIdResourceName = host.getTag(com.facebook.react.R.id.react_test_id) as? String
+      }
+    }
 
   private val trailingPaintFlags = trailingViews.map { it.paintFlags }
 
@@ -130,7 +149,12 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
       (checkbox.layoutParams as LayoutParams).marginStart = dp(12)
     for ((index, key) in listOf("value", "valueSecondary").withIndex()) {
       style.optJSONObject(key)?.let { value ->
-        semanticValueViews.getOrNull(index)?.let { applyStyledText(it, value) }
+        semanticValueViews.getOrNull(index)?.let { view ->
+          applyStyledText(view, value)
+          if (value.has("fontSize")) segmentedValuePairs[view]?.let { accessory ->
+            restorePairSubscriptSizes(view, accessory, value.optDouble("fontSize").toFloat())
+          }
+        }
       }
     }
     if (style.has("trailingGap")) {
@@ -146,6 +170,13 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
         }
       }
     }
+    val pairedChevron = horizontal && (kinds == listOf("valuePair", "chevron") ||
+      (kinds == listOf("icon", "chevron") &&
+        descriptors.getJSONObject(0).optString("name") == "RefreshCcwOutline" &&
+        descriptors.getJSONObject(0).optString("actionKey").isEmpty()))
+    if (pairedChevron) {
+      (trailingIcons[1].layoutParams as LayoutParams).marginEnd = 0
+    }
     visibility =
       if ((0 until childCount).any { getChildAt(it).visibility != GONE }) VISIBLE else GONE
   }
@@ -167,37 +198,53 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
 
   fun anchorInset(view: View): Int =
     if (
-      (tag as? NativeListItem)?.json?.optString("presentation") == "accountSelector" &&
-        view in trailingIcons &&
-        (view.layoutParams as MarginLayoutParams).marginStart < 0
+      view in trailingIcons &&
+        (view.layoutParams as MarginLayoutParams).marginStart < 0 &&
+        ((tag as? NativeListItem)?.json?.optString("presentation") == "accountSelector" ||
+          (tag as? NativeListItem)?.json?.optJSONArray("trailing")?.let { trailing ->
+            (0 until trailing.length()).any { index ->
+              trailing.optJSONObject(index)?.optString("buttonStyle") == "tertiary"
+            }
+          } == true)
     )
       dp(7)
     else 0
 
   fun reset() {
+    bindingEpoch += 1
     tag = null
     endInset = null
     requestsUnclippedHost = false
     clipChildren = true
     clipToPadding = true
     semanticValueViews.clear()
+    segmentedValuePairs.clear()
     boundCheckboxData = null
     trailingViews.forEachIndexed { index, v ->
+      buttonDownEpochs[index] = -1
       v.paintFlags = trailingPaintFlags[index]
       v.visibility = GONE
       v.text = ""
       v.layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
       v.setOnClickListener(null)
-      // setOnClickListener(null) leaves the view clickable, and a clickable
-      // child consumes the touch, so a tap on a row value such as a network
-      // balance never reached the row click (OK-65494). showTrailing enables
-      // the click again only for a text accessory that carries an action.
+      // A clickable value consumes the row press; reset it until an action binds.
+      v.setOnTouchListener(null)
+      v.isPressed = false
       v.isClickable = false
+      v.isEnabled = true
+      v.alpha = 1f
+      v.contentDescription = null
+      v.setTag(com.facebook.react.R.id.react_test_id, null)
+      v.accessibilityDelegate = null
       v.background = null
       v.setPadding(0, 0, 0, 0)
       // Legacy trailing text: END gravity, one line, no ellipsis.
       v.gravity = Gravity.END
       v.opticalOffsetY = 0f
+      v.helpBindingGeneration += 1
+      v.guardsHelpTouches = false
+      v.primaryHelpOnly = false
+      v.showsHelpUnderline = false
       v.maxLines = 1
       v.setHorizontallyScrolling(false)
       v.ellipsize = null
@@ -257,6 +304,83 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
     for (index in 0 until minOf(2, accessories.length())) {
       val accessory = accessories.getJSONObject(index)
       when (accessory.optString("kind")) {
+        "button" -> {
+          if (textIndex !in trailingViews.indices) continue
+          val view = trailingViews[textIndex]
+          val buttonIndex = textIndex
+          val epoch = bindingEpoch
+          val disabled =
+            item.json.optBoolean("disabled", false) || accessory.optBoolean("disabled", false)
+          showTrailing(textIndex, accessory.optString("label"), false)
+          view.typeface = fonts.medium(context)
+          view.gravity = Gravity.CENTER
+          view.setTextColor(
+            safeColor(
+              accessory.optString("textColor").takeIf(String::isNotEmpty),
+              color(theme, "primaryText", "#000000DF"),
+            )
+          )
+          view.layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, dp(30))
+          view.setPadding(dp(11), dp(4), dp(11), dp(4))
+          view.background =
+            StateListDrawable().apply {
+              fun fill(value: Int) =
+                GradientDrawable().apply {
+                  setColor(value)
+                  cornerRadius = dp(15).toFloat()
+                  setStroke(dp(1), Color.TRANSPARENT)
+                }
+              addState(
+                intArrayOf(android.R.attr.state_pressed),
+                fill(safeColor(accessory.optString("pressedBackgroundColor").takeIf(String::isNotEmpty),
+                  color(theme, "rowPressedBackground", "#00000017"))),
+              )
+              addState(
+                intArrayOf(),
+                fill(safeColor(accessory.optString("backgroundColor").takeIf(String::isNotEmpty),
+                  color(theme, "strongBackground", "#0000000F"))),
+              )
+            }
+          view.setTag(
+            com.facebook.react.R.id.react_test_id,
+            accessory.optString("testID").takeIf(String::isNotEmpty),
+          )
+          view.accessibilityDelegate = buttonAccessibilityDelegate
+          view.contentDescription =
+            accessory.optString("accessibilityLabel").ifEmpty { accessory.optString("label") }
+          view.isEnabled = !disabled
+          view.alpha = if (disabled) 0.4f else 1f
+          view.isClickable = true
+          view.setOnTouchListener { _, event ->
+            when (event.actionMasked) {
+              MotionEvent.ACTION_DOWN -> {
+                buttonDownEpochs[buttonIndex] = epoch
+                false
+              }
+              MotionEvent.ACTION_UP -> {
+                if (buttonDownEpochs[buttonIndex] != bindingEpoch) {
+                  view.isPressed = false
+                  true
+                } else false
+              }
+              MotionEvent.ACTION_CANCEL -> {
+                buttonDownEpochs[buttonIndex] = -1
+                false
+              }
+              else -> false
+            }
+          }
+          view.setOnClickListener {
+            if (epoch != bindingEpoch) return@setOnClickListener
+            (tag as? NativeListItem)?.takeUnless { it.json.optBoolean("disabled", false) }
+              ?.takeUnless { accessory.optBoolean("disabled", false) }
+              ?.let {
+                emitAction(it, accessory.optString("actionKey"), null, view,
+                  "trailingAccessory", index)
+              }
+          }
+          textIndex++
+        }
         "value" -> {
           showTrailing(
             textIndex,
@@ -269,6 +393,21 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
         }
         "valuePair" -> {
           showTrailingValuePair(textIndex, accessory, theme)
+          accessory.optJSONObject("primaryHelp")?.let { help ->
+            val view = trailingViews[textIndex]
+            val epoch = bindingEpoch
+            view.primaryHelpOnly = true
+            view.guardsHelpTouches = true
+            view.showsHelpUnderline = help.optString("underline") == "dashed"
+            if (help.optString("presentation") == "popover") {
+              view.setOnClickListener {
+                if (epoch == bindingEpoch && !item.json.optBoolean("disabled")) {
+                  emitAction(item, help.optString("actionKey"), null, view, "trailingAccessory", index)
+                }
+              }
+            }
+          }
+          segmentedValuePairs[trailingViews[textIndex]] = accessory
           semanticValueViews.add(trailingViews[textIndex++])
         }
         "checkbox" -> bindCheckbox(item, accessory, checkboxState)
@@ -428,8 +567,10 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
 
   private fun showTrailingValuePair(index: Int, accessory: JSONObject, theme: JSONObject?) {
     if (index !in trailingViews.indices) return
-    val primary = accessory.optString("primary")
-    val secondary = accessory.optString("secondary")
+    val primarySegments = accessory.optJSONArray("primaryTextSegments")
+    val secondarySegments = accessory.optJSONArray("secondaryTextSegments")
+    val primary = segmentTextOrFallback(primarySegments, accessory.optString("primary"))
+    val secondary = segmentTextOrFallback(secondarySegments, accessory.optString("secondary"))
     if (primary.isEmpty() && secondary.isEmpty()) return
     val value = SpannableStringBuilder()
     val primaryStart = value.length
@@ -449,6 +590,15 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
       value.length,
       Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
     )
+    if (primary.isNotEmpty() && accessory.optString("primaryFontWeight") == "medium") {
+      value.setSpan(
+        ValuePairTypefaceSpan(fonts.medium(context)),
+        primaryStart,
+        value.length,
+        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
+      )
+    }
+    applyPairSubscriptSizes(value, primarySegments, primaryStart, 16f)
     if (primary.isNotEmpty() && secondary.isNotEmpty()) value.append('\n')
     val secondaryStart = value.length
     value.append(secondary)
@@ -469,6 +619,7 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
       value.length,
       Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
     )
+    applyPairSubscriptSizes(value, secondarySegments, secondaryStart, 14f)
     val view = trailingViews[index]
     view.text = value
     view.maxLines = 2
@@ -480,6 +631,48 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
     view.visibility = VISIBLE
   }
 
+  private fun segmentTextOrFallback(segments: JSONArray?, fallback: String): String {
+    if (segments == null || segments.length() == 0) return fallback
+    return buildString {
+      for (index in 0 until segments.length()) append(segments.getJSONObject(index).optString("text"))
+    }
+  }
+
+  private fun applyPairSubscriptSizes(
+    value: SpannableStringBuilder,
+    segments: JSONArray?,
+    start: Int,
+    baseSize: Float,
+  ) {
+    if (segments == null) return
+    var offset = start
+    for (index in 0 until segments.length()) {
+      val segment = segments.getJSONObject(index)
+      val end = offset + segment.optString("text").length
+      if (end > offset && segment.optString("style") == "subscript")
+        value.setSpan(
+          AbsoluteSizeSpan(sp(kotlin.math.ceil(baseSize * 0.6).toFloat()).roundToInt(), true),
+          offset,
+          end,
+          Spannable.SPAN_EXCLUSIVE_EXCLUSIVE,
+        )
+      offset = end
+    }
+  }
+
+  private fun restorePairSubscriptSizes(view: TextView, accessory: JSONObject, baseSize: Float) {
+    val primary = accessory.optJSONArray("primaryTextSegments")
+    val secondary = accessory.optJSONArray("secondaryTextSegments")
+    if ((primary?.length() ?: 0) == 0 && (secondary?.length() ?: 0) == 0) return
+    val value = SpannableStringBuilder(view.text)
+    applyPairSubscriptSizes(value, primary, 0, baseSize)
+    val primaryText = segmentTextOrFallback(primary, accessory.optString("primary"))
+    val secondaryStart = primaryText.length + if (primaryText.isNotEmpty() &&
+      segmentTextOrFallback(secondary, accessory.optString("secondary")).isNotEmpty()) 1 else 0
+    applyPairSubscriptSizes(value, secondary, secondaryStart, baseSize)
+    view.text = value
+  }
+
   private fun showTrailingMenu(index: Int, actionKey: String) {
     showTrailing(index, "⋮", true, actionKey)
     if (index !in trailingViews.indices) return
@@ -519,7 +712,26 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
     )
     icon.accessibilityDelegate = selectorAccessibilityDelegate
     icon.contentDescription = data.optString("accessibilityLabel").takeIf { it.isNotEmpty() }
-    if (item.json.optString("presentation") == "accountSelector") {
+    if (data.optString("buttonStyle") == "tertiary") {
+      icon.glyphSizeDp = 24
+      icon.layoutParams = LayoutParams(dp(38), dp(38)).apply {
+        gravity = Gravity.CENTER_VERTICAL
+        marginStart = -dp(7)
+        marginEnd = -dp(7)
+      }
+      icon.background = StateListDrawable().apply {
+        addState(intArrayOf(android.R.attr.state_pressed),
+          roundedFill(color(theme, "rowPressedBackground", "#00000017"), 19f).apply {
+            setStroke(dp(1), Color.TRANSPARENT)
+          })
+        addState(intArrayOf(), roundedFill(Color.TRANSPARENT, 19f).apply {
+          setStroke(dp(1), Color.TRANSPARENT)
+        })
+      }
+      clipChildren = false
+      clipToPadding = false
+      requestsUnclippedHost = true
+    } else if (item.json.optString("presentation") == "accountSelector") {
       icon.glyphSizeDp = 24
       val isSourceMenu = item.hasExplicitHeight && icon.iconName == "DotHorOutline"
       val size = if (item.hasExplicitHeight && icon.iconName == "PlusSmallOutline") 36 else 38
@@ -545,6 +757,13 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
             addState(intArrayOf(), roundedFill(Color.TRANSPARENT, 19f))
           }
       }
+    } else if (icon.iconName == "RefreshCcwOutline" && data.optString("actionKey").isEmpty()) {
+      icon.glyphSizeDp = 16
+      icon.isClickable = false
+      icon.isFocusable = false
+      icon.layoutParams = LayoutParams(dp(16), dp(16)).apply {
+        gravity = Gravity.CENTER_VERTICAL
+      }
     } else if (icon.iconName == "ChevronRightSmallOutline") {
       icon.glyphSizeDp = null
       // ListItem.DrillIn is a 24dp icon with mx=-6, for a 12dp layout footprint.
@@ -716,3 +935,13 @@ internal class NativeListAccessoryStack(context: android.content.Context, val fo
       cornerRadius = scaledDp(radiusDp)
     }
 }
+
+private class ValuePairTypefaceSpan(private val face: Typeface) : MetricAffectingSpan() {
+  override fun updateDrawState(paint: TextPaint) {
+    paint.typeface = face
+  }
+
+  override fun updateMeasureState(paint: TextPaint) {
+    paint.typeface = face
+  }
+}

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

@@ -70,10 +70,13 @@ internal class NativeListActivityDetailsView(private val reactContext: ThemedRea
     val style = data.optJSONObject("style") ?: JSONObject()
     val image = style.optJSONObject("image") ?: JSONObject()
     val table = data.optString("presentation") == "table"
+    val hideLeading = data.optBoolean("hideLeading")
     val gap = if (style.has("leadingGap")) px(style.optDouble("leadingGap")) else dp(12)
     val iw = if (image.has("width")) px(image.optDouble("width")) else dp(40)
-    visual.layoutParams = LayoutParams(iw, if (image.has("height")) px(image.optDouble("height")) else dp(40)).apply { marginEnd = gap }
-    visual.bind(data.optJSONObject("leading") ?: JSONObject(), image, item.key, theme, false, sourceScale, data.optJSONObject("secondaryLeading"))
+    visual.layoutParams = LayoutParams(iw, if (image.has("height")) px(image.optDouble("height")) else dp(40)).apply { marginEnd = if (hideLeading) 0 else gap }
+    visual.visibility = if (hideLeading) GONE else VISIBLE
+    if (hideLeading) visual.recycle()
+    else visual.bind(data.optJSONObject("leading") ?: JSONObject(), image, item.key, theme, false, sourceScale, data.optJSONObject("secondaryLeading"))
     amounts.layoutParams = if (table) LayoutParams(0, -2, 1f).apply { marginStart = gap } else LayoutParams(-2, -2).apply { marginStart = gap }
     text(title, data.optString("title"), style.optJSONObject("title"), 16f, color("primary", theme), 24, "medium")
     text(description, data.optString("description"), style.optJSONObject("description"), 14f, color("secondary", theme), 20, lines = 2)
@@ -117,7 +120,7 @@ internal class NativeListActivityDetailsView(private val reactContext: ThemedRea
     actions.removeAllViews()
     val actionData = data.optJSONArray("footerActions")
     actions.visibility = if ((actionData?.length() ?: 0) == 0) GONE else VISIBLE
-    actions.layoutParams = LayoutParams(-1, -2).apply { marginStart = iw + gap; topMargin = dp(8) }
+    actions.layoutParams = LayoutParams(-1, -2).apply { marginStart = if (hideLeading) 0 else iw + gap; topMargin = dp(8) }
     for (index in 0 until (actionData?.length() ?: 0)) {
       val descriptor = actionData!!.getJSONObject(index)
       val button = NativeListTextView(context)
@@ -146,7 +149,7 @@ internal class NativeListActivityDetailsView(private val reactContext: ThemedRea
     }
     label.text = styled
   }
-  fun recycle() { visual.recycle(); amountViews.forEach { it.recycle() }; description.setOnClickListener(null); actions.removeAllViews() }
+  fun recycle() { visual.recycle(); visual.visibility = VISIBLE; amountViews.forEach { it.recycle() }; description.setOnClickListener(null); actions.removeAllViews() }
   fun dispose() { recycle(); visual.dispose(); amountViews.forEach { it.dispose() } }
 
   private inner class AmountView : LinearLayout(context) {

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

@@ -81,6 +81,7 @@ internal class NativeListActivityRowView(context: ThemedReactContext, fonts: Nat
     details.recycle()
     val style = data.optJSONObject("style") ?: JSONObject()
     val image = style.optJSONObject("image") ?: JSONObject()
+    val hideLeading = data.optBoolean("hideLeading")
     fun color(name: String, fallback: String) =
       parseNativeListColor(theme?.optString(name, fallback) ?: fallback)
     fun fill(value: Int, radius: Int) =
@@ -143,8 +144,10 @@ internal class NativeListActivityRowView(context: ThemedReactContext, fonts: Nat
     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(
+    visual.layoutParams = LayoutParams(iw, ih).apply { marginEnd = if (hideLeading) 0 else gap }
+    visual.visibility = if (hideLeading) GONE else VISIBLE
+    if (hideLeading) visual.recycle()
+    else visual.bind(
       // Legacy: a missing visual still reserves an empty, transparent slot.
       data.optJSONObject("leading") ?: JSONObject().put("backgroundColor", "#00000000"),
       image,
@@ -212,7 +215,7 @@ internal class NativeListActivityRowView(context: ThemedReactContext, fonts: Nat
     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)
+        marginStart = if (hideLeading) 0 else 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)
       }

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

@@ -0,0 +1,102 @@
+package com.margelo.nitro.nativelist
+
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.StateListDrawable
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import android.widget.ProgressBar
+import androidx.core.widget.TextViewCompat
+import com.facebook.react.uimanager.ThemedReactContext
+import org.json.JSONObject
+
+internal class NativeListButtonGroupRowView(context: ThemedReactContext, fonts: NativeListFonts) :
+  NativeListRendererRowView(context, fonts) {
+  private var generation = 0
+  private var rowOpacity = 1f
+
+  override fun appearance() {
+    super.appearance()
+    alpha = rowOpacity
+  }
+  override fun defaultHeight(item: NativeListItem, layout: String) = 64
+
+  override fun bindContent(
+    item: NativeListItem,
+    theme: JSONObject?,
+    layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String,
+  ) {
+    recycleContent()
+    rowOpacity = (item.json.optJSONObject("style")?.optJSONObject("container")?.optDouble("opacity", item.json.optDouble("opacity", 1.0)) ?: item.json.optDouble("opacity", 1.0)).toFloat()
+    orientation = HORIZONTAL
+    gravity = Gravity.CENTER_VERTICAL
+    setPadding(0, dp(8), 0, dp(8))
+    val info = parseNativeListColor(theme?.optString("info", "#0F69F6") ?: "#0F69F6")
+    val descriptors = item.json.optJSONArray("buttons") ?: return
+    val epoch = generation
+    for (index in 0 until descriptors.length()) {
+      val descriptor = descriptors.getJSONObject(index)
+      val enabled = !item.json.optBoolean("disabled") && !descriptor.optBoolean("disabled") && !descriptor.optBoolean("loading")
+      val button = FrameLayout(context).apply {
+        isEnabled = enabled
+        alpha = if (enabled) 1f else 0.4f
+        contentDescription = descriptor.optString("accessibilityLabel", descriptor.optString("label"))
+        setTag(com.facebook.react.R.id.react_test_id, descriptor.optString("testID").takeIf { it.isNotEmpty() })
+        background = StateListDrawable().apply {
+          fun fill(pressed: Boolean) = GradientDrawable().apply {
+            setColor(if (pressed) (info and 0x00FFFFFF) or (43 shl 24) else Color.TRANSPARENT)
+            cornerRadius = dp(12).toFloat()
+            setStroke(dp(1), (info and 0x00FFFFFF) or (89 shl 24))
+          }
+          addState(intArrayOf(android.R.attr.state_pressed), fill(true))
+          addState(intArrayOf(), fill(false))
+        }
+      }
+      val label = NativeListTextView(context).apply {
+        text = descriptor.optString("label")
+        textSize = NativeListScale.font(resources, 14f)
+        typeface = fonts.medium(context)
+        setTextColor(info)
+        gravity = Gravity.CENTER
+        includeFontPadding = false
+        maxLines = 1
+        ellipsize = android.text.TextUtils.TruncateAt.END
+        TextViewCompat.setLineHeight(this, dp(20))
+        importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
+      }
+      val content = LinearLayout(context).apply {
+        orientation = HORIZONTAL
+        gravity = Gravity.CENTER
+        setPadding(dp(8), dp(12), dp(8), dp(12))
+        importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
+      }
+      button.addView(content, FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+      if (descriptor.optBoolean("loading")) {
+        val spinner = ProgressBar(context, null, android.R.attr.progressBarStyleSmall).apply {
+          isIndeterminate = true
+          indeterminateTintList = ColorStateList.valueOf(info)
+          importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
+        }
+        content.addView(spinner, LayoutParams(dp(20), dp(20)).apply { marginEnd = dp(8) })
+      }
+      content.addView(label, LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT))
+      button.setOnClickListener {
+        if (generation == epoch && enabled) emitAction(descriptor.optString("actionKey"), button, "buttonGroup", index)
+      }
+      button.isClickable = enabled
+      addView(button, LayoutParams(0, dp(48), 1f).apply { if (index > 0) marginStart = dp(10) })
+    }
+  }
+
+  override fun recycleContent() {
+    generation += 1
+    for (index in 0 until childCount) getChildAt(index).setOnClickListener(null)
+    removeAllViews()
+  }
+
+  override fun disposeContent() = recycleContent()
+}

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

@@ -11,6 +11,15 @@ internal class NativeListContainerSlotAdapter : RecyclerView.Adapter<NativeListC
   private var content: View? = null
   private var height = 0
   private var enabled = true
+  private var boundHolder: Holder? = null
+  private var visualTranslationY = 0f
+
+  fun contentView(): View? = content
+
+  fun setVisualTranslationY(value: Float) {
+    visualTranslationY = value
+    boundHolder?.container?.translationY = value
+  }
 
   fun update(view: View?, heightPx: Int, visible: Boolean) {
     val previousCount = itemCount
@@ -39,6 +48,8 @@ internal class NativeListContainerSlotAdapter : RecyclerView.Adapter<NativeListC
   }
 
   override fun onBindViewHolder(holder: Holder, position: Int) {
+    boundHolder = holder
+    holder.container.translationY = visualTranslationY
     holder.container.layoutParams = RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height)
     holder.container.removeAllViews()
     content?.let { view ->
@@ -48,6 +59,7 @@ internal class NativeListContainerSlotAdapter : RecyclerView.Adapter<NativeListC
   }
 
   override fun onViewRecycled(holder: Holder) {
+    if (boundHolder === holder) boundHolder = null
     holder.container.removeAllViews()
   }
 }