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

package/ios/NativeListMediaTileRenderer.swift

@@ -0,0 +1,184 @@
+import UIKit
+
+final class NativeListMediaTileCell: NativeListRendererCell {
+  override class func measure(
+    _ item: NativeListItem, width: CGFloat, theme: [String: Any]?, layout: String
+  ) -> CGFloat? {
+    return 244
+  }
+
+  private let picture = UIView()
+  private let image = NativeListImageSlot()
+  private let network = NativeListImageSlot()
+  private let errorIcon = UIImageView()
+  private let title = NativeListTextLabel()
+  private let subtitle = NativeListTextLabel()
+  private let badge = NativeListTextLabel()
+  private let metadata = UIStackView()
+  private let subtitleLine = UIStackView()
+  private let close = UIButton(type: .system)
+  private let closeStack = UIStackView()
+  private let titleLine = UIStackView()
+  private var closeKey = ""
+  private var ownsImageFill = false
+  private var imageStyle: [String: Any] = [:]
+  private var imageWidth: NSLayoutConstraint!
+  private var imageHeight: NSLayoutConstraint!
+  override var defaultCornerRadius: CGFloat { 16 }
+  override var showsSelection: Bool { false }
+  override var pressChangesBackground: Bool { false }
+  override var assetFields: [String] { ["image", "networkImage"] }
+  override var isHighlighted: Bool { didSet { picture.alpha = isHighlighted ? 0.8 : 1 } }
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    root.axis = .vertical
+    root.alignment = .fill
+    metadata.axis = .vertical
+    metadata.alignment = .fill
+    subtitleLine.axis = .horizontal
+    subtitleLine.alignment = .center
+    subtitleLine.spacing = 8
+    [subtitle, network.view].forEach(subtitleLine.addArrangedSubview)
+    titleLine.axis = .horizontal
+    titleLine.alignment = .center
+    titleLine.addArrangedSubview(title)
+    [subtitleLine, titleLine].forEach(metadata.addArrangedSubview)
+    closeStack.axis = .vertical
+    closeStack.alignment = .trailing
+    closeStack.addArrangedSubview(close)
+    [picture, metadata, closeStack].forEach(root.addArrangedSubview)
+    picture.translatesAutoresizingMaskIntoConstraints = false
+    [image.view, errorIcon, badge].forEach {
+      picture.addSubview($0)
+      $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    imageWidth = image.view.widthAnchor.constraint(equalToConstant: 0)
+    imageHeight = picture.heightAnchor.constraint(equalToConstant: 160)
+    NSLayoutConstraint.activate([
+      image.view.leadingAnchor.constraint(equalTo: picture.leadingAnchor),
+      image.view.topAnchor.constraint(equalTo: picture.topAnchor),
+      image.view.heightAnchor.constraint(equalTo: picture.heightAnchor), imageWidth, imageHeight,
+      errorIcon.centerXAnchor.constraint(equalTo: image.view.centerXAnchor),
+      errorIcon.centerYAnchor.constraint(equalTo: image.view.centerYAnchor),
+      errorIcon.widthAnchor.constraint(equalToConstant: 24),
+      errorIcon.heightAnchor.constraint(equalToConstant: 24),
+      badge.trailingAnchor.constraint(equalTo: image.view.trailingAnchor),
+      badge.bottomAnchor.constraint(equalTo: image.view.bottomAnchor),
+      badge.heightAnchor.constraint(equalToConstant: 24),
+      network.view.widthAnchor.constraint(equalToConstant: 14),
+      network.view.heightAnchor.constraint(equalToConstant: 14),
+    ])
+    errorIcon.contentMode = .scaleAspectFit
+    badge.textAlignment = .center
+    badge.layer.cornerRadius = 10
+    badge.layer.borderWidth = 2
+    badge.clipsToBounds = true
+    network.view.layer.cornerRadius = 7
+    network.view.clipsToBounds = true
+    subtitle.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+    close.contentHorizontalAlignment = .trailing
+    close.addTarget(self, action: #selector(closePressed), for: .touchUpInside)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+  override func bindContent(
+    _ item: NativeListItem, theme: [String: Any]?, layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String
+  ) {
+    let style = item.data.dictionary("style") ?? [:]
+    imageStyle = style.dictionary("image") ?? [:]
+    let hp = CGFloat(style.double("horizontalPadding", default: 10))
+    let vp = CGFloat(style.double("verticalPadding", default: 10))
+    contentInsets = UIEdgeInsets(top: vp, left: hp, bottom: vp, right: hp)
+    root.spacing = 8
+    root.setCustomSpacing(CGFloat(style.double("leadingGap", default: 8)), after: picture)
+    metadata.spacing = CGFloat(style.double("lineGap", default: 2))
+    NativeListResolvedText(
+      item.data.string("title"), style: style.dictionary("title"), size: 16,
+      weight: .medium, color: nativeListColor(theme, "primaryText", "#202020"),
+      lineHeight: nativeListFont(ofSize: 16, weight: .medium).lineHeight,
+      lines: 1, preservesBreakMode: true
+    ).bind(title)
+    NativeListResolvedText(
+      item.data.string("subtitle"), style: style.dictionary("subtitle"), size: 12,
+      color: nativeListColor(theme, "secondaryText", "#646464"),
+      lineHeight: nativeListFont(ofSize: 12).lineHeight, lines: 1, preservesBreakMode: true
+    ).bind(subtitle)
+    let badgeText = item.data.dictionary("badge")?.string("text") ?? ""
+    NativeListResolvedText(
+      badgeText.isEmpty ? "" : "  \(badgeText)  ", style: style.dictionary("badge"), size: 14,
+      weight: .medium, color: nativeListColor(theme, "inverseText", "#FCFCFC"),
+      lineHeight: nativeListFont(ofSize: 14, weight: .medium).lineHeight,
+      lines: 1, preservesBreakMode: true
+    ).bind(badge)
+    if style.dictionary("badge")?["alignment"] == nil { badge.textAlignment = .center }
+    badge.backgroundColor = nativeListColor(theme, "inverseBackground", "#202020")
+    badge.layer.borderColor = nativeListColor(theme, "rowBackground", "#FFFFFF").cgColor
+    let state = item.data.string("imageState")
+    let placeholder = theme?.string("strongBackground", default: "#0000000F") ?? "#0000000F"
+    errorIcon.isHidden = state != "error"
+    errorIcon.image = nativeListIcon(named: "ImageSquareWavesOutline")
+    errorIcon.tintColor = UIColor(nativeListHex: "#00000044", fallback: .lightGray)
+    if state != "empty", state != "error", let source = item.data.dictionary("image") {
+      // Legacy source-backed media had a transparent container. Clear only a fill this
+      // renderer applied, so OneKeyImage keeps ownership of its own placeholder color.
+      if ownsImageFill {
+        image.view.backgroundColor = .clear
+        ownsImageFill = false
+      }
+      image.bind(
+        source, key: "\(item.key):media", fit: imageStyle["contentFit"] as? String,
+        placeholder: placeholder)
+    } else {
+      image.recycle()
+      image.view.backgroundColor =
+        state == "error" ? nativeListColor(theme, "strongBackground", "#0000000F") : .clear
+      ownsImageFill = true
+    }
+    if let source = item.data.dictionary("networkImage") {
+      // Legacy hid the network badge until it loaded, so it takes no layout space before.
+      network.view.isHidden = true
+      network.view.alpha = 1
+      network.bind(
+        source, key: "\(item.key):network", variant: "network", placeholder: placeholder
+      ) { [weak self] loaded in
+        self?.network.view.isHidden = !loaded
+      }
+    } else {
+      network.recycle()
+      network.view.isHidden = true
+    }
+    closeKey = item.data.string("closeActionKey")
+    closeStack.isHidden = closeKey.isEmpty
+    close.setTitle("×", for: .normal)
+    close.titleLabel?.font = nativeListFont(ofSize: 16, weight: .medium)
+    close.setTitleColor(nativeListColor(theme, "primaryText", "#202020"), for: .normal)
+  }
+  override func layoutSubviews() {
+    let width = CGFloat(
+      imageStyle.double(
+        "width",
+        default: Double(max(0, contentView.bounds.width - contentInsets.left - contentInsets.right))
+      ))
+    imageWidth.constant = width
+    imageHeight.constant = CGFloat(imageStyle.double("height", default: Double(width)))
+    let shape = imageStyle.string("shape", default: "rounded")
+    image.view.layer.cornerRadius = CGFloat(
+      imageStyle.double(
+        "cornerRadius",
+        default: shape == "circle"
+          ? Double(min(width, imageHeight.constant) / 2) : shape == "square" ? 0 : 10))
+    image.view.clipsToBounds = true
+    super.layoutSubviews()
+  }
+  @objc private func closePressed() {
+    emitAction(closeKey, from: close, source: "mediaClose", slot: 0)
+  }
+  override func recycleContent() {
+    image.recycle()
+    network.recycle()
+    closeKey = ""
+    picture.alpha = 1
+  }
+}

package/ios/NativeListMessageRenderer.swift

@@ -0,0 +1,168 @@
+import UIKit
+
+enum NativeListMessageRenderer {
+  struct Resolved {
+    let title: NativeListResolvedText
+    let body: NativeListResolvedText
+    let time: NativeListResolvedText
+    let horizontalPadding: CGFloat
+    let verticalPadding: CGFloat
+    let gap: CGFloat
+    let timeInset: CGFloat
+    let leadingGap: CGFloat
+    let imageWidth: CGFloat
+    let imageHeight: CGFloat
+    let imageStyle: [String: Any]
+    let leading: [String: Any]?
+    let thumbnail: [String: Any]?
+    let unread: Bool
+    let alignment: UIStackView.Alignment
+
+    init(_ item: NativeListItem, theme: [String: Any]?, layout: String) {
+      let style = item.data.dictionary("style") ?? [:]
+      title = NativeListResolvedText(
+        item.data.string("title"), style: style.dictionary("title"), size: 14, weight: .semibold,
+        color: nativeListColor(theme, "primaryText", "#202020"), lineHeight: 20, lines: 2)
+      body = NativeListResolvedText(
+        item.data.string("body"), style: style.dictionary("body"), size: 14,
+        color: nativeListColor(theme, "secondaryText", "#646464"), lineHeight: 20,
+        lines: item.data.int("bodyLines", default: 3))
+      time = NativeListResolvedText(
+        item.data.string("time"), style: style.dictionary("time"), size: 12,
+        color: nativeListColor(theme, "disabledText", "#8D8D8D"), lineHeight: 16, lines: 1,
+        breakMode: .byWordWrapping)
+      horizontalPadding = CGFloat(
+        style.double("horizontalPadding", default: layout == "table" ? 16 : 12))
+      verticalPadding = CGFloat(style.double("verticalPadding", default: 16))
+      gap = CGFloat(style.double("lineGap", default: 2))
+      timeInset = style["lineGap"] == nil ? 2 : 0
+      leadingGap = CGFloat(style.double("leadingGap", default: 12))
+      imageStyle = style.dictionary("image") ?? [:]
+      imageWidth = CGFloat(imageStyle.double("width", default: 28))
+      imageHeight = CGFloat(imageStyle.double("height", default: 28))
+      leading = item.data.dictionary("leading")
+      thumbnail = item.data.dictionary("thumbnail")
+      unread = item.data.bool("unread")
+      switch style.dictionary("container")?.string("contentVerticalAlignment") {
+      case "center": alignment = .center
+      case "bottom": alignment = .bottom
+      default: alignment = .top
+      }
+    }
+
+    func measure(width: CGFloat) -> CGFloat {
+      let textWidth = max(
+        1,
+        width - horizontalPadding * 2 - (leading == nil ? 0 : imageWidth + leadingGap)
+          - (thumbnail == nil ? 0 : 76))
+      let fields = [title, body, time].filter { !$0.text.isEmpty }
+      let textHeight =
+        fields.reduce(CGFloat(0)) { $0 + $1.measure(width: textWidth) }
+        + CGFloat(max(0, fields.count - 1)) * gap + (time.text.isEmpty ? 0 : timeInset)
+      return verticalPadding * 2
+        + max(textHeight, leading == nil ? 0 : imageHeight, thumbnail == nil ? 0 : 64)
+    }
+  }
+
+  final class Views {
+    let root: UIStackView
+    let column = UIStackView()
+    let title = NativeListTextLabel()
+    let body = NativeListTextLabel()
+    let time = NativeListInsetLabel()
+    private var leading: NativeListLeadingVisual?
+    private var thumbnail: NativeListImageSlot?
+    private var sizeConstraints: [NSLayoutConstraint] = []
+
+    init(root: UIStackView = UIStackView()) {
+      self.root = root
+      root.axis = .horizontal
+      root.spacing = 12
+      column.axis = .vertical
+      column.alignment = .fill
+      column.setContentHuggingPriority(UILayoutPriority(1), for: .horizontal)
+      column.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+      title.setContentCompressionResistancePriority(.required, for: .horizontal)
+      [title, body, time].forEach(column.addArrangedSubview)
+      root.addArrangedSubview(column)
+    }
+
+    func bind(_ resolved: Resolved, item: NativeListItem, theme: [String: Any]?) {
+      resolved.title.bind(title)
+      resolved.body.bind(body)
+      resolved.time.bind(time)
+      time.topInset = resolved.timeInset
+      time.invalidateIntrinsicContentSize()
+      column.spacing = resolved.gap
+      root.alignment = resolved.alignment
+      NSLayoutConstraint.deactivate(sizeConstraints)
+      sizeConstraints.removeAll(keepingCapacity: true)
+      if let data = resolved.leading {
+        let visual = leading ?? NativeListLeadingVisual(frame: .zero)
+        leading = visual
+        if visual.superview == nil { root.insertArrangedSubview(visual, at: 0) }
+        visual.bind(
+          data, style: resolved.imageStyle, key: item.key, theme: theme, isUnread: resolved.unread)
+        root.setCustomSpacing(resolved.leadingGap, after: visual)
+        sizeConstraints += [
+          visual.widthAnchor.constraint(equalToConstant: resolved.imageWidth),
+          visual.heightAnchor.constraint(equalToConstant: resolved.imageHeight),
+        ]
+      } else if let leading {
+        leading.recycle()
+        root.removeArrangedSubview(leading)
+        leading.removeFromSuperview()
+      }
+      if let source = resolved.thumbnail {
+        let slot = thumbnail ?? NativeListImageSlot()
+        thumbnail = slot
+        if slot.view.superview == nil { root.addArrangedSubview(slot.view) }
+        slot.view.layer.cornerRadius = 6
+        slot.view.layer.borderWidth = 1 / UIScreen.main.scale
+        slot.view.layer.borderColor = UIColor(nativeListHex: "#0000000F", fallback: .clear).cgColor
+        sizeConstraints += [
+          slot.view.widthAnchor.constraint(equalToConstant: 64),
+          slot.view.heightAnchor.constraint(equalToConstant: 64),
+        ]
+        slot.bind(
+          source, key: "\(item.key):thumbnail",
+          placeholder: theme?.string("strongBackground", default: "#0000000F") ?? "#0000000F")
+      } else if let thumbnail {
+        thumbnail.recycle()
+        root.removeArrangedSubview(thumbnail.view)
+        thumbnail.view.removeFromSuperview()
+      }
+      NSLayoutConstraint.activate(sizeConstraints)
+    }
+    func recycle() {
+      leading?.recycle()
+      thumbnail?.recycle()
+    }
+  }
+
+}
+
+final class NativeListMessageCell: NativeListRendererCell {
+  override class func measure(
+    _ item: NativeListItem, width: CGFloat, theme: [String: Any]?, layout: String
+  ) -> CGFloat? {
+    return NativeListMessageRenderer.Resolved(item, theme: theme, layout: layout).measure(
+      width: width)
+  }
+
+  override var assetFields: [String] { ["leading", "thumbnail"] }
+  private lazy var views = NativeListMessageRenderer.Views(root: root)
+  override init(frame: CGRect) { super.init(frame: frame) }
+  required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+  override func bindContent(
+    _ item: NativeListItem, theme: [String: Any]?, layout: String,
+    checkboxState: (NativeListItem, NativeSelectionTarget?, String) -> String
+  ) {
+    let resolved = NativeListMessageRenderer.Resolved(item, theme: theme, layout: layout)
+    views.bind(resolved, item: item, theme: theme)
+    contentInsets = UIEdgeInsets(
+      top: resolved.verticalPadding, left: resolved.horizontalPadding,
+      bottom: resolved.verticalPadding, right: resolved.horizontalPadding)
+  }
+  override func recycleContent() { views.recycle() }
+}