react-native-tinyui 0.4.0 → 1.0.0

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,82 @@
-import SwiftUI
 import UIKit
 
 /**
- * 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()
 
-  /// Presenting view controller, resolved by the component view from its
-  /// React view controller hierarchy.
-  @objc public weak var parentViewController: UIViewController? {
-    didSet {
-      if window != nil {
-        setupView()
-      }
-    }
-  }
-
-  /// The React Native trigger view rendered as the menu's label.
   @objc public var triggerView: UIView? {
     didSet {
-      props.triggerView = triggerView
-    }
-  }
-
-  /// JSON menu configuration passed to the SwiftUI view.
-  @objc public var menuConfig: String = "{}" {
-    didSet {
-      props.menuConfig = menuConfig
-    }
-  }
-
-  @objc public var title: String = "" {
-    didSet {
-      props.title = title
-    }
-  }
-
-  @objc public var disabled: Bool = false {
-    didSet {
-      props.disabled = disabled
-    }
-  }
-
-  @objc public var hasPrimaryAction: Bool = false {
-    didSet {
-      props.hasPrimaryAction = hasPrimaryAction
+      guard oldValue !== triggerView else {
+        return
+      }
+      oldValue?.removeFromSuperview()
+      if let triggerView {
+        addSubview(triggerView)
+      }
+      setNeedsLayout()
     }
   }
 
   @objc public convenience init(delegate: TinyuiMenuViewDelegate) {
-    self.init()
+    self.init(frame: .zero)
     self.delegate = delegate
   }
 
-  override public func didMoveToWindow() {
-    super.didMoveToWindow()
-    if window != nil {
-      setupView()
-    }
+  override public init(frame: CGRect) {
+    super.init(frame: frame)
+    configure()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    configure()
   }
 
   override public func layoutSubviews() {
     super.layoutSubviews()
-    if window != nil {
-      setupView()
+    triggerView?.frame = bounds
+    if let triggerView {
+      bringSubviewToFront(triggerView)
     }
   }
 
-  private func setupView() {
-    if hostingController != nil {
-      syncParentViewController()
-      return
-    }
-
-    guard let parentViewController else {
-      return
+  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
+  }
 
-    let hostingController = UIHostingController(
-      rootView: TinyuiMenuSwiftUIView(props: props, delegate: delegate)
-    )
-    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)
+  private func configure() {
+    backgroundColor = .clear
+    showsMenuAsPrimaryAction = true
   }
 
-  /// 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 {
+  /** 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
     }
 
-    hostingController.willMove(toParent: nil)
-    hostingController.removeFromParent()
-    parentViewController.addChild(hostingController)
-    hostingController.didMove(toParent: parentViewController)
+    menu = TinyuiMenuBuilder(delegate: delegate).buildMenu(
+      title: title,
+      config: menuConfig
+    )
   }
 }

package/ios/Menu/TinyuiMenuView.mm

@@ -3,7 +3,7 @@
 #import "TinyuiMenuView.h"
 
 #import <React/RCTConversions.h>
-#import <React/UIView+React.h>
+#import <react/utils/FollyConvert.h>
 
 #import <react/renderer/components/TinyuiSpec/ComponentDescriptors.h>
 #import <react/renderer/components/TinyuiSpec/EventEmitters.h>
@@ -43,24 +43,15 @@ using namespace facebook::react;
   return self;
 }
 
-- (void)didMoveToWindow
-{
-  [super didMoveToWindow];
-  if (self.window != nil) {
-    _menuProvider.parentViewController = [self reactViewController];
-  }
-}
-
 #pragma mark - React lifecycle
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
                           index:(NSInteger)index
 {
-  // TinyuiMenuView renders its trigger as a child; we hand it to the
-  // provider, which uses it as the SwiftUI `Menu` label.
+  // TinyuiMenuView renders its trigger as a child; the UIButton-backed
+  // provider uses it as the menu's visual content.
   _triggerView = childComponentView;
   _menuProvider.triggerView = childComponentView;
-  [_menuProvider addSubview:childComponentView];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView
@@ -81,17 +72,12 @@ using namespace facebook::react;
   const auto &oldMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(_props);
   const auto &newMenuProps = *std::static_pointer_cast<TinyuiMenuViewProps const>(props);
 
-  if (oldMenuProps.menuConfig != newMenuProps.menuConfig) {
-    _menuProvider.menuConfig = RCTNSStringFromString(newMenuProps.menuConfig);
-  }
-  if (oldMenuProps.title != newMenuProps.title) {
-    _menuProvider.title = RCTNSStringFromString(newMenuProps.title);
-  }
-  if (oldMenuProps.hasPrimaryAction != newMenuProps.hasPrimaryAction) {
-    _menuProvider.hasPrimaryAction = newMenuProps.hasPrimaryAction;
-  }
-  if (oldMenuProps.disabled != newMenuProps.disabled) {
-    _menuProvider.disabled = newMenuProps.disabled;
+  if (oldMenuProps.menuConfig != newMenuProps.menuConfig ||
+      oldMenuProps.title != newMenuProps.title ||
+      oldMenuProps.disabled != newMenuProps.disabled) {
+    [_menuProvider updateWithMenuConfig:convertFollyDynamicToId(newMenuProps.menuConfig)
+                                 title:RCTNSStringFromString(newMenuProps.title)
+                              disabled:newMenuProps.disabled];
   }
 
   [super updateProps:props oldProps:oldProps];
@@ -99,23 +85,15 @@ using namespace facebook::react;
 
 #pragma mark - TinyuiMenuViewDelegate
 
-- (void)onItemPressWithId:(NSString *)identifier
-{
-  if (_eventEmitter == nullptr) {
-    return;
-  }
-  std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
-      ->onItemPress(TinyuiMenuViewEventEmitter::OnItemPress{
-          .id = std::string(identifier.UTF8String ?: "")});
-}
-
-- (void)onPrimaryAction
+- (void)onActionPressWithId:(NSString *)identifier title:(NSString *)title
 {
   if (_eventEmitter == nullptr) {
     return;
   }
   std::static_pointer_cast<const TinyuiMenuViewEventEmitter>(_eventEmitter)
-      ->onPrimaryAction(TinyuiMenuViewEventEmitter::OnPrimaryAction{});
+      ->onActionPress(TinyuiMenuViewEventEmitter::OnActionPress{
+          .id = std::string(identifier.UTF8String ?: ""),
+          .title = std::string(title.UTF8String ?: "")});
 }
 
 @end