@onekeyfe/react-native-native-list 3.0.116 → 3.0.117

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

@@ -1367,6 +1367,8 @@ internal class NativeListRowView(
     leadingActionIcon.iconName = ""
     leadingActionIcon.glyphSizeDp = 24
     leadingActionIcon.setOnClickListener(null)
+    leadingActionIcon.setTag(com.facebook.react.R.id.react_test_id, null)
+    leadingActionIcon.contentDescription = null
     mainColumn.visibility = VISIBLE
     dataContainer.visibility = GONE
     dataColumns.forEach { it.visibility = GONE }
@@ -2106,6 +2108,33 @@ internal class NativeListRowView(
       ?: if (variant == "perp") 8 else 14
     setPadding(dp(horizontalPadding), dp(verticalPadding), dp(horizontalPadding), dp(verticalPadding))
 
+    item.json.optJSONObject("leadingAction")?.let { action ->
+      leadingActionIcon.visibility = VISIBLE
+      leadingActionIcon.iconName = action.optString("name")
+      leadingActionIcon.glyphSizeDp = 24
+      leadingActionIcon.tintColor = safeColor(
+        action.optString("tintColor"),
+        color(theme, "icon", "#0000009B"),
+      )
+      leadingActionIcon.isEnabled = !action.optBoolean("disabled", false)
+      leadingActionIcon.alpha = if (leadingActionIcon.isEnabled) 1f else 0.4f
+      leadingActionIcon.setTag(
+        com.facebook.react.R.id.react_test_id,
+        action.optString("testID").takeIf(String::isNotEmpty),
+      )
+      leadingActionIcon.contentDescription = action.optString("accessibilityLabel")
+      leadingActionIcon.setOnClickListener {
+        emitAction(
+          item,
+          action.optString("actionKey"),
+          null,
+          leadingActionIcon,
+          "leadingAction",
+        )
+      }
+      addView(leadingActionIcon, LayoutParams(dp(36), dp(36)).apply { marginEnd = dp(5) })
+    }
+
     val leading = JSONObject(item.json.getJSONObject("leading").toString())
     imageStyle?.optString("shape")?.takeIf(String::isNotEmpty)?.let { leading.put("shape", it) }
     imageStyle?.optString("contentFit")?.takeIf(String::isNotEmpty)?.let { contentFit ->

package/ios/NativeListCell.swift

@@ -1276,6 +1276,8 @@ final class NativeListCell: UICollectionViewCell {
     leadingActionButton.isHidden = true
     leadingActionButton.setImage(nil, for: .normal)
     leadingActionButton.setImage(nil, for: .disabled)
+    leadingActionButton.accessibilityIdentifier = nil
+    leadingActionButton.accessibilityLabel = nil
     unreadDot.isHidden = true
     mediaBadgeLabel.isHidden = true
     mediaBadgeLabel.text = nil
@@ -2312,6 +2314,28 @@ final class NativeListCell: UICollectionViewCell {
     rootTopConstraint.constant = verticalPadding
     rootBottomConstraint.constant = -verticalPadding
     rootStack.spacing = CGFloat(style?.double("leadingGap", default: variant == "perp" ? 8 : 14) ?? (variant == "perp" ? 8 : 14))
+    if let leadingAction = item.data.dictionary("leadingAction") {
+      leadingActionButton.isHidden = false
+      let tintColor = UIColor(
+        nativeListHex: leadingAction.string("tintColor", default: "#646464"),
+        fallback: .darkGray
+      )
+      leadingActionButton.tintColor = tintColor
+      if let image = nativeListIcon(named: leadingAction.string("name")) {
+        leadingActionButton.setImage(image, for: .normal)
+        leadingActionButton.setImage(
+          image.withTintColor(tintColor, renderingMode: .alwaysOriginal),
+          for: .disabled
+        )
+      }
+      leadingActionButton.isEnabled = !leadingAction.bool("disabled")
+      leadingActionButton.alpha = leadingActionButton.isEnabled ? 1 : 0.4
+      leadingActionButton.accessibilityIdentifier = leadingAction["testID"] as? String
+      leadingActionButton.accessibilityLabel = leadingAction["accessibilityLabel"] as? String
+      leadingActionKey = leadingAction.string("actionKey")
+      rootStack.addArrangedSubview(leadingActionButton)
+      rootStack.setCustomSpacing(5, after: leadingActionButton)
+    }
     leadingWidth.constant = imageWidth
     leadingHeight.constant = imageHeight
     if let visual = marketLeading(item, style: style) {

package/lib/module/validation.js

@@ -124,6 +124,13 @@ function assertMarketRow(row, path) {
   }
   assertText(row.price, `${path}.price`);
   assertText(row.change.text, `${path}.change.text`);
+  assertTrailingAccessories(row.leadingAction ? [row.leadingAction] : undefined, `${path}.leadingAction`);
+  if (row.leadingAction) {
+    assertText(row.leadingAction.name, `${path}.leadingAction.name`);
+    if (row.leadingAction.actionKey !== undefined) {
+      assertKey(row.leadingAction.actionKey, `${path}.leadingAction.actionKey`);
+    }
+  }
   assertLeadingVisual(row.leading, `${path}.leading`);
   const assertSegments = (segments, segmentPath) => {
     segments?.forEach((segment, index) => {

package/lib/module/web/NativeListWebEngine.js

@@ -1747,6 +1747,17 @@ function createMarketRow(context, row) {
   const layoutStyle = resolveWebMarketLayoutStyle(row);
   body.style.padding = String(layoutStyle.verticalPadding) + 'px ' + String(layoutStyle.horizontalPadding) + 'px';
   body.style.gap = '0px';
+  if (row.leadingAction) {
+    const action = createIconAction(context, row.leadingAction.name, row.leadingAction.actionKey, row.leadingAction.disabled, row.leadingAction.tintColor);
+    action.style.flex = '0 0 36px';
+    action.style.width = '36px';
+    action.style.height = '36px';
+    action.style.marginRight = '5px';
+    setData(action, 'testid', row.leadingAction.testID);
+    if (row.leadingAction.accessibilityLabel) action.setAttribute('aria-label', row.leadingAction.accessibilityLabel);
+    markActionAnchorSource(action, 'leadingAction');
+    body.appendChild(action);
+  }
   const visual = createVisual(context, row.leading);
   if (visual) {
     const width = layoutStyle.imageWidth;

package/lib/typescript/src/models.d.ts

@@ -329,6 +329,9 @@ export type DataRow = RowBase & Readonly<{
 export type MarketRow = RowBase & Readonly<{
     type: 'market';
     variant: 'token' | 'stock' | 'perp';
+    leadingAction?: Extract<TrailingAccessory, {
+        kind: 'icon';
+    }>;
     leading: LeadingVisual;
     title: string;
     subtitle?: string;
@@ -545,7 +548,7 @@ export type RowPatch = Readonly<{
 }> | Readonly<{
     type: 'market';
     key: string;
-    changes: Partial<Pick<MarketRow, CommonPatchFields | 'leading' | 'title' | 'subtitle' | 'subtitleSegments' | 'price' | 'priceSegments' | 'change' | 'badges' | 'pressActionKey' | 'pressInActionKey' | 'longPressActionKey' | 'diagnostics' | 'style'>>;
+    changes: Partial<Pick<MarketRow, CommonPatchFields | 'leadingAction' | 'leading' | 'title' | 'subtitle' | 'subtitleSegments' | 'price' | 'priceSegments' | 'change' | 'badges' | 'pressActionKey' | 'pressInActionKey' | 'longPressActionKey' | 'diagnostics' | 'style'>>;
 }> | Readonly<{
     type: 'mediaTile';
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.116",
+  "version": "3.0.117",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -83,8 +83,8 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.116",
-    "@onekeyfe/react-native-native-logger": "3.0.116",
+    "@onekeyfe/react-native-image": "3.0.117",
+    "@onekeyfe/react-native-native-logger": "3.0.117",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/models.ts

@@ -346,6 +346,7 @@ export type MarketRow = RowBase &
   Readonly<{
     type: 'market';
     variant: 'token' | 'stock' | 'perp';
+    leadingAction?: Extract<TrailingAccessory, { kind: 'icon' }>;
     leading: LeadingVisual;
     title: string;
     subtitle?: string;
@@ -667,6 +668,7 @@ export type RowPatch =
         Pick<
           MarketRow,
           | CommonPatchFields
+          | 'leadingAction'
           | 'leading'
           | 'title'
           | 'subtitle'

package/src/validation.ts

@@ -242,6 +242,16 @@ function assertMarketRow(row: MarketRow, path: string): void {
   }
   assertText(row.price, `${path}.price`);
   assertText(row.change.text, `${path}.change.text`);
+  assertTrailingAccessories(
+    row.leadingAction ? [row.leadingAction] : undefined,
+    `${path}.leadingAction`
+  );
+  if (row.leadingAction) {
+    assertText(row.leadingAction.name, `${path}.leadingAction.name`);
+    if (row.leadingAction.actionKey !== undefined) {
+      assertKey(row.leadingAction.actionKey, `${path}.leadingAction.actionKey`);
+    }
+  }
   assertLeadingVisual(row.leading, `${path}.leading`);
   const assertSegments = (
     segments: MarketRow['priceSegments'],

package/src/web/NativeListWebEngine.ts

@@ -3123,6 +3123,24 @@ function createMarketRow(context: RenderContext, row: MarketRow): HTMLElement {
     String(layoutStyle.horizontalPadding) +
     'px';
   body.style.gap = '0px';
+  if (row.leadingAction) {
+    const action = createIconAction(
+      context,
+      row.leadingAction.name,
+      row.leadingAction.actionKey,
+      row.leadingAction.disabled,
+      row.leadingAction.tintColor
+    );
+    action.style.flex = '0 0 36px';
+    action.style.width = '36px';
+    action.style.height = '36px';
+    action.style.marginRight = '5px';
+    setData(action, 'testid', row.leadingAction.testID);
+    if (row.leadingAction.accessibilityLabel)
+      action.setAttribute('aria-label', row.leadingAction.accessibilityLabel);
+    markActionAnchorSource(action, 'leadingAction');
+    body.appendChild(action);
+  }
   const visual = createVisual(context, row.leading);
   if (visual) {
     const width = layoutStyle.imageWidth;