react-native-tinyui 0.5.0 → 1.1.0

package/ios/Core/Tinyui.mm

@@ -1,4 +1,7 @@
 #import "Tinyui.h"
+#if TINYUI_FEATURE_TIP_KIT
+#import "Tinyui-Swift.h"
+#endif
 
 @implementation Tinyui
 
@@ -16,10 +19,61 @@
 #if TINYUI_FEATURE_LIQUID_GLASS_TEXT
   [components addObject:@"LiquidGlassText"];
 #endif
+#if TINYUI_FEATURE_STEPPER
+  [components addObject:@"Stepper"];
+#endif
+#if TINYUI_FEATURE_CONCENTRIC_VIEW
+  [components addObject:@"ConcentricView"];
+#endif
+#if TINYUI_FEATURE_SF_SYMBOL
+  [components addObject:@"SFSymbol"];
+#endif
+#if TINYUI_FEATURE_TIP_KIT
+  [components addObject:@"TipKit"];
+#endif
 
   return components;
 }
 
+- (void)configureTips:(NSString *)displayFrequency
+             resolve:(RCTPromiseResolveBlock)resolve
+              reject:(RCTPromiseRejectBlock)reject
+{
+#if TINYUI_FEATURE_TIP_KIT
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [TinyuiTipsRuntime configure:displayFrequency completion:^(NSError *error) {
+      if (error != nil) {
+        reject(error.userInfo[@"code"] ?: @"E_TIPS_CONFIGURATION", error.localizedDescription, error);
+      } else {
+        resolve(nil);
+      }
+    }];
+  });
+#else
+  reject(@"E_TIP_NOT_INSTALLED", @"Enable TipKit in react-native-tinyui.components and run pod install.", nil);
+#endif
+}
+
+- (void)invalidateTip:(NSString *)tipId
+              reason:(NSString *)reason
+             resolve:(RCTPromiseResolveBlock)resolve
+              reject:(RCTPromiseRejectBlock)reject
+{
+#if TINYUI_FEATURE_TIP_KIT
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [TinyuiTipsRuntime invalidate:tipId reason:reason completion:^(NSError *error) {
+      if (error != nil) {
+        reject(error.userInfo[@"code"] ?: @"E_TIP_INVALIDATION", error.localizedDescription, error);
+      } else {
+        resolve(nil);
+      }
+    }];
+  });
+#else
+  reject(@"E_TIP_NOT_INSTALLED", @"Enable TipKit in react-native-tinyui.components and run pod install.", nil);
+#endif
+}
+
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
     (const facebook::react::ObjCTurboModule::InitParams &)params
 {

package/ios/Core/TinyuiComponentClasses.mm

@@ -35,6 +35,30 @@ TINYUI_DISABLED_COMPONENT(TinyuiPopoverView, TinyuiPopoverViewComponentDescripto
 TINYUI_DISABLED_COMPONENT(TinyuiLiquidGlassTextView, TinyuiLiquidGlassTextViewComponentDescriptor)
 #endif
 
+#if TINYUI_FEATURE_STEPPER
+#import "TinyuiStepperView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiStepperView, TinyuiStepperViewComponentDescriptor)
+#endif
+
+#if TINYUI_FEATURE_CONCENTRIC_VIEW
+#import "TinyuiConcentricView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiConcentricView, TinyuiConcentricViewComponentDescriptor)
+#endif
+
+#if TINYUI_FEATURE_SF_SYMBOL
+#import "TinyuiSFSymbolView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiSFSymbolView, TinyuiSFSymbolViewComponentDescriptor)
+#endif
+
+#if TINYUI_FEATURE_TIP_KIT
+#import "TinyuiTipPopoverView.h"
+#else
+TINYUI_DISABLED_COMPONENT(TinyuiTipPopoverView, TinyuiTipPopoverViewComponentDescriptor)
+#endif
+
 #undef TINYUI_DISABLED_COMPONENT
 
 Class<RCTComponentViewProtocol> TinyuiMenuViewCls(void)
@@ -51,3 +75,23 @@ Class<RCTComponentViewProtocol> TinyuiLiquidGlassTextViewCls(void)
 {
   return TinyuiLiquidGlassTextView.class;
 }
+
+Class<RCTComponentViewProtocol> TinyuiStepperViewCls(void)
+{
+  return TinyuiStepperView.class;
+}
+
+Class<RCTComponentViewProtocol> TinyuiConcentricViewCls(void)
+{
+  return TinyuiConcentricView.class;
+}
+
+Class<RCTComponentViewProtocol> TinyuiSFSymbolViewCls(void)
+{
+  return TinyuiSFSymbolView.class;
+}
+
+Class<RCTComponentViewProtocol> TinyuiTipPopoverViewCls(void)
+{
+  return TinyuiTipPopoverView.class;
+}

package/ios/Menu/TinyuiMenuBuilder.swift

@@ -0,0 +1,238 @@
+import React
+import UIKit
+
+@objc public protocol TinyuiMenuViewDelegate: AnyObject {
+  func onActionPress(id: String, title: String)
+}
+
+/** Builds UIKit menu elements from the configuration generated in JavaScript. */
+final class TinyuiMenuBuilder {
+  private weak var delegate: TinyuiMenuViewDelegate?
+
+  init(delegate: TinyuiMenuViewDelegate?) {
+    self.delegate = delegate
+  }
+
+  func buildMenu(title: String, config: [String: Any]) -> UIMenu {
+    print("[TinyUI][Menu] config:", config)
+
+    return UIMenu(
+      title: title,
+      children: buildChildren(from: dictionaries(in: config, key: "items"))
+    )
+  }
+
+  private func buildChildren(
+    from dictionaries: [[String: Any]],
+    inheritedDestructive: Bool = false,
+    inheritedDisabled: Bool = false
+  ) -> [UIMenuElement] {
+    // UIKit represents separators by placing adjacent groups in inline menus.
+    // Partitioning here also makes consecutive/leading/trailing dividers no-ops.
+    let groups = dictionaries.split {
+      ($0["type"] as? String) == "separator"
+    }
+
+    if groups.count <= 1 {
+      return dictionaries.compactMap {
+        buildElement(
+          from: $0,
+          inheritedDestructive: inheritedDestructive,
+          inheritedDisabled: inheritedDisabled
+        )
+      }
+    }
+
+    return groups.compactMap { group in
+      let children = group.compactMap {
+        buildElement(
+          from: $0,
+          inheritedDestructive: inheritedDestructive,
+          inheritedDisabled: inheritedDisabled
+        )
+      }
+      guard !children.isEmpty else {
+        return nil
+      }
+      return UIMenu(title: "", options: .displayInline, children: children)
+    }
+  }
+
+  private func buildElement(
+    from dictionary: [String: Any],
+    inheritedDestructive: Bool,
+    inheritedDisabled: Bool
+  ) -> UIMenuElement? {
+    guard !(dictionary["hidden"] as? Bool ?? false) else {
+      return nil
+    }
+
+    switch dictionary["type"] as? String {
+    case "action":
+      return buildAction(
+        from: dictionary,
+        inheritedDestructive: inheritedDestructive,
+        inheritedDisabled: inheritedDisabled
+      )
+    case "submenu":
+      return buildSubmenu(
+        from: dictionary,
+        inheritedDestructive: inheritedDestructive,
+        inheritedDisabled: inheritedDisabled
+      )
+    case "section":
+      let children = buildChildren(
+        from: dictionaries(in: dictionary, key: "children"),
+        inheritedDestructive: inheritedDestructive,
+        inheritedDisabled: inheritedDisabled
+      )
+      guard !children.isEmpty else {
+        return nil
+      }
+      return UIMenu(
+        title: dictionary["title"] as? String ?? "",
+        options: .displayInline,
+        children: children
+      )
+    default:
+      return nil
+    }
+  }
+
+  private func buildAction(
+    from dictionary: [String: Any],
+    inheritedDestructive: Bool,
+    inheritedDisabled: Bool
+  ) -> UIAction {
+    let identifier = dictionary["id"] as? String ?? ""
+    let title = dictionary["title"] as? String ?? ""
+    var attributes: UIMenuElement.Attributes = []
+
+    if inheritedDisabled || (dictionary["disabled"] as? Bool ?? false) {
+      attributes.insert(.disabled)
+    }
+    if inheritedDestructive || (dictionary["destructive"] as? Bool ?? false) {
+      attributes.insert(.destructive)
+    }
+    if dictionary["hidden"] as? Bool ?? false {
+      attributes.insert(.hidden)
+    }
+    if dictionary["keepOpen"] as? Bool ?? false {
+      attributes.insert(.keepsMenuPresented)
+    }
+
+    return UIAction(
+      title: title,
+      subtitle: nonEmptyString(dictionary["subtitle"]),
+      image: image(from: dictionary),
+      identifier: nil,
+      discoverabilityTitle: nil,
+      attributes: attributes,
+      state: state(from: dictionary)
+    ) { [weak delegate] _ in
+      delegate?.onActionPress(id: identifier, title: title)
+    }
+  }
+
+  private func buildSubmenu(
+    from dictionary: [String: Any],
+    inheritedDestructive: Bool,
+    inheritedDisabled: Bool
+  ) -> UIMenuElement? {
+    let isDestructive =
+      inheritedDestructive || (dictionary["destructive"] as? Bool ?? false)
+    let isDisabled =
+      inheritedDisabled || (dictionary["disabled"] as? Bool ?? false)
+    let isInline = dictionary["displayInline"] as? Bool ?? false
+
+    // UIKit doesn't expose disabled/hidden attributes on UIMenu. A disabled
+    // hierarchical submenu is therefore represented by a disabled UIAction;
+    // inline submenu children can be disabled individually.
+    if isDisabled && !isInline {
+      var attributes: UIMenuElement.Attributes = [.disabled]
+      if isDestructive {
+        attributes.insert(.destructive)
+      }
+      return UIAction(
+        title: dictionary["title"] as? String ?? "",
+        subtitle: nonEmptyString(dictionary["subtitle"]),
+        image: image(from: dictionary),
+        identifier: nil,
+        discoverabilityTitle: nil,
+        attributes: attributes,
+        state: .off
+      ) { _ in }
+    }
+
+    let children = buildChildren(
+      from: dictionaries(in: dictionary, key: "children"),
+      inheritedDestructive: isDestructive,
+      inheritedDisabled: isDisabled
+    )
+    guard !children.isEmpty else {
+      return nil
+    }
+
+    var options: UIMenu.Options = []
+    if isInline {
+      options.insert(.displayInline)
+    }
+    if isDestructive {
+      options.insert(.destructive)
+    }
+
+    return UIMenu(
+      title: dictionary["title"] as? String ?? "",
+      subtitle: nonEmptyString(dictionary["subtitle"]),
+      image: image(from: dictionary),
+      identifier: nil,
+      options: options,
+      children: children
+    )
+  }
+
+  private func image(from dictionary: [String: Any]) -> UIImage? {
+    let image: UIImage?
+    if let assetName = nonEmptyString(dictionary["icon"]),
+       let assetImage = UIImage(named: assetName) {
+      image = assetImage
+    } else if let systemName = nonEmptyString(dictionary["systemImage"]) {
+      image = UIImage(systemName: systemName)
+    } else {
+      image = nil
+    }
+
+    guard let image else {
+      return nil
+    }
+    guard let tintColor = dictionary["iconColor"].flatMap(RCTConvert.uiColor) else {
+      return image.withRenderingMode(.alwaysTemplate)
+    }
+    return image.withTintColor(tintColor, renderingMode: .alwaysOriginal)
+  }
+
+  private func state(from dictionary: [String: Any]) -> UIMenuElement.State {
+    switch dictionary["state"] as? String {
+    case "on":
+      return .on
+    case "mixed":
+      return .mixed
+    default:
+      return .off
+    }
+  }
+
+  private func dictionaries(
+    in dictionary: [String: Any],
+    key: String
+  ) -> [[String: Any]] {
+    dictionary[key] as? [[String: Any]] ?? []
+  }
+
+  private func nonEmptyString(_ value: Any?) -> String? {
+    guard let value = value as? String, !value.isEmpty else {
+      return nil
+    }
+    return value
+  }
+}

package/ios/Menu/TinyuiMenuProvider.swift

@@ -1,116 +1,182 @@
-import SwiftUI
 import UIKit
+import UIKit.UIGestureRecognizerSubclass
 
 /**
- * UIKit bridge between the Fabric `TinyuiMenuView` component and the SwiftUI
- * `TinyuiMenuSwiftUIView`. Hosts the SwiftUI view through a
- * `UIHostingController`, mirroring react-native-pager-view's `PagerViewProvider`.
- *
- * The presenting view controller is supplied by the Objective-C++ component
- * view so this file does not depend on React.
+ * UIButton-backed UIKit menu trigger used as the Fabric component's content
+ * view. UIButton owns the UIMenu presentation and its long-press interaction.
  */
-@objc public class TinyuiMenuProvider: UIView {
+@objc public final class TinyuiMenuProvider: UIButton {
   private weak var delegate: TinyuiMenuViewDelegate?
-  private var hostingController: UIHostingController<TinyuiMenuSwiftUIView>?
-  private var props = TinyuiMenuProps()
+  private weak var menuTouchGate: TinyuiMenuTouchGate?
 
-  /// Presenting view controller, resolved by the component view from its
-  /// React view controller hierarchy.
-  @objc public weak var parentViewController: UIViewController? {
+  @objc public var triggerView: UIView? {
     didSet {
-      if window != nil {
-        setupView()
+      guard oldValue !== triggerView else {
+        return
+      }
+      oldValue?.removeFromSuperview()
+      if let triggerView {
+        addSubview(triggerView)
       }
+      setNeedsLayout()
     }
   }
 
-  /// The React Native trigger view rendered as the menu's label.
-  @objc public var triggerView: UIView? {
-    didSet {
-      props.triggerView = triggerView
-    }
+  @objc public convenience init(delegate: TinyuiMenuViewDelegate) {
+    self.init(frame: .zero)
+    self.delegate = delegate
   }
 
-  /// Menu configuration passed to the SwiftUI view.
-  @objc public var menuConfig: [String: Any] = [:] {
-    didSet {
-      props.menuConfig = menuConfig
-    }
+  override public init(frame: CGRect) {
+    super.init(frame: frame)
+    configure()
   }
 
-  @objc public var title: String = "" {
-    didSet {
-      props.title = title
-    }
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    configure()
   }
 
-  @objc public var disabled: Bool = false {
-    didSet {
-      props.disabled = disabled
-    }
+  override public func didMoveToWindow() {
+    super.didMoveToWindow()
+    menuTouchGate?.presentedMenus.remove(self)
+    menuTouchGate = window.map { TinyuiMenuTouchGate.install(in: $0) }
   }
 
-  @objc public var hasPrimaryAction: Bool = false {
-    didSet {
-      props.hasPrimaryAction = hasPrimaryAction
-    }
+  override public func contextMenuInteraction(
+    _ interaction: UIContextMenuInteraction,
+    willDisplayMenuFor configuration: UIContextMenuConfiguration,
+    animator: UIContextMenuInteractionAnimating?
+  ) {
+    super.contextMenuInteraction(interaction, willDisplayMenuFor: configuration, animator: animator)
+    menuTouchGate?.presentedMenus.add(self)
   }
 
-  @objc public convenience init(delegate: TinyuiMenuViewDelegate) {
-    self.init()
-    self.delegate = delegate
+  override public func contextMenuInteraction(
+    _ interaction: UIContextMenuInteraction,
+    willEndFor configuration: UIContextMenuConfiguration,
+    animator: UIContextMenuInteractionAnimating?
+  ) {
+    super.contextMenuInteraction(interaction, willEndFor: configuration, animator: animator)
+    // The dismissal touch has already been filtered. New touches during the
+    // closing animation belong to the page again.
+    menuTouchGate?.presentedMenus.remove(self)
   }
 
-  override public func didMoveToWindow() {
-    super.didMoveToWindow()
-    if window != nil {
-      setupView()
+  override public func layoutSubviews() {
+    super.layoutSubviews()
+    triggerView?.frame = bounds
+    if let triggerView {
+      bringSubviewToFront(triggerView)
     }
   }
 
-  override public func layoutSubviews() {
-    super.layoutSubviews()
-    if window != nil {
-      setupView()
+  override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+    guard !isHidden, alpha > 0.01, isEnabled, isUserInteractionEnabled,
+          self.point(inside: point, with: event) else {
+      return nil
     }
+    return self
+  }
+
+  private func configure() {
+    backgroundColor = .clear
+    showsMenuAsPrimaryAction = true
   }
 
-  private func setupView() {
-    if hostingController != nil {
-      syncParentViewController()
+  @objc public func openMenu() {
+    guard isEnabled, isUserInteractionEnabled, !isHidden, alpha > 0.01,
+          window != nil, !bounds.isEmpty, menu != nil else {
       return
     }
+    if #available(iOS 17.4, *) {
+      performPrimaryAction()
+    }
+  }
 
-    guard let parentViewController else {
+  /** Applies one complete Fabric props snapshot before rebuilding the menu. */
+  @objc public func update(
+    menuConfig: [String: Any],
+    title: String,
+    disabled: Bool
+  ) {
+    isEnabled = !disabled
+    isUserInteractionEnabled = !disabled
+
+    // UIButton enables its context menu interaction whenever a menu is assigned,
+    // independently of the control's enabled state. Remove it while disabled
+    // to block both primary-action and long-press presentation.
+    if disabled {
+      contextMenuInteraction?.dismissMenu()
+      menu = nil
       return
     }
 
-    let hostingController = UIHostingController(
-      rootView: TinyuiMenuSwiftUIView(props: props, delegate: delegate)
+    menu = TinyuiMenuBuilder(delegate: delegate).buildMenu(
+      title: title,
+      config: menuConfig
     )
-    self.hostingController = hostingController
-
-    parentViewController.addChild(hostingController)
-    hostingController.view.backgroundColor = .clear
-    addSubview(hostingController.view)
-    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
-    hostingController.view.pinEdges(to: self)
-    hostingController.didMove(toParent: parentViewController)
-  }
-
-  /// Keeps the hosting controller attached to the current view controller.
-  private func syncParentViewController(to parentViewController: UIViewController? = nil) {
-    guard
-      let hostingController,
-      let parentViewController = parentViewController ?? self.parentViewController,
-      hostingController.parent !== parentViewController
-    else {
+  }
+}
+
+/**
+ * Uses the early-event filtering approach from Expo's SystemMenuTouchGate:
+ * https://github.com/expo/expo/pull/49775
+ * TinyUI tracks its own menus through public UIButton lifecycle callbacks.
+ */
+final class TinyuiMenuTouchGate: UIGestureRecognizer, UIGestureRecognizerDelegate {
+  let presentedMenus = NSHashTable<TinyuiMenuProvider>.weakObjects()
+  private static let surfaceTouchHandlerClass = NSClassFromString("RCTSurfaceTouchHandler")
+
+  init() {
+    super.init(target: nil, action: nil)
+    cancelsTouchesInView = false
+    delaysTouchesBegan = false
+    delaysTouchesEnded = false
+    delegate = self
+  }
+
+  static func install(in window: UIWindow) -> TinyuiMenuTouchGate {
+    if let gate = window.gestureRecognizers?.first(where: { $0 is TinyuiMenuTouchGate })
+      as? TinyuiMenuTouchGate {
+      return gate
+    }
+    let gate = TinyuiMenuTouchGate()
+    window.addGestureRecognizer(gate)
+    return gate
+  }
+
+  private func ignoreReactTouches(_ touches: Set<UITouch>, event: UIEvent) {
+    guard let window = view as? UIWindow,
+          presentedMenus.allObjects.contains(where: { $0.window === window }),
+          let handlerClass = Self.surfaceTouchHandlerClass else {
       return
     }
 
-    hostingController.willMove(toParent: nil)
-    hostingController.removeFromParent()
-    parentViewController.addChild(hostingController)
-    hostingController.didMove(toParent: parentViewController)
+    for touch in touches where touch.phase == .began {
+      var ancestor = touch.view
+      while let current = ancestor {
+        for handler in current.gestureRecognizers ?? [] where handler.isKind(of: handlerClass) {
+          handler.ignore(touch, for: event)
+        }
+        ancestor = current.superview
+      }
+    }
+  }
+
+  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive event: UIEvent) -> Bool {
+    // Filtering in touchesBegan alone is too late: RN may already have sent
+    // touchStart/onPressIn to JS. UIKit asks this delegate before delivery.
+    if let touches = event.allTouches {
+      ignoreReactTouches(touches, event: event)
+    }
+    return true
+  }
+
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) {
+    super.touchesBegan(touches, with: event)
+    // Fallback for delivery orders where RN sees the touch first.
+    ignoreReactTouches(touches, event: event)
+    state = .failed
   }
 }