Add column

Author: matt-ramotar

samples/discovery/ios/ios.xcodeproj/project.xcworkspace/xcuserdata/mramotar.xcuserdatad/UserInterfaceState.xcuserstate

@@ -18,7 +18,18 @@ enum ComponentBoxUI {
         action: String?
     )
 
+    case Column(
+        id: String,
+        components: [componentbox.Component]?,
+        modifier: componentbox.Modifier?,
+        verticalArrangement: componentbox.Arrangement?,
+        horizontalAlignment: componentbox.Alignment?,
+        action: String?,
+        isLazy: Bool?
+    )
+    
     case Button(id: String, components: [componentbox.Component]?, modifier: componentbox.Modifier?, isEnabled: Bool?, action: String?, variant: String?)
+    
     case Row(
         id: String,
         components: [componentbox.Component]?,
@@ -28,6 +39,7 @@ enum ComponentBoxUI {
         action: String?,
         isLazy: Bool?
     )
+    
     case Text(id: String, modifier: componentbox.Modifier?, text: String?, color: componentbox.Color?, textStyle: String?)
 
     @available(iOS 14.0, *)
@@ -40,6 +52,9 @@ enum ComponentBoxUI {
         case let .Button(id, components, modifier, isEnabled, action, variant):
             return AnyView(ComponentBoxUIButton(id: id, components: components, modifier: modifier, isEnabled: isEnabled, action: action, variant: variant))
 
+        case let .Column(id, components, modifier, verticalArrangement, horizontalAlignment, action, isLazy):
+            return AnyView(ComponentBoxUIColumn(id: id, components: components, modifier: modifier, verticalArrangement: verticalArrangement, horizontalAlignment: horizontalAlignment, action: action, isLazy: isLazy))
+            
         case let .Row(id, components, modifier, horizontalArrangement, verticalAlignment, action, isLazy):
             return AnyView(ComponentBoxUIRow(id: id, components: components, modifier: modifier, horizontalArrangement: horizontalArrangement, verticalAlignment: verticalAlignment, action: action, isLazy: isLazy))
 

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/ComponentBoxUI.swift

@@ -0,0 +1,43 @@
+//
+// Created by Matt Ramotar on 3/27/22.
+// Copyright (c) 2022 Dropbox, Inc. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import componentbox
+
+@available(iOS 14.0, *)
+struct ComponentBoxUIColumn: View, Identifiable {
+    let id: String
+    let components: Array<componentbox.Component>?
+    let modifier: componentbox.Modifier?
+    let verticalArrangement: componentbox.Arrangement?
+    let horizontalAlignment: componentbox.Alignment?
+    let action: String?
+    let isLazy: Bool?
+
+
+    var body: some View {
+
+        let backgroundColor = modifier?.background != nil ? modifier!.background!.title.ui() : "Background".ui()
+
+        let padding = modifier?.padding != nil ? modifier!.padding!.build() : EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
+
+        if (self.components != nil) {
+            if (self.isLazy == true) {
+                ScrollView {
+                    ForEach(self.components!, id: \.self) { component in
+                        component.inflate()
+                    }
+                }.frame(maxWidth: .infinity).padding(padding).background(backgroundColor)
+            } else {
+                VStack {
+                    ForEach(self.components!, id: \.self) { component in
+                        component.inflate()
+                    }
+                }.frame(maxWidth: .infinity, alignment: .center).padding(padding).background(backgroundColor)
+            }
+        }
+    }
+}

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/components/Column.swift

@@ -10,7 +10,7 @@ import componentbox
 
 @available(iOS 14.0, *)
 public extension Component {
-    @ViewBuilder func inflate() -> some View {
+    func inflate() -> some View {
         switch self {
 
         case let box as Component.Box:
@@ -29,6 +29,19 @@ public extension Component {
             let ui = ComponentBoxUI.Button(id: button.id, components: button.components as? [componentbox.Component], modifier: button.modifier, isEnabled: button.isEnabled as? Bool, action: button.action, variant: button.variant)
             return AnyView(ui.inflate())
 
+        case let column as Component.Column:
+            let ui = ComponentBoxUI.Column(
+                id: column.id,
+                components: column.components as? [componentbox.Component],
+                modifier: column.modifier,
+                verticalArrangement: column.verticalArrangement,
+                horizontalAlignment: column.horizontalAlignment,
+                action: column.action,
+                isLazy: column.isLazy as? Bool
+            )
+            
+            return AnyView(ui.inflate())
+            
         case let row as Component.Row:
             let ui = ComponentBoxUI.Row(
                 id: row.id,

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/extensions/inflate.swift

@@ -0,0 +1,21 @@
+//
+// Created by Matt Ramotar on 3/27/22.
+// Copyright (c) 2022 Dropbox, Inc. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import componentbox
+
+@available(iOS 14.0, *)
+extension componentbox.Padding {
+    func build() -> EdgeInsets {
+
+        let top = CGFloat(self.top?.floatValue ?? 0)
+        let bottom = CGFloat(self.bottom?.floatValue ?? 0)
+        let leading = CGFloat(self.start?.floatValue ?? 0)
+        let trailing = CGFloat(self.end?.floatValue ?? 0)
+
+        return EdgeInsets(top: top, leading: leading, bottom: bottom, trailing: trailing)
+    }
+}