Add image

Author: matt-ramotar

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

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "placeholder.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

samples/discovery/ios/ios/Assets.xcassets/placeholder.imageset/Contents.json

@@ -18,6 +18,8 @@ enum ComponentBoxUI {
         action: String?
     )
 
+    case Button(id: String, components: [componentbox.Component]?, modifier: componentbox.Modifier?, isEnabled: Bool?, action: String?, variant: String?)
+    
     case Column(
         id: String,
         components: [componentbox.Component]?,
@@ -28,7 +30,15 @@ enum ComponentBoxUI {
         isLazy: Bool?
     )
 
-    case Button(id: String, components: [componentbox.Component]?, modifier: componentbox.Modifier?, isEnabled: Bool?, action: String?, variant: String?)
+    case Image(
+        id: String,
+        name: String?,
+        url: String?,
+        contentDescription: String?,
+        modifier: componentbox.Modifier?,
+        alignment: componentbox.Alignment?,
+        contentScale: componentbox.ContentScale?
+    )
 
     case Row(
         id: String,
@@ -55,6 +65,9 @@ enum ComponentBoxUI {
         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 .Image(id, name, url, contentDescription, modifier, alignment, contentScale):
+            return AnyView(ComponentBoxUIImage(id: id, name: name, url: url, contentDescription: contentDescription, modifier: modifier, alignment: alignment, contentScale: contentScale))
+            
         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/Assets.xcassets/placeholder.imageset/placeholder.png

@@ -0,0 +1,91 @@
+//
+// Created by Matt Ramotar on 3/27/22.
+// Copyright (c) 2022 Dropbox, Inc. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import componentbox
+import Combine
+
+@available(iOS 14.0, *)
+struct ComponentBoxUIImage: View, Identifiable {
+    let id: String
+    let name: String?
+    let url: String?
+    let contentDescription: String?
+    let modifier: componentbox.Modifier?
+    let alignment: componentbox.Alignment?
+    let contentScale: componentbox.ContentScale?
+    
+    
+    var fallbackImage : some View {
+        SwiftUI.Image("placeholder").resizable().scaledToFit().frame(height: 200).clipped()
+    }
+
+    var body: some View {
+        
+        if (url != nil) {
+            ComponentBoxAsyncImage(url: URL(string: url!)!, placeholder: {fallbackImage} )
+        } else {
+            fallbackImage
+        }
+    }
+}
+
+
+@available(iOS 14.0, *)
+class ImageLoader: ObservableObject {
+    @Published var image: UIImage?
+    private let url: URL
+    private var cancellable: AnyCancellable?
+
+    init(url: URL) {
+        self.url = url
+    }
+
+    deinit {
+        cancel()
+    }
+    
+
+    func load() {
+        cancellable = URLSession.shared.dataTaskPublisher(for: url)
+            .map { UIImage(data: $0.data) }
+            .replaceError(with: nil)
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] in self?.image = $0 }
+    }
+    
+    func cancel() {
+        cancellable?.cancel()
+    }
+}
+
+@available(iOS 14.0, *)
+struct ComponentBoxAsyncImage<Placeholder: View> : View {
+    
+    @StateObject private var loader: ImageLoader
+    private let placeholder: Placeholder
+
+    init(url: URL, @ViewBuilder placeholder: () -> Placeholder) {
+        self.placeholder = placeholder()
+        _loader = StateObject(wrappedValue: ImageLoader(url: url))
+    }
+
+    var body: some View {
+        content
+            .onAppear(perform: loader.load)
+    }
+    
+    private var content: some View {
+        Group {
+                   if loader.image != nil {
+                       Image(uiImage: loader.image!)
+                           .resizable()
+                   } else {
+                       placeholder
+                   }
+               }
+    }
+}

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

@@ -42,6 +42,10 @@ public extension Component {
 
             return AnyView(ui.inflate())
 
+        case let image as Component.Drawable:
+            let ui = ComponentBoxUI.Image(id: image.id, name: image.name, url: image.url, contentDescription: image.contentDescription, modifier: image.modifier, alignment: image.alignment, contentScale: image.contentScale)
+            return AnyView(ui.inflate())
+            
         case let row as Component.Row:
             let ui = ComponentBoxUI.Row(
                 id: row.id,

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

@@ -36,7 +36,14 @@ private struct Content: View {
 
     var body: some View {
         VStack {
-            button.inflate()
+            
+            if (screen?.components != nil) {
+                ForEach(screen!.components, id: \.self) { component in
+                    component.inflate()
+                }
+            }
+            
+            
             Text(screen?.title ?? "No title")
 
         }