react-native-platform-components 1.3.0 → 1.4.0

package/ios/PCButtonGroup.mm

@@ -0,0 +1,256 @@
+// PCButtonGroup.mm
+
+#import "PCButtonGroup.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTFont.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+#import <react/renderer/core/LayoutPrimitives.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+#import "PCButtonGroupComponentDescriptors-custom.h"
+#import "PCButtonGroupShadowNode-custom.h"
+#import "PCButtonGroupState-custom.h"
+
+using namespace facebook::react;
+
+namespace {
+static inline bool ButtonsEqual(
+    const std::vector<PCButtonGroupButtonsStruct> &a,
+    const std::vector<PCButtonGroupButtonsStruct> &b) {
+  if (a.size() != b.size()) return false;
+  for (size_t i = 0; i < a.size(); i++) {
+    if (a[i].label != b[i].label) return false;
+    if (a[i].value != b[i].value) return false;
+    if (a[i].disabled != b[i].disabled) return false;
+    if (a[i].iconType != b[i].iconType) return false;
+    if (a[i].iconName != b[i].iconName) return false;
+    if (a[i].iconUri != b[i].iconUri) return false;
+    if (a[i].iconScale != b[i].iconScale) return false;
+    if (a[i].iconTinted != b[i].iconTinted) return false;
+    if (a[i].accessibilityLabel != b[i].accessibilityLabel) return false;
+  }
+  return true;
+}
+
+static inline NSString *NSStringFromStd(const std::string &s, NSString *fallback) {
+  return s.empty() ? fallback : [NSString stringWithUTF8String:s.c_str()];
+}
+
+static inline NSArray<NSString *> *NSArrayFromStd(const std::vector<std::string> &values) {
+  NSMutableArray<NSString *> *arr = [NSMutableArray arrayWithCapacity:values.size()];
+  for (const auto &value : values) {
+    [arr addObject:NSStringFromStd(value, @"")];
+  }
+  return arr;
+}
+
+static inline bool LabelStyleEqual(
+    const PCButtonGroupLabelStyleStruct &a,
+    const PCButtonGroupLabelStyleStruct &b) {
+  return a.fontFamily == b.fontFamily && a.fontSize == b.fontSize &&
+         a.fontWeight == b.fontWeight && a.fontStyle == b.fontStyle;
+}
+
+/// Builds the label font from RN-style font props, or nil when every field is
+/// unset so the buttons keep the configuration's font.
+static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
+  if (style.fontFamily.empty() && style.fontSize <= 0 &&
+      style.fontWeight.empty() && style.fontStyle.empty()) {
+    return nil;
+  }
+  return [RCTFont updateFont:[UIFont preferredFontForTextStyle:UIFontTextStyleBody]
+                  withFamily:NSStringFromStd(style.fontFamily, nil)
+                        size:style.fontSize > 0 ? @(style.fontSize) : nil
+                      weight:NSStringFromStd(style.fontWeight, nil)
+                       style:NSStringFromStd(style.fontStyle, nil)
+                     variant:nil
+             scaleMultiplier:1.0];
+}
+} // namespace
+
+@interface PCButtonGroup ()
+
+- (void)updateMeasurements;
+
+@end
+
+@implementation PCButtonGroup {
+  PCButtonGroupView *_view;
+  MeasuringPCButtonGroupShadowNode::ConcreteState::Shared _state;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<MeasuringPCButtonGroupComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _view = [PCButtonGroupView new];
+    self.contentView = _view;
+
+    __weak __typeof(self) weakSelf = self;
+
+    _view.onPress = ^(NSInteger index, NSString *value) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonGroupEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCButtonGroupEventEmitter::OnButtonPress payload = {
+          .index = (int)index,
+          .value = value.UTF8String,
+      };
+      eventEmitter->onButtonPress(payload);
+    };
+
+    _view.onSelectionChange = ^(NSArray<NSString *> *values) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonGroupEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      PCButtonGroupEventEmitter::OnGroupSelectionChange payload;
+      for (NSString *value in values) {
+        payload.values.push_back(value.UTF8String);
+      }
+      eventEmitter->onGroupSelectionChange(payload);
+    };
+
+    _view.onNeedsRemeasure = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+      [strongSelf updateMeasurements];
+    };
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps = *std::static_pointer_cast<const PCButtonGroupProps>(props);
+  const auto prevProps = std::static_pointer_cast<const PCButtonGroupProps>(oldProps);
+
+  // buttons: [{label, value, disabled, iconType, iconName, iconUri, iconScale,
+  //            iconTinted, accessibilityLabel}]
+  if (!prevProps || !ButtonsEqual(newProps.buttons, prevProps->buttons)) {
+    NSMutableArray *arr = [NSMutableArray new];
+    for (const auto &button : newProps.buttons) {
+      [arr addObject:@{
+        @"label": NSStringFromStd(button.label, @""),
+        @"value": NSStringFromStd(button.value, @""),
+        @"disabled": NSStringFromStd(button.disabled, @"enabled"),
+        @"iconType": NSStringFromStd(button.iconType, @""),
+        @"iconName": NSStringFromStd(button.iconName, @""),
+        @"iconUri": NSStringFromStd(button.iconUri, @""),
+        @"iconScale": @(button.iconScale),
+        @"iconTinted": NSStringFromStd(button.iconTinted, @"true"),
+        @"accessibilityLabel": NSStringFromStd(button.accessibilityLabel, @""),
+      }];
+    }
+    _view.buttons = arr;
+  }
+
+  if (!prevProps || newProps.variant != prevProps->variant) {
+    _view.variant = NSStringFromStd(newProps.variant, @"outlined");
+  }
+
+  if (!prevProps || newProps.size != prevProps->size) {
+    _view.size = NSStringFromStd(newProps.size, @"small");
+  }
+
+  if (!prevProps || newProps.shape != prevProps->shape) {
+    _view.shape = NSStringFromStd(newProps.shape, @"");
+  }
+
+  if (!prevProps || newProps.connected != prevProps->connected) {
+    _view.connected = (newProps.connected == "true");
+  }
+
+  if (!prevProps || newProps.spacing != prevProps->spacing) {
+    _view.spacing = newProps.spacing;
+  }
+
+  if (!prevProps || newProps.selection != prevProps->selection) {
+    _view.selection = NSStringFromStd(newProps.selection, @"none");
+  }
+
+  if (!prevProps || newProps.selectedValues != prevProps->selectedValues) {
+    _view.selectedValues = NSArrayFromStd(newProps.selectedValues);
+  }
+
+  if (!prevProps || newProps.selectionRequired != prevProps->selectionRequired) {
+    _view.selectionRequired = (newProps.selectionRequired == "true");
+  }
+
+  if (!prevProps || newProps.interactivity != prevProps->interactivity) {
+    _view.interactivity = NSStringFromStd(newProps.interactivity, @"enabled");
+  }
+
+  // Colors arrive as SharedColor (already processed by React Native)
+  if (!prevProps || newProps.color != prevProps->color) {
+    _view.containerColor = RCTUIColorFromSharedColor(newProps.color);
+  }
+
+  if (!prevProps || newProps.foregroundColor != prevProps->foregroundColor) {
+    _view.foregroundColor = RCTUIColorFromSharedColor(newProps.foregroundColor);
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}
+  if (!prevProps || !LabelStyleEqual(newProps.labelStyle, prevProps->labelStyle)) {
+    _view.labelFont = FontFromLabelStyle(newProps.labelStyle);
+  }
+
+  // androidRippleColor / androidStrokeColor / android: Android only
+
+  [super updateProps:props oldProps:oldProps];
+
+  // Update measurements when props change that affect layout
+  [self updateMeasurements];
+}
+
+#pragma mark - State (Measuring)
+
+- (void)updateState:(const State::Shared &)state
+           oldState:(const State::Shared &)oldState {
+  _state = std::static_pointer_cast<const MeasuringPCButtonGroupShadowNode::ConcreteState>(state);
+
+  if (oldState == nullptr) {
+    // First time: compute initial size.
+    [self updateMeasurements];
+  }
+
+  [super updateState:state oldState:oldState];
+}
+
+- (void)updateMeasurements {
+  if (_state == nullptr)
+    return;
+
+  // The group's natural size; Yoga clamps it to the available width
+  CGSize size = [_view sizeForLayoutWithConstrainedTo:CGSizeZero];
+
+  PCButtonGroupStateFrameSize next;
+  next.frameSize = {(Float)size.width, (Float)size.height};
+  _state->updateState(std::move(next));
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCButtonGroupCls(void) {
+  return PCButtonGroup.class;
+}

package/ios/PCButtonGroupView.swift

@@ -0,0 +1,254 @@
+import UIKit
+
+/// A row of native buttons (`UIButton` with configurations), with optional
+/// single / multiple selection shown through the buttons' selected state.
+@objcMembers
+public final class PCButtonGroupView: UIView {
+    private struct Item {
+        let label: String
+        let value: String
+        let disabled: Bool
+        let icon: PCButtonSupport.Icon
+        let accessibilityLabel: String
+
+        /// What VoiceOver announces for the button.
+        var spokenLabel: String { accessibilityLabel.isEmpty ? label : accessibilityLabel }
+    }
+
+    // MARK: - Props (set from ObjC++)
+
+    /// ObjC++ sets this as an array of dictionaries; see `rebuild` for keys.
+    public var buttons: [Any] = [] { didSet { rebuild() } }
+
+    /// "filled" | "tonal" | "outlined" | "text" | "elevated"
+    public var variant: String = "outlined" {
+        didSet { if oldValue != variant { applyConfigurations() } }
+    }
+
+    /// "xsmall" | "small" | "medium" | "large" | "xlarge"
+    public var size: String = "small" {
+        didSet { if oldValue != size { applyConfigurations() } }
+    }
+
+    /// "" (UIKit default) | "round" | "square"
+    public var shape: String = "" {
+        didSet { if oldValue != shape { applyConfigurations() } }
+    }
+
+    /// Connected groups sit closer together (a hairline gap)
+    public var connected: Bool = false {
+        didSet { if oldValue != connected { applyLayout() } }
+    }
+
+    /// Gap between buttons in points; negative means the default
+    public var spacing: CGFloat = -1 {
+        didSet { if oldValue != spacing { applyLayout() } }
+    }
+
+    /// "none" | "single" | "multiple"
+    public var selection: String = "none" {
+        didSet { if oldValue != selection { applyConfigurations() } }
+    }
+
+    /// Controlled selection by value
+    public var selectedValues: [String] = [] {
+        didSet { if oldValue != selectedValues { applyConfigurations() } }
+    }
+
+    /// Whether at least one button must stay selected
+    public var selectionRequired: Bool = false
+
+    /// "enabled" | "disabled"
+    public var interactivity: String = "enabled" {
+        didSet { updateEnabled() }
+    }
+
+    /// Container color; nil keeps the configuration's color
+    public var containerColor: UIColor? {
+        didSet { applyConfigurations() }
+    }
+
+    /// Label and icon color; nil keeps the configuration's color
+    public var foregroundColor: UIColor? {
+        didSet { applyConfigurations() }
+    }
+
+    /// Label font; nil keeps the configuration's font
+    public var labelFont: UIFont? {
+        didSet { applyConfigurations() }
+    }
+
+    // MARK: - Events back to ObjC++
+
+    public var onPress: ((Int, String) -> Void)? // (index, value)
+    public var onSelectionChange: (([String]) -> Void)?
+
+    /// Called when content changed after layout (an icon finished loading),
+    /// so the Fabric measurement can be refreshed.
+    public var onNeedsRemeasure: (() -> Void)?
+
+    // MARK: - Internal
+
+    private let stack = UIStackView()
+    private var items: [Item] = []
+    private var uiButtons: [UIButton] = []
+    private var iconImages: [UIImage?] = []
+
+    /// Bumped on every rebuild so late image loads can't touch stale buttons.
+    private var rebuildGeneration = 0
+
+    // MARK: - Init
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setup()
+    }
+
+    private func setup() {
+        stack.axis = .horizontal
+        stack.alignment = .fill
+        stack.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(stack)
+
+        NSLayoutConstraint.activate([
+            stack.topAnchor.constraint(equalTo: topAnchor),
+            stack.bottomAnchor.constraint(equalTo: bottomAnchor),
+            stack.leadingAnchor.constraint(equalTo: leadingAnchor),
+            stack.trailingAnchor.constraint(equalTo: trailingAnchor),
+        ])
+
+        applyLayout()
+    }
+
+    // MARK: - Props handling
+
+    private func rebuild() {
+        items = buttons.compactMap { any in
+            guard let dict = any as? [String: Any] else { return nil }
+            return Item(
+                label: (dict["label"] as? String) ?? "",
+                value: (dict["value"] as? String) ?? "",
+                disabled: (dict["disabled"] as? String) == "disabled",
+                icon: PCButtonSupport.Icon(dictionary: dict),
+                accessibilityLabel: (dict["accessibilityLabel"] as? String) ?? ""
+            )
+        }
+
+        rebuildGeneration += 1
+        let generation = rebuildGeneration
+
+        uiButtons.forEach { $0.removeFromSuperview() }
+        uiButtons = []
+        iconImages = Array(repeating: nil, count: items.count)
+
+        for (index, item) in items.enumerated() {
+            let button = UIButton(type: .system)
+            button.tag = index
+            button.addTarget(self, action: #selector(tapped(_:)), for: .touchUpInside)
+            stack.addArrangedSubview(button)
+            uiButtons.append(button)
+
+            iconImages[index] = PCButtonSupport.image(for: item.icon) { [weak self] image in
+                guard let self, self.rebuildGeneration == generation, index < self.iconImages.count else { return }
+                self.iconImages[index] = image
+                self.applyConfigurations()
+                self.onNeedsRemeasure?()
+            }
+        }
+
+        applyConfigurations()
+        updateEnabled()
+    }
+
+    private func applyLayout() {
+        stack.spacing = spacing >= 0 ? spacing : (connected ? 2 : 8)
+        // Buttons size to their content; extra or missing width is shared in
+        // proportion when the group is stretched or squeezed.
+        stack.distribution = .fillProportionally
+        invalidateIntrinsicContentSize()
+    }
+
+    private func applyConfigurations() {
+        for (index, button) in uiButtons.enumerated() where index < items.count {
+            let item = items[index]
+            let selected = selection != "none" && selectedValues.contains(item.value)
+            button.isSelected = selected
+            button.configuration = PCButtonSupport.makeConfiguration(
+                variant: variant,
+                selected: selected,
+                size: size,
+                shape: shape,
+                label: item.label,
+                image: iconImages[index],
+                containerColor: containerColor,
+                foregroundColor: foregroundColor,
+                font: labelFont
+            )
+            button.accessibilityLabel = item.spokenLabel.isEmpty ? nil : item.spokenLabel
+        }
+        invalidateIntrinsicContentSize()
+    }
+
+    private func updateEnabled() {
+        let enabled = interactivity != "disabled"
+        alpha = enabled ? 1.0 : 0.5
+        for (index, button) in uiButtons.enumerated() where index < items.count {
+            button.isEnabled = enabled && !items[index].disabled
+        }
+    }
+
+    // MARK: - Selection
+
+    @objc private func tapped(_ sender: UIButton) {
+        let index = sender.tag
+        guard index >= 0, index < items.count else { return }
+        let item = items[index]
+        onPress?(index, item.value)
+
+        guard selection != "none", let next = nextSelection(tapping: item.value) else { return }
+        selectedValues = next
+        onSelectionChange?(next)
+    }
+
+    /// The selection after a tap, or nil when the tap changes nothing.
+    private func nextSelection(tapping value: String) -> [String]? {
+        let isSelected = selectedValues.contains(value)
+        if selection == "single" {
+            if isSelected {
+                return selectionRequired ? nil : []
+            }
+            return [value]
+        }
+
+        // multiple
+        if isSelected {
+            if selectionRequired && selectedValues.count == 1 { return nil }
+            return selectedValues.filter { $0 != value }
+        }
+        var chosen = Set(selectedValues)
+        chosen.insert(value)
+        // Report in button order
+        return items.map(\.value).filter { chosen.contains($0) }
+    }
+
+    // MARK: - Sizing
+
+    public override var intrinsicContentSize: CGSize {
+        stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+    }
+
+    public override func sizeThatFits(_ size: CGSize) -> CGSize {
+        stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+    }
+
+    /// Called by the measuring pipeline to get the size for Yoga layout.
+    @objc public func sizeForLayout(withConstrainedTo constrainedSize: CGSize) -> CGSize {
+        let fitted = stack.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+        return CGSize(width: ceil(fitted.width), height: ceil(fitted.height))
+    }
+}

package/ios/PCButtonSupport.swift

@@ -0,0 +1,141 @@
+import UIKit
+
+/// UIButton configuration and icon handling shared by PCButtonView and
+/// PCButtonGroupView.
+enum PCButtonSupport {
+    struct Icon: Equatable {
+        /// "", "sfSymbol", "drawable" (ignored on iOS) or "image"
+        var type: String = ""
+        var name: String = ""
+        var uri: String = ""
+        var scale: CGFloat = 1
+        var tinted: Bool = true
+
+        var isPresent: Bool { type == "sfSymbol" || type == "image" }
+
+        static let none = Icon()
+
+        init() {}
+
+        init(type: String, name: String, uri: String, scale: CGFloat, tinted: Bool) {
+            self.type = type
+            self.name = name
+            self.uri = uri
+            self.scale = scale > 0 ? scale : 1
+            self.tinted = tinted
+        }
+
+        /// Reads the flat icon fields (iconType, iconName, ...) bridged as a dictionary.
+        init(dictionary: [String: Any]) {
+            let scale = (dictionary["iconScale"] as? NSNumber).map { CGFloat(truncating: $0) } ?? 1
+            self.init(
+                type: (dictionary["iconType"] as? String) ?? "",
+                name: (dictionary["iconName"] as? String) ?? "",
+                uri: (dictionary["iconUri"] as? String) ?? "",
+                scale: scale,
+                tinted: (dictionary["iconTinted"] as? String) != "false"
+            )
+        }
+    }
+
+    /// The configuration for a variant. A selected button (single / multiple
+    /// selection in a group) uses the filled style, as UIKit's own toggle
+    /// buttons do.
+    ///
+    /// | Variant  | Configuration |
+    /// | filled   | .filled()     |
+    /// | tonal    | .tinted()     |
+    /// | outlined | .bordered()   |
+    /// | text     | .plain()      |
+    /// | elevated | .gray()       |
+    static func configuration(variant: String, selected: Bool) -> UIButton.Configuration {
+        if selected { return .filled() }
+        switch variant {
+        case "tonal": return .tinted()
+        case "outlined": return .bordered()
+        case "text": return .plain()
+        case "elevated": return .gray()
+        default: return .filled()
+        }
+    }
+
+    /// Material's five sizes onto UIKit's four.
+    static func buttonSize(_ size: String) -> UIButton.Configuration.Size {
+        switch size {
+        case "xsmall": return .mini
+        case "medium": return .medium
+        case "large", "xlarge": return .large
+        default: return .small
+        }
+    }
+
+    /// `nil` keeps UIKit's dynamic corner style.
+    static func cornerStyle(_ shape: String) -> UIButton.Configuration.CornerStyle? {
+        switch shape {
+        case "round": return .capsule
+        case "square": return .large
+        default: return nil
+        }
+    }
+
+    static func makeConfiguration(
+        variant: String,
+        selected: Bool,
+        size: String,
+        shape: String,
+        label: String,
+        image: UIImage?,
+        containerColor: UIColor?,
+        foregroundColor: UIColor?,
+        font: UIFont?
+    ) -> UIButton.Configuration {
+        var config = configuration(variant: variant, selected: selected)
+        config.title = label.isEmpty ? nil : label
+        config.image = image
+        config.imagePadding = (image != nil && !label.isEmpty) ? 8 : 0
+        config.buttonSize = buttonSize(size)
+        config.titleLineBreakMode = .byTruncatingTail
+        if let corner = cornerStyle(shape) {
+            config.cornerStyle = corner
+        }
+        if let containerColor {
+            config.baseBackgroundColor = containerColor
+        }
+        if let foregroundColor {
+            config.baseForegroundColor = foregroundColor
+        }
+        if let font {
+            config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
+                var outgoing = incoming
+                outgoing.font = font
+                return outgoing
+            }
+        }
+        return config
+    }
+
+    /// Resolves the icon's image. SF Symbols resolve synchronously; images
+    /// that are still loading return nil and call `completion` on the main
+    /// thread once they arrive.
+    static func image(for icon: Icon, completion: @escaping (UIImage?) -> Void) -> UIImage? {
+        switch icon.type {
+        case "sfSymbol":
+            return UIImage(systemName: icon.name).map { decorate($0, tinted: icon.tinted) }
+
+        case "image":
+            let cached = PCImageLoader.shared.image(uri: icon.uri, scale: icon.scale) { image in
+                completion(image.map { decorate($0, tinted: icon.tinted) })
+            }
+            return cached.map { decorate($0, tinted: icon.tinted) }
+
+        default:
+            return nil
+        }
+    }
+
+    /// Template images take the button's foreground color; untinted images
+    /// keep their own colors.
+    static func decorate(_ image: UIImage, tinted: Bool) -> UIImage {
+        image.withRenderingMode(tinted ? .alwaysTemplate : .alwaysOriginal)
+    }
+}