@onekeyfe/react-native-native-list 3.0.112 → 3.0.113

package/ios/NativeListDesignAssets.swift

@@ -118,6 +118,7 @@ func nativeListIcon(named name: String) -> UIImage? {
   case "DragOutline": assetName = "onekey_drag"
   case "StarOutline": assetName = "onekey_star"
   case "StarSolid": assetName = "onekey_star_solid"
+  case "BadgeVerifiedSolid": assetName = "onekey_badge_verified_solid"
   case "ChevronGrabberVerOutline": assetName = "onekey_chevron_grabber_ver"
   case "ChevronBottomOutline": assetName = "onekey_chevron_bottom"
   case "ChevronTopOutline": assetName = "onekey_chevron_top"
@@ -131,3 +132,10 @@ func nativeListIcon(named name: String) -> UIImage? {
   return UIImage(named: assetName, in: NativeListResources.bundle, compatibleWith: nil)?
     .withRenderingMode(["GoogleIllus", "BotIllus", "AccountErrorCustom"].contains(name) ? .alwaysOriginal : .alwaysTemplate)
 }
+
+func nativeListIcon(named name: String, size: CGSize) -> UIImage? {
+  guard let image = nativeListIcon(named: name) else { return nil }
+  return UIGraphicsImageRenderer(size: size).image { _ in
+    image.draw(in: CGRect(origin: .zero, size: size))
+  }.withRenderingMode(.alwaysTemplate)
+}

package/ios/RNCNativeListView.swift

@@ -83,6 +83,10 @@ final class NativeListView: UIView {
     target: self,
     action: #selector(reorderLongPressChanged(_:))
   )
+  private lazy var marketLongPress = UILongPressGestureRecognizer(
+    target: self,
+    action: #selector(marketLongPressChanged(_:))
+  )
   // OneKey patch: claim only vertical drags so held rows and ancestor pagers stay responsive.
   private lazy var listBodyGestureGuard = UIPanGestureRecognizer(target: nil, action: nil)
   private var interactiveReorderSource: (key: String, index: Int)?
@@ -122,6 +126,10 @@ final class NativeListView: UIView {
     reorderLongPress.allowableMovement = ReorderAnimation.allowableMovement
     reorderLongPress.delegate = self
     collectionView.addGestureRecognizer(reorderLongPress)
+    marketLongPress.minimumPressDuration = 0.8
+    marketLongPress.allowableMovement = 10
+    marketLongPress.delegate = self
+    collectionView.addGestureRecognizer(marketLongPress)
     interactiveReorderPlaceholder.isHidden = true
     interactiveReorderPlaceholder.isUserInteractionEnabled = false
     interactiveReorderPlaceholder.layer.cornerRadius = ReorderAnimation.placeholderRadius
@@ -298,8 +306,13 @@ final class NativeListView: UIView {
     }
 
     var changedKeys: [String] = []
+    var marketQuoteKeys = Set<String>()
     var sizeChanged = false
+    let marketQuoteFields: Set<String> = [
+      "revision", "price", "priceSegments", "change", "accessibilityLabel",
+    ]
     for (index, changes) in pending {
+      let previous = current.items[index]
       var merged = current.items[index].data
       changes.forEach { key, value in
         if key != "key" && key != "type" { merged[key] = value }
@@ -307,14 +320,30 @@ final class NativeListView: UIView {
       guard let item = try? NativeListItem(data: merged) else { return }
       if rowHeight(current.items[index]) != rowHeight(item) { sizeChanged = true }
       current.items[index] = item
-      changedKeys.append(item.key)
+      if previous.type == "market", Set(changes.keys).isSubset(of: marketQuoteFields) {
+        marketQuoteKeys.insert(item.key)
+      } else {
+        changedKeys.append(item.key)
+      }
       if let selected = changes["selected"] as? Bool {
         if selected { current.selectedKeys.insert(item.key) } else { current.selectedKeys.remove(item.key) }
       }
     }
-    invalidateActionAnchor(reason: "snapshot")
+    if !changedKeys.isEmpty { invalidateActionAnchor(reason: "snapshot") }
     config = current
     itemsByKey = Dictionary(uniqueKeysWithValues: current.items.map { ($0.key, $0) })
+    for indexPath in collectionView.indexPathsForVisibleItems {
+      guard let item = current.items[safe: indexPath.item],
+            marketQuoteKeys.contains(item.key),
+            let cell = collectionView.cellForItem(at: indexPath) as? NativeListCell else { continue }
+      cell.updateMarketQuote(item, theme: current.theme)
+    }
+    if changedKeys.isEmpty {
+      configureFooter(current)
+      emitVisibleRangeIfNeeded()
+      checkEndReached()
+      return
+    }
     var snapshot = dataSource.snapshot()
     snapshot.reconfigureItems(changedKeys.filter { snapshot.indexOfItem($0) != nil })
     dataSource.apply(snapshot, animatingDifferences: false) { [weak self] in
@@ -985,7 +1014,9 @@ final class NativeListView: UIView {
       updateSelection(target: NativeSelectionTarget(scope: "row", key: item.key), sourceKey: item.key)
       return
     }
-    if item.type == "action" {
+    if item.type == "market", !item.data.string("pressActionKey").isEmpty {
+      emit(onRowAction, rowActionPayload(item: item, actionKey: item.data.string("pressActionKey"), origin: origin))
+    } else if item.type == "action" {
       emit(onRowAction, rowActionPayload(item: item, actionKey: item.data.string("actionKey"), origin: origin))
     } else if item.type == "system", item.data.string("variant") == "retry" {
       emit(onRowAction, rowActionPayload(item: item, actionKey: item.data.string("actionKey"), origin: origin))
@@ -994,6 +1025,19 @@ final class NativeListView: UIView {
     }
   }
 
+  @objc private func marketLongPressChanged(_ gesture: UILongPressGestureRecognizer) {
+    guard gesture.state == .began else { return }
+    let point = gesture.location(in: collectionView)
+    guard let indexPath = collectionView.indexPathForItem(at: point),
+          let item = config?.items[safe: indexPath.item],
+          item.type == "market",
+          !item.data.bool("disabled") else { return }
+    let actionKey = item.data.string("longPressActionKey")
+    guard !actionKey.isEmpty else { return }
+    let origin = (collectionView.cellForItem(at: indexPath) as? NativeListCell)?.rowActionOrigin()
+    handleAction(item: item, actionKey: actionKey, target: nil, origin: origin)
+  }
+
   private func handleAction(
     item: NativeListItem,
     actionKey: String,
@@ -1267,10 +1311,18 @@ final class NativeListView: UIView {
                 ? 56
                 : config?.layout == "linear" ? 30 : 36
     case "system":
-      switch item.data.string("variant") {
-      case "noMatch", "end": base = 36
-      case "retry": base = 44
-      default: base = 56
+      if item.data.string("variant") == "loading" && item.data.string("loadingStyle") == "skeleton" {
+        base = 56
+      } else if item.data.string("variant") == "loading" && item.data.string("loadingStyle") == "spinner" {
+        base = 52
+      } else if item.data.string("presentation") == "market" {
+        base = item.data.string("variant") == "loading" ? 68 : 44
+      } else {
+        switch item.data.string("variant") {
+        case "noMatch", "end": base = 36
+        case "retry": base = 44
+        default: base = 56
+        }
       }
     case "action":
       base = item.data.string("presentation") == "accountSelector"
@@ -1280,6 +1332,14 @@ final class NativeListView: UIView {
       base = item.data.dictionaries("columns").contains {
         !$0.string("secondaryText").isEmpty
       } ? 60 : 56
+    case "market":
+      let style = item.data.dictionary("style")
+      let imageHeight = CGFloat(style?.dictionary("image")?.double(
+        "height",
+        default: item.data.string("variant") == "stock" ? 40 : 32
+      ) ?? (item.data.string("variant") == "stock" ? 40 : 32))
+      let verticalPadding = CGFloat(style?.double("verticalPadding", default: 12) ?? 12)
+      base = max(item.data.string("variant") == "stock" ? 72 : 68, imageHeight + verticalPadding * 2)
     default:
       if item.type == "identity", !item.data.string("tertiary").isEmpty {
         base = 72
@@ -1490,6 +1550,16 @@ final class NativeListView: UIView {
   }
 
   override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
+    if gestureRecognizer === reorderLongPress || gestureRecognizer === marketLongPress {
+      let point = gestureRecognizer.location(in: collectionView)
+      guard let indexPath = collectionView.indexPathForItem(at: point),
+            let item = item(at: indexPath),
+            !item.data.bool("disabled") else { return false }
+      if gestureRecognizer === reorderLongPress {
+        return config?.reorderable == true && item.isReorderable
+      }
+      return item.type == "market" && !item.data.string("longPressActionKey").isEmpty
+    }
     guard gestureRecognizer === listBodyGestureGuard,
           let pan = gestureRecognizer as? UIPanGestureRecognizer else { return true }
     let velocity = pan.velocity(in: collectionView)
@@ -1608,6 +1678,14 @@ extension NativeListView: UICollectionViewDelegateFlowLayout {
     return !item.data.bool("disabled")
   }
 
+  func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
+    guard let item = config?.items[safe: indexPath.item], item.type == "market" else { return }
+    let actionKey = item.data.string("pressInActionKey")
+    guard !actionKey.isEmpty else { return }
+    let origin = (collectionView.cellForItem(at: indexPath) as? NativeListCell)?.rowActionOrigin()
+    handleAction(item: item, actionKey: actionKey, target: nil, origin: origin)
+  }
+
   func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
     guard let item = config?.items[safe: indexPath.item] else { return false }
     return !item.data.bool("disabled")

package/ios/Resources/NativeListIcons.xcassets/onekey_badge_verified_solid.imageset/Contents.json

@@ -0,0 +1 @@
+{"images":[{"filename":"icon.svg","idiom":"universal"}],"info":{"author":"xcode","version":1},"properties":{"preserves-vector-representation":true,"template-rendering-intent":"template"}}

package/ios/Resources/NativeListIcons.xcassets/onekey_badge_verified_solid.imageset/icon.svg

@@ -0,0 +1 @@
+<svg fill="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.483 11.458v3.5h-1v-3.5z M10.467 2.698a2.03 2.03 0 0 1 3.065 0l1.358 1.564a.03.03 0 0 0 .028.01l2.046-.325a2.03 2.03 0 0 1 2.347 1.971l.037 2.07q0 .016.014.026l1.776 1.066a2.03 2.03 0 0 1 .532 3.019l-1.304 1.609a.03.03 0 0 0-.005.03l.675 1.956a2.03 2.03 0 0 1-1.533 2.656l-2.033.394a.03.03 0 0 0-.023.019l-.741 1.933a2.03 2.03 0 0 1-2.88 1.05l-1.811-1.006a.03.03 0 0 0-.03 0l-1.811 1.005a2.03 2.03 0 0 1-2.88-1.049l-.742-1.933a.03.03 0 0 0-.023-.019l-2.033-.394a2.03 2.03 0 0 1-1.532-2.656l.675-1.957a.03.03 0 0 0-.005-.029l-1.304-1.61a2.03 2.03 0 0 1 .532-3.018l1.776-1.066a.03.03 0 0 0 .014-.026l.035-2.07a2.03 2.03 0 0 1 2.349-1.97l2.045.324a.03.03 0 0 0 .028-.01zm1.516 3.76a.5.5 0 0 0-.447.276l-1.861 3.724H8.483a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h6.692a2 2 0 0 0 1.981-1.73l.341-2.5a2 2 0 0 0-1.982-2.27h-1.939l.197-1.269a1.5 1.5 0 0 0-1.481-1.731z"/></svg>

package/lib/module/validation.js

@@ -10,6 +10,7 @@ const MAX_IMAGE_HEADERS = 32;
 const MAX_HEADER_LENGTH = 4096;
 const MAX_SPACER_HEIGHT = 512;
 const MAX_SECTION_INDEX_TITLE_LENGTH = 8;
+const MAX_MARKET_BADGES = 3;
 function fail(path, message) {
   throw new Error(`NativeList ${path}: ${message}`);
 }
@@ -62,6 +63,105 @@ function assertTextTone(tone, path) {
     fail(path, 'must be primary, secondary, positive, or negative');
   }
 }
+function assertBoundedStyleNumber(value, path, min, max) {
+  if (value !== undefined && (!Number.isFinite(value) || value < min || value > max)) {
+    fail(path, `must be within ${min}...${max}`);
+  }
+}
+function assertMarketTextStyle(style, path) {
+  if (!style) return;
+  assertBoundedStyleNumber(style.fontSize, `${path}.fontSize`, 8, 48);
+  assertBoundedStyleNumber(style.lineHeight, `${path}.lineHeight`, 8, 64);
+  if (style.fontWeight !== undefined && !['regular', 'medium', 'semibold', 'bold'].includes(style.fontWeight)) {
+    fail(`${path}.fontWeight`, 'must be regular, medium, semibold, or bold');
+  }
+  if (style.alignment !== undefined && !['start', 'center', 'end'].includes(style.alignment)) {
+    fail(`${path}.alignment`, 'must be start, center, or end');
+  }
+  if (style.lines !== undefined && ![1, 2].includes(style.lines)) {
+    fail(`${path}.lines`, 'must be 1 or 2');
+  }
+}
+function assertMarketStyle(style, path) {
+  if (!style) return;
+  for (const field of ['horizontalPadding', 'verticalPadding', 'leadingGap', 'titleBadgeGap', 'trailingGap']) {
+    assertBoundedStyleNumber(style[field], `${path}.${field}`, 0, 64);
+  }
+  assertBoundedStyleNumber(style.lineGap, `${path}.lineGap`, 0, 16);
+  assertBoundedStyleNumber(style.changeWidth, `${path}.changeWidth`, 1, 160);
+  assertBoundedStyleNumber(style.changeHeight, `${path}.changeHeight`, 1, 160);
+  assertBoundedStyleNumber(style.changeCornerRadius, `${path}.changeCornerRadius`, 0, 80);
+  if (style.image) {
+    assertBoundedStyleNumber(style.image.width, `${path}.image.width`, 1, 160);
+    assertBoundedStyleNumber(style.image.height, `${path}.image.height`, 1, 160);
+    assertBoundedStyleNumber(style.image.cornerRadius, `${path}.image.cornerRadius`, 0, 80);
+    assertVisualShape(style.image.shape, `${path}.image.shape`);
+    if (style.image.contentFit !== undefined && !['cover', 'contain', 'fill', 'center'].includes(style.image.contentFit)) {
+      fail(`${path}.image.contentFit`, 'must be cover, contain, fill, or center');
+    }
+  }
+  assertMarketTextStyle(style.title, `${path}.title`);
+  assertMarketTextStyle(style.subtitle, `${path}.subtitle`);
+  assertMarketTextStyle(style.price, `${path}.price`);
+  assertMarketTextStyle(style.change, `${path}.change`);
+}
+function assertMarketRow(row, path) {
+  if (!['token', 'stock', 'perp'].includes(row.variant)) {
+    fail(`${path}.variant`, 'must be token, stock, or perp');
+  }
+  assertText(row.title, `${path}.title`);
+  assertText(row.subtitle, `${path}.subtitle`);
+  assertText(row.price, `${path}.price`);
+  assertText(row.change.text, `${path}.change.text`);
+  assertLeadingVisual(row.leading, `${path}.leading`);
+  const assertSegments = (segments, segmentPath) => {
+    segments?.forEach((segment, index) => {
+      assertText(segment.text, `${segmentPath}[${index}].text`);
+      if (segment.style !== undefined && segment.style !== 'subscript') {
+        fail(`${segmentPath}[${index}].style`, 'must be subscript when provided');
+      }
+    });
+  };
+  assertSegments(row.subtitleSegments, `${path}.subtitleSegments`);
+  assertSegments(row.priceSegments, `${path}.priceSegments`);
+  assertSegments(row.change.textSegments, `${path}.change.textSegments`);
+  if (!['positive', 'negative', 'neutral'].includes(row.change.tone)) {
+    fail(`${path}.change.tone`, 'must be positive, negative, or neutral');
+  }
+  if ((row.badges?.length ?? 0) > MAX_MARKET_BADGES) {
+    fail(`${path}.badges`, `supports at most ${MAX_MARKET_BADGES} badges`);
+  }
+  const badgeKeys = new Set();
+  row.badges?.forEach((badge, index) => {
+    const badgePath = `${path}.badges[${index}]`;
+    assertKey(badge.key, `${badgePath}.key`);
+    if (badgeKeys.has(badge.key)) {
+      fail(`${path}.badges`, `duplicate badge key "${badge.key}"`);
+    }
+    badgeKeys.add(badge.key);
+    assertText(badge.text, `${badgePath}.text`);
+    if (badge.iconName !== undefined && badge.iconName !== 'verified') {
+      fail(`${badgePath}.iconName`, 'must be verified when provided');
+    }
+    if (badge.iconName !== undefined && badge.icon !== undefined) {
+      fail(`${badgePath}.icon`, 'cannot be combined with iconName');
+    }
+    assertImage(badge.icon, `${badgePath}.icon`);
+    if (badge.tone !== undefined && !['neutral', 'info', 'success', 'warning', 'danger'].includes(badge.tone)) {
+      fail(`${badgePath}.tone`, 'must be neutral, info, success, warning, or danger');
+    }
+    if (!badge.text && !badge.icon && !badge.iconName) {
+      fail(badgePath, 'requires text, icon, or iconName');
+    }
+    if (badge.actionKey !== undefined) {
+      assertKey(badge.actionKey, `${badgePath}.actionKey`);
+    }
+  });
+  for (const [key, value] of [['pressActionKey', row.pressActionKey], ['pressInActionKey', row.pressInActionKey], ['longPressActionKey', row.longPressActionKey], ['diagnostics.imageBindActionKey', row.diagnostics?.imageBindActionKey]]) {
+    if (value !== undefined) assertKey(value, `${path}.${key}`);
+  }
+  assertMarketStyle(row.style, `${path}.style`);
+}
 function assertSectionHeaderVariant(variant, path) {
   if (variant !== undefined && !['summary', 'gallery', 'history'].includes(variant)) {
     fail(path, 'must be summary, gallery, or history when provided');
@@ -150,7 +250,7 @@ function assertLeadingVisual(visual, path) {
   }
 }
 function assertVisual(row, path) {
-  const visuals = row.type === 'identity' ? [row.leading] : row.type === 'rail' ? [row.visual] : row.type === 'activity' ? [row.leading, row.secondaryLeading] : row.type === 'message' ? [row.leading] : row.type === 'dataRow' ? [row.leading] : row.type === 'metricCard' ? [row.visual] : [];
+  const visuals = row.type === 'identity' ? [row.leading] : row.type === 'rail' ? [row.visual] : row.type === 'activity' ? [row.leading, row.secondaryLeading] : row.type === 'message' ? [row.leading] : row.type === 'dataRow' ? [row.leading] : row.type === 'market' ? [row.leading] : row.type === 'metricCard' ? [row.visual] : [];
   visuals.forEach((visual, index) => {
     assertLeadingVisual(visual, `${path}.visual[${index}]`);
   });
@@ -262,6 +362,9 @@ function assertRow(row, index, path = `rows[${index}]`) {
         fail(`${path}.badges`, `supports at most ${MAX_BADGES} badges`);
       }
       break;
+    case 'market':
+      assertMarketRow(row, path);
+      break;
     case 'mediaTile':
       assertImage(row.image, `${path}.image`);
       if (row.imageState !== undefined && !['empty', 'error'].includes(row.imageState)) {
@@ -327,12 +430,19 @@ function assertRow(row, index, path = `rows[${index}]`) {
       assertTrailingAccessories(row.trailing, `${path}.trailing`);
       break;
     case 'system':
+      const presentation = 'presentation' in row ? row.presentation : undefined;
+      if (presentation !== undefined && presentation !== 'market') {
+        fail(`${path}.presentation`, 'must be market when provided');
+      }
       if (
       // OneKey patch: deprecated-wallet warnings retain the original scrolling semantics.
       !['loading', 'retry', 'noMatch', 'end', 'spacer', 'warning'].includes(row.variant)) {
         fail(`${path}.variant`, 'must be loading, retry, noMatch, end, spacer, or warning');
       }
       if (row.variant === 'warning') assertText(row.title, `${path}.title`);
+      if (row.variant === 'loading' && row.loadingStyle !== undefined && row.loadingStyle !== 'skeleton' && row.loadingStyle !== 'spinner') {
+        fail(`${path}.loadingStyle`, 'must be skeleton or spinner when provided');
+      }
       if (row.variant !== 'spacer') {
         assertText(row.message, `${path}.message`);
       }
@@ -503,6 +613,24 @@ function assertPatchChanges(patch, index) {
         fail(`${path}.badges`, `supports at most ${MAX_BADGES} badges`);
       }
       break;
+    case 'market':
+      assertMarketRow({
+        type: 'market',
+        key: patch.key,
+        variant: 'token',
+        leading: {
+          kind: 'icon',
+          name: 'placeholder'
+        },
+        title: '',
+        price: '',
+        change: {
+          text: '',
+          tone: 'neutral'
+        },
+        ...patch.changes
+      }, path);
+      break;
     case 'mediaTile':
       assertImage(patch.changes.image, `${path}.image`);
       if (patch.changes.imageState !== undefined && !['empty', 'error'].includes(patch.changes.imageState)) {