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

package/ios/NativeListImageSlot.swift

@@ -0,0 +1,140 @@
+import CryptoKit
+import OneKeyImage
+import UIKit
+
+// Request lifetime is independent of row action epochs. An unchanged descriptor
+// can outlive a text-only rebind; a new row/slot/source always invalidates it.
+final class NativeListImageSlot {
+  let view = OneKeyImageReusableView(frame: .zero)
+  private var identity: String?
+  private var epoch = 0
+  private var retry: DispatchWorkItem?
+  private var completion: ((Bool) -> Void)?
+  private var result: Bool?
+
+  static func signature(_ value: [String: Any]) -> String {
+    guard let data = try? JSONSerialization.data(withJSONObject: value, options: [.sortedKeys])
+    else { return "" }
+    return SHA256.hash(data: data).map { String(format: "%02x", $0) }.joined()
+  }
+
+  func bind(
+    _ source: [String: Any], key: String, variant: String = "generic",
+    fit: String? = nil, placeholder: String = "#0000000F", completion: ((Bool) -> Void)? = nil
+  ) {
+    self.completion = completion
+    let next = Self.signature([
+      "source": source, "key": key, "variant": variant,
+      "fit": fit ?? source.string("contentFit", default: "cover"), "placeholder": placeholder,
+    ])
+    if identity == next {
+      if let result { completion?(result) }
+      return
+    }
+    recycle()
+    self.completion = completion
+    identity = next
+    configure(
+      source, key: key, variant: variant, fit: fit, placeholder: placeholder, attempt: 0,
+      token: epoch)
+  }
+
+  private func configure(
+    _ source: [String: Any], key: String, variant: String, fit: String?, placeholder: String,
+    attempt: Int, token: Int
+  ) {
+    guard token == self.epoch else { return }
+    var completed = false
+    let headers = source.dictionary("headers").flatMap {
+      try? JSONSerialization.data(withJSONObject: $0, options: [.sortedKeys])
+    }
+    self.view.configure(
+      sourceUri: source.string("uri").trimmingCharacters(in: .whitespacesAndNewlines),
+      sourceHeadersJson: headers.flatMap { String(data: $0, encoding: .utf8) },
+      variant: variant, contentFit: fit ?? source.string("contentFit", default: "cover"),
+      cachePolicy: source.string("cachePolicy", default: "memory-disk"),
+      autoplay: source.bool("autoplay"),
+      recyclingKey: attempt == 0 ? key : "\(key):retry:\(attempt)",
+      optimizeTos: attempt == 0 && source.bool("optimizeTos", default: true),
+      overscan: source.double("overscan", default: 1.1),
+      loadingStrategy: source.string("loadingStrategy", default: "none"),
+      placeholderColor: placeholder,
+      onLoad: { [weak self] in
+        guard let self, self.epoch == token, !completed else { return }
+        completed = true
+        self.retry?.cancel()
+        self.retry = nil
+        self.result = true
+        self.completion?(true)
+      },
+      onError: { [weak self] in
+        guard let self, self.epoch == token, !completed else { return }
+        completed = true
+        self.result = false
+        self.completion?(false)
+        guard attempt < source.int("retryTimes"), self.retry == nil else { return }
+        let work = DispatchWorkItem { [weak self] in
+          guard let self, self.epoch == token else { return }
+          self.retry = nil
+          self.configure(
+            source, key: key, variant: variant, fit: fit, placeholder: placeholder,
+            attempt: attempt + 1, token: token)
+        }
+        self.retry = work
+        DispatchQueue.main.asyncAfter(
+          deadline: .now() + Double(Int.random(in: 0...2)), execute: work)
+      })
+  }
+
+  func recycle() {
+    epoch &+= 1
+    retry?.cancel()
+    retry = nil
+    completion = nil
+    identity = nil
+    result = nil
+    view.prepareForReuse()
+  }
+  deinit { retry?.cancel() }
+}
+
+enum NativeListSourceFallbackState {
+  private static let sources: NSCache<NSString, NSNumber> = {
+    let cache = NSCache<NSString, NSNumber>()
+    cache.countLimit = 128
+    return cache
+  }()
+
+  static func has(_ key: String) -> Bool {
+    sources.object(forKey: key as NSString) != nil
+  }
+
+  static func remember(_ key: String) {
+    sources.setObject(NSNumber(value: true), forKey: key as NSString)
+  }
+
+  static func forget(_ key: String) {
+    sources.removeObject(forKey: key as NSString)
+  }
+}
+
+func nativeListSourceFallbackStateKey(_ source: [String: Any]) -> String? {
+  let uri = source.string("uri").trimmingCharacters(in: .whitespacesAndNewlines)
+  guard !uri.isEmpty else { return nil }
+  // The fallback-state cache is process-wide, so key it by a digest of the request identity
+  // instead of retaining raw header values, which can carry credentials such as Authorization.
+  let headers = source.dictionary("headers") ?? [:]
+  let fields: [(name: String, value: String)] = headers.map { key, value in
+    (name: key.lowercased(), value: String(describing: value))
+  }
+  let sortedFields = fields.sorted { lhs, rhs in
+    lhs.name == rhs.name ? lhs.value < rhs.value : lhs.name < rhs.name
+  }
+  var canonicalValue = "\(uri.utf8.count):\(uri)"
+  for field in sortedFields {
+    canonicalValue +=
+      "\(field.name.utf8.count):\(field.name)\(field.value.utf8.count):\(field.value)"
+  }
+  let digest = SHA256.hash(data: Data(canonicalValue.utf8))
+  return digest.map { String(format: "%02x", $0) }.joined()
+}

package/ios/NativeListLeadingVisual.swift

@@ -0,0 +1,372 @@
+import UIKit
+
+// Bounded visual primitive: three source slots, two optional overlays. It knows
+// visual descriptors and request lifetimes, never row types or business keys.
+final class NativeListLeadingVisual: UIView {
+  var glyphSize: CGFloat = 18
+  var bitmapBorderWidth: CGFloat = 0
+  private let fallback = NativeListTextLabel()
+  var fallbackTextView: UILabel { fallback }
+  var singleOuterMask = false
+  var alwaysClips = false
+  var dashedBorderWidth: CGFloat = 2
+  var overlayTextFontSize: CGFloat = 10
+  var overlayTextLineHeight: CGFloat?
+  var overlayTextHorizontalInset: CGFloat?
+  private let icon = UIImageView()
+  private let unread = UIView()
+  private let networkBackdrop = UIView()
+  private let corner = UIImageView()
+  private let cornerBackdrop = UIView()
+  private var slots: [NativeListImageSlot] = []
+  private var overlaySlots: [NativeListImageSlot] = []
+  private var overlays: [(UIView, [String: Any])] = []
+  private let dashedBorder = CAShapeLayer()
+  private var visual: [String: Any] = [:]
+  private var imageStyle: [String: Any] = [:]
+  private var sources: [([String: Any], String)] = []
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    [fallback, icon, networkBackdrop, cornerBackdrop, corner, unread].forEach(addSubview)
+    fallback.textAlignment = .center
+    fallback.font = nativeListFont(ofSize: 13, weight: .bold)
+    icon.contentMode = .scaleAspectFit
+    corner.contentMode = .scaleAspectFit
+    unread.backgroundColor = UIColor(nativeListHex: "#E5484D", fallback: .red)
+    unread.layer.cornerRadius = 4
+    networkBackdrop.layer.cornerRadius = 10
+    cornerBackdrop.layer.cornerRadius = 10
+    layer.addSublayer(dashedBorder)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+  func bind(
+    _ visual: [String: Any], style: [String: Any], key: String, theme: [String: Any]?,
+    isUnread: Bool, secondaryVisual: [String: Any]? = nil
+  ) {
+    self.visual = visual
+    imageStyle = style
+    let kind = visual.string("kind")
+    let variant =
+      kind == "token"
+      ? "token"
+      : kind == "network" ? "network" : ["account", "wallet"].contains(kind) ? "avatar" : "generic"
+    sources =
+      kind == "stackedImages"
+      ? visual.dictionaries("images").prefix(3).map { ($0, "generic") }
+      : kind == "icon" ? [] : visual.dictionary("image").map { [($0, variant)] } ?? []
+    if kind == "token", !sources.isEmpty, let network = visual.dictionary("networkImage") {
+      sources.append((network, "network"))
+    }
+    if let secondaryVisual {
+      let secondaryKind = secondaryVisual.string("kind")
+      let source =
+        secondaryKind == "stackedImages"
+        ? secondaryVisual.dictionaries("images").first
+        : secondaryKind == "icon" ? nil : secondaryVisual.dictionary("image")
+      if let source {
+        sources.append(
+          (
+            source,
+            secondaryKind == "token"
+              ? "token"
+              : secondaryKind == "network"
+                ? "network" : ["account", "wallet"].contains(secondaryKind) ? "avatar" : "generic"
+          ))
+      }
+    }
+    while slots.count < sources.count {
+      let slot = NativeListImageSlot()
+      slots.append(slot)
+      insertSubview(slot.view, belowSubview: slots.count == 1 ? networkBackdrop : cornerBackdrop)
+    }
+    let placeholder = theme?.string("strongBackground", default: "#0000000F") ?? "#0000000F"
+    let fallbackIcon = visual.dictionary("fallbackIcon")
+    let sourceFallback =
+      kind != "icon" && !sources.isEmpty
+      && sources[0].0.string("loadingStrategy", default: "none") != "none"
+      && (visual["fallbackText"] != nil || fallbackIcon != nil)
+    let fallbackKey = sourceFallback ? nativeListSourceFallbackStateKey(sources[0].0) : nil
+    let restored = fallbackKey.map(NativeListSourceFallbackState.has) ?? false
+    let fallbackData = kind == "icon" ? visual : fallbackIcon
+    fallback.text = String(visual.string("fallbackText").prefix(2))
+    fallback.textColor = UIColor(nativeListHex: "#8D8D8D", fallback: .gray)
+    icon.image = fallbackData.map { nativeListIcon(named: $0.string("name")) } ?? nil
+    icon.tintColor = UIColor(
+      nativeListHex: fallbackData?.string("tintColor", default: "#646464") ?? "#646464",
+      fallback: .darkGray)
+    fallback.isHidden = kind == "icon" || fallbackIcon != nil || !sources.isEmpty && !restored
+    icon.isHidden = !(kind == "icon" || (sources.isEmpty || restored) && fallbackIcon != nil)
+    let visualBackground = UIColor(
+      nativeListHex: visual.string(
+        "backgroundColor", default: sources.isEmpty ? placeholder : "#00000000"), fallback: .clear)
+    backgroundColor =
+      sourceFallback ? UIColor(nativeListHex: placeholder, fallback: .clear) : visualBackground
+    layer.borderWidth = kind == "icon" ? 1 / UIScreen.main.scale : 0
+    layer.borderColor = UIColor(nativeListHex: "#0000001F", fallback: .clear).cgColor
+    if bitmapBorderWidth > 0 {
+      layer.borderWidth = bitmapBorderWidth
+      layer.borderColor =
+        UIColor(nativeListHex: visual.string("borderColor"), fallback: .clear).cgColor
+    }
+    for (index, slot) in slots.enumerated() {
+      guard index < sources.count else {
+        slot.recycle()
+        slot.view.isHidden = true
+        continue
+      }
+      let source = sources[index]
+      slot.view.isHidden = index > 0 || sourceFallback
+      slot.bind(
+        source.0, key: "\(key):leading:\(index)", variant: source.1,
+        fit: index == 0 ? style["contentFit"] as? String : nil, placeholder: placeholder
+      ) { [weak self, weak slot] loaded in
+        slot?.view.isHidden = !loaded && (index > 0 || sourceFallback)
+        guard let self, index == 0, sourceFallback else { return }
+        if let fallbackKey {
+          if loaded {
+            NativeListSourceFallbackState.forget(fallbackKey)
+          } else {
+            NativeListSourceFallbackState.remember(fallbackKey)
+          }
+        }
+        self.backgroundColor =
+          loaded ? visualBackground : UIColor(nativeListHex: placeholder, fallback: .clear)
+        self.fallback.isHidden = loaded || fallbackIcon != nil
+        self.icon.isHidden = loaded || fallbackIcon == nil
+      }
+    }
+    networkBackdrop.isHidden = !(kind == "token" && sources.count > 1)
+    networkBackdrop.backgroundColor = nativeListColor(theme, "rowBackground", "#FFFFFF")
+    let badge = visual.dictionary("cornerIcon")
+    corner.isHidden = badge == nil
+    cornerBackdrop.isHidden = badge == nil
+    corner.image = badge.flatMap { nativeListIcon(named: $0.string("name")) }
+    corner.tintColor = UIColor(
+      nativeListHex: badge?.string("tintColor", default: "#646464") ?? "#646464",
+      fallback: .darkGray)
+    cornerBackdrop.backgroundColor = UIColor(
+      nativeListHex: badge?.string("backgroundColor", default: "#FFFFFF") ?? "#FFFFFF",
+      fallback: .white)
+    unread.isHidden = !isUnread
+    let previousOverlays = overlays
+    overlays.removeAll(keepingCapacity: true)
+    let descriptors = Array(visual.dictionaries("overlays").prefix(2))
+    while overlaySlots.count < descriptors.count { overlaySlots.append(NativeListImageSlot()) }
+    for (index, data) in descriptors.enumerated() {
+      let frame = index < previousOverlays.count ? previousOverlays[index].0 : UIView()
+      frame.clipsToBounds = true
+      frame.backgroundColor = UIColor(
+        nativeListHex: data.string(
+          "backgroundColor",
+          default: theme?.string("rowBackground", default: "#00000000") ?? "#00000000"),
+        fallback: .clear)
+      let child: UIView
+      if let image = data.dictionary("image") {
+        let slot = overlaySlots[index]
+        child = slot.view
+        child.isHidden = true
+        slot.bind(image, key: "\(key):overlay:\(index)", placeholder: placeholder) {
+          [weak child] loaded in child?.isHidden = !loaded
+        }
+      } else if !data.string("text").isEmpty {
+        overlaySlots[index].recycle()
+        let label = frame.subviews.first as? UILabel ?? UILabel()
+        label.text = data.string("text")
+        label.textAlignment = .center
+        // A line-height box is the legacy wallet text badge: regular weight, centered metrics.
+        label.font = nativeListFont(
+          ofSize: overlayTextFontSize, weight: overlayTextLineHeight == nil ? .medium : .regular)
+        if let line = overlayTextLineHeight {
+          let paragraph = NSMutableParagraphStyle()
+          paragraph.minimumLineHeight = line
+          paragraph.maximumLineHeight = line
+          paragraph.alignment = .center
+          label.attributedText = NSAttributedString(
+            string: data.string("text"),
+            attributes: [
+              .font: label.font as Any, .paragraphStyle: paragraph,
+              .baselineOffset: max(0, (line - label.font.lineHeight) / 2),
+            ])
+        }
+        label.textColor = UIColor(
+          nativeListHex: data.string("tintColor", default: "#646464"), fallback: .darkGray)
+        child = label
+      } else {
+        overlaySlots[index].recycle()
+        let glyph = frame.subviews.first as? UIImageView ?? UIImageView()
+        glyph.image = nativeListIcon(named: data.string("name"))
+        glyph.contentMode = .scaleAspectFit
+        glyph.tintColor = UIColor(
+          nativeListHex: data.string("tintColor", default: "#646464"), fallback: .darkGray)
+        child = glyph
+      }
+      if child.superview !== frame {
+        frame.subviews.forEach { $0.removeFromSuperview() }
+        frame.addSubview(child)
+      }
+      if frame.superview == nil { addSubview(frame) }
+      overlays.append((frame, data))
+    }
+    previousOverlays.dropFirst(descriptors.count).forEach { $0.0.removeFromSuperview() }
+    for slot in overlaySlots.dropFirst(descriptors.count) { slot.recycle() }
+    bringSubviewToFront(unread)
+    setNeedsLayout()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    let kind = visual.string("kind")
+    let rtl = effectiveUserInterfaceLayoutDirection == .rightToLeft
+    func logical(_ rect: CGRect) -> CGRect {
+      rtl
+        ? CGRect(x: bounds.width - rect.maxX, y: rect.minY, width: rect.width, height: rect.height)
+        : rect
+    }
+    let shape = imageStyle.string(
+      "shape", default: visual.string("shape", default: kind == "image" ? "rounded" : "circle"))
+    let radius =
+      imageStyle["cornerRadius"] != nil
+      ? CGFloat(imageStyle.double("cornerRadius"))
+      : shape == "square"
+        ? 0
+        : shape == "rounded"
+          ? (imageStyle["shape"] != nil ? 10 : min(10, bounds.height / 4))
+          : min(bounds.width, bounds.height) / 2
+    layer.cornerRadius = radius
+    clipsToBounds =
+      alwaysClips
+      || sources.count < 2 && overlays.isEmpty && visual.dictionary("cornerIcon") == nil
+    let ellipse = imageStyle.string("shape") == "circle" && imageStyle["cornerRadius"] == nil
+    if ellipse && clipsToBounds {
+      let mask = layer.mask as? CAShapeLayer ?? CAShapeLayer()
+      mask.path = UIBezierPath(ovalIn: bounds).cgPath
+      layer.mask = mask
+    } else {
+      layer.mask = nil
+    }
+    fallback.frame = bounds
+    let fallbackIcon = visual.dictionary("fallbackIcon")
+    let iconSize: CGFloat =
+      !sources.isEmpty && fallbackIcon != nil
+      ? min(bounds.width, bounds.height)
+        * (fallbackIcon?.string("name") == "GlobusOutline" ? 1.2 : 1) : glyphSize
+    icon.frame = CGRect(
+      x: (bounds.width - iconSize) / 2, y: (bounds.height - iconSize) / 2, width: iconSize,
+      height: iconSize)
+    let tokenPair = kind == "token" && sources.count > 1
+    for (index, slot) in slots.prefix(sources.count).enumerated() {
+      let frame: CGRect
+      if sources.count == 1 || tokenPair && index == 0 {
+        frame = bounds
+      } else if tokenPair {
+        frame = CGRect(x: bounds.width - 14, y: bounds.height - 14, width: 16, height: 16)
+      } else {
+        let side = bounds.height * 0.72
+        frame = CGRect(
+          x: CGFloat(index) * (bounds.width - side) / CGFloat(max(1, sources.count - 1)),
+          y: (bounds.height - side) / 2, width: side, height: side)
+      }
+      slot.view.frame = logical(
+        index == 0 ? frame.insetBy(dx: bitmapBorderWidth, dy: bitmapBorderWidth) : frame)
+      slot.view.clipsToBounds =
+        !(singleOuterMask && sources.count == 1 && overlays.isEmpty
+        && visual.dictionary("cornerIcon") == nil)
+      slot.view.layer.cornerRadius =
+        index == 0 && singleOuterMask && sources.count == 1 && overlays.isEmpty
+          && visual.dictionary("cornerIcon") == nil
+        ? 0 : index == 0 && (sources.count == 1 || tokenPair) ? radius : frame.height / 2
+    }
+    for (index, slot) in slots.enumerated() {
+      if index == 0 && bitmapBorderWidth > 0 {
+        let mask = slot.view.layer.mask as? CAShapeLayer ?? CAShapeLayer()
+        mask.path =
+          UIBezierPath(
+            roundedRect: slot.view.bounds.insetBy(dx: -bitmapBorderWidth, dy: -bitmapBorderWidth),
+            cornerRadius: radius
+          ).cgPath
+        slot.view.layer.mask = mask
+        slot.view.layer.cornerRadius = 0
+      } else if ellipse && index == 0 {
+        let mask = slot.view.layer.mask as? CAShapeLayer ?? CAShapeLayer()
+        mask.path = UIBezierPath(ovalIn: slot.view.bounds).cgPath
+        slot.view.layer.mask = mask
+      } else {
+        slot.view.layer.mask = nil
+      }
+    }
+    networkBackdrop.frame = logical(
+      CGRect(x: bounds.width - 16, y: bounds.height - 16, width: 20, height: 20))
+    cornerBackdrop.frame = networkBackdrop.frame
+    corner.frame = cornerBackdrop.frame.insetBy(dx: 1, dy: 1)
+    unread.frame = logical(CGRect(x: bounds.width - 8, y: 0, width: 8, height: 8))
+    for (frame, data) in overlays {
+      let size = CGFloat(data.double("size", default: 20))
+      // Legacy wallet text badges size to their text (tabular 12pt + 4) at the line height.
+      let textBadgeLine =
+        data.dictionary("image") == nil && !data.string("text").isEmpty
+          && data.string("name").isEmpty ? overlayTextLineHeight : nil
+      let naturalWidth = textBadgeLine.map { _ -> CGFloat in
+        let scale = max(1, window?.screen.scale ?? traitCollection.displayScale)
+        let textWidth = (data.string("text") as NSString).size(withAttributes: [
+          .font: nativeListTabularFont(ofSize: overlayTextFontSize), .kern: 0,
+        ]).width
+        return ceil(textWidth * scale) / scale + 4
+      }
+      let width = CGFloat(data.double("width", default: Double(naturalWidth ?? size)))
+      let height = CGFloat(data.double("height", default: Double(textBadgeLine ?? size)))
+      let offset = data.double("offset", default: 2)
+      let x = CGFloat(data.double("offsetX", default: offset))
+      let y = CGFloat(data.double("offsetY", default: offset))
+      frame.frame = logical(
+        CGRect(
+          x: data.string("position") == "topLeft" ? -x : bounds.width - width + x,
+          y: data.string("position") == "topLeft" ? -y : bounds.height - height + y, width: width,
+          height: height))
+      frame.layer.cornerRadius = min(width, height) / 2
+      let inset = CGFloat(data.double("padding", default: 0))
+      frame.subviews.first?.frame = frame.bounds.insetBy(
+        dx: data["text"] != nil ? overlayTextHorizontalInset ?? inset : inset,
+        dy: data["text"] != nil && overlayTextHorizontalInset != nil ? 0 : inset)
+    }
+    dashedBorder.isHidden = visual.string("borderStyle") != "dashed"
+    dashedBorder.strokeColor =
+      UIColor(nativeListHex: visual.string("borderColor", default: "#8D8D8D"), fallback: .gray)
+      .cgColor
+    dashedBorder.fillColor = UIColor.clear.cgColor
+    dashedBorder.lineWidth = dashedBorderWidth
+    dashedBorder.lineDashPattern = [4, 4]
+    dashedBorder.path =
+      UIBezierPath(ovalIn: bounds.insetBy(dx: dashedBorderWidth / 2, dy: dashedBorderWidth / 2))
+      .cgPath
+  }
+  func recycle() {
+    slots.forEach { $0.recycle() }
+    overlaySlots.forEach { $0.recycle() }
+  }
+  /// Empty slot (legacy leading container without a visual): no image, fallback, fill,
+  /// border or overlays from a previous binding.
+  func clear() {
+    recycle()
+    visual = [:]
+    sources = []
+    slots.forEach { $0.view.isHidden = true }
+    overlays.forEach { $0.0.removeFromSuperview() }
+    overlays.removeAll()
+    fallback.text = nil
+    fallback.isHidden = true
+    icon.image = nil
+    icon.isHidden = true
+    networkBackdrop.isHidden = true
+    corner.isHidden = true
+    cornerBackdrop.isHidden = true
+    unread.isHidden = true
+    backgroundColor = .clear
+    layer.borderWidth = 0
+    layer.mask = nil
+    dashedBorder.isHidden = true
+    dashedBorder.path = nil
+    setNeedsLayout()
+  }
+}