feat(Button): allow usage of children inside Buttons

Author: mgcrea

ios/SwiftUINode.swift

@@ -75,7 +75,7 @@ private struct NodeWrapper: Decodable {
     case "Section":
       node = try GenericNode<SectionProps>(from: decoder)
     case "Group":
-      node = try GenericNode<EmptyProps>(from: decoder) // No props for Group
+      node = try GenericNode<GroupProps>(from: decoder)
     case "HStack":
       node = try GenericNode<HStackProps>(from: decoder)
     case "VStack":

ios/SwiftUIRootView.swift

@@ -35,14 +35,14 @@ public class SwiftUIRootView: SwiftUIContainerView {
 
   private func buildSwiftUIView(from node: any SwiftUINode) -> AnyView {
     switch node {
-    case let group as GenericNode<EmptyProps>:
-      AnyView(Group {
+    case let group as GenericNode<GroupProps>:
+      AnyView(GroupView(props: group.props, content: {
         if let children = group.children {
           ForEach(children, id: \.id) { child in
             self.buildSwiftUIView(from: child)
           }
         }
-      })
+      }))
     case let hstack as GenericNode<HStackProps>:
       AnyView(HStackView(props: hstack.props, content: {
         if let children = hstack.children {
@@ -99,6 +99,14 @@ public class SwiftUIRootView: SwiftUIContainerView {
           }
         }
       }))
+    case let button as GenericNode<ButtonProps>:
+      AnyView(ButtonView(props: button.props, content: {
+        if let children = button.children {
+          ForEach(children, id: \.id) { child in
+            self.buildSwiftUIView(from: child)
+          }
+        }
+      }))
     case let text as GenericNode<TextProps>:
       AnyView(TextView(props: text.props))
     case let textField as GenericNode<TextFieldProps>:
@@ -109,8 +117,6 @@ public class SwiftUIRootView: SwiftUIContainerView {
       AnyView(DatePickerView(props: datePicker.props))
     case let stepper as GenericNode<StepperProps>:
       AnyView(StepperView(props: stepper.props))
-    case let button as GenericNode<ButtonProps>:
-      AnyView(ButtonView(props: button.props))
     case let toggle as GenericNode<ToggleProps>:
       AnyView(ToggleView(props: toggle.props))
     case let slider as GenericNode<SliderProps>:
@@ -176,9 +182,9 @@ public class SwiftUIRootView: SwiftUIContainerView {
         let updatedProps = try decoder.decode(SectionProps.self, from: updatedPropsData)
         section.props.merge(from: updatedProps)
 
-      case let group as GenericNode<EmptyProps>:
-        // GroupNode has no props to merge
-        print("GroupNode has no props to update for id \(identifier)")
+      case let group as GenericNode<GroupProps>:
+        let updatedProps = try decoder.decode(GroupProps.self, from: updatedPropsData)
+        group.props.merge(from: updatedProps)
 
       case let hstack as GenericNode<HStackProps>:
         let updatedProps = try decoder.decode(HStackProps.self, from: updatedPropsData)

ios/components/Button/ButtonProps.swift

@@ -1,7 +1,7 @@
 import SwiftUI
 
 public final class ButtonProps: ObservableObject, Decodable {
-  @Published var title: String = "Button"
+  @Published var title: String? = nil
   @Published var buttonStyle: ButtonStyle = .default
   @Published var disabled: Bool = false
   @Published public var style: StyleProps?
@@ -15,6 +15,7 @@ public final class ButtonProps: ObservableObject, Decodable {
     case borderedProminent
     case borderless
     // Custom
+    case scale
     case subtle
     case picker
 
@@ -34,6 +35,8 @@ public final class ButtonProps: ObservableObject, Decodable {
       // Custom
       case .subtle:
         view.buttonStyle(SubtleOpacityButtonStyle())
+      case .scale:
+        view.buttonStyle(ScaleButtonStyle())
       case .picker:
         view.buttonStyle(PickerButtonStyle())
       }
@@ -46,7 +49,7 @@ public final class ButtonProps: ObservableObject, Decodable {
 
   public required init(from decoder: Decoder) throws {
     let container = try decoder.container(keyedBy: CodingKeys.self)
-    title = try container.decodeIfPresent(String.self, forKey: .title) ?? ""
+    title = try container.decodeIfPresent(String.self, forKey: .title)
     if let buttonStyleString = try container.decodeIfPresent(String.self, forKey: .buttonStyle), let style = ButtonStyle(rawValue: buttonStyleString) {
       buttonStyle = style
     } else {
@@ -83,3 +86,14 @@ struct SubtleOpacityButtonStyle: ButtonStyle {
       .animation(configuration.isPressed ? .linear(duration: 0.05) : .easeInOut(duration: 0.25), value: configuration.isPressed)
   }
 }
+
+struct ScaleButtonStyle: ButtonStyle {
+  var normalScale: Double = 1.0
+  var pressedScale: Double = 0.95
+
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+      .scaleEffect(configuration.isPressed ? pressedScale : normalScale)
+      .animation(.spring(response: 0.3, dampingFraction: 0.6), value: configuration.isPressed)
+  }
+}

ios/components/Button/ButtonView.swift

@@ -1,15 +1,30 @@
 import SwiftUI
 
-public struct ButtonView: View {
+public struct ButtonView<Content: View>: View {
   @ObservedObject public var props: ButtonProps
+  let content: () -> Content
+
+  public init(props: ButtonProps, @ViewBuilder content: @escaping () -> Content) {
+    self.props = props
+    self.content = content
+  }
 
   public var body: some View {
-    props.buttonStyle.applyStyle(
-      Button(props.title) {
-        props.onPress?()
+    if props.title != nil {
+      return AnyView(props.buttonStyle.applyStyle(
+        Button(props.title!, role: nil, action: props.onPress ?? {})
+          .disabled(props.disabled)
+          .applyStyles(props.style)
+          .contentShape(Rectangle())
+      ))
+    }
+    return AnyView(props.buttonStyle.applyStyle(
+      Button(role: nil, action: props.onPress ?? {}) {
+        content()
       }
       .disabled(props.disabled)
       .applyStyles(props.style)
-    )
+      .contentShape(Rectangle())
+    ))
   }
 }