Merge pull request #96 from componentskit/image-rendering-mode

Add image rendering mode param in `ButtonVM`

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/Assets.xcassets/avatar_placeholder.imageset/Contents.json

@@ -17,8 +17,5 @@
   "info" : {
     "author" : "xcode",
     "version" : 1
-  },
-  "properties" : {
-    "template-rendering-intent" : "template"
   }
 }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -35,6 +35,11 @@ struct ButtonPreview: View {
           Text("Leading").tag(ButtonVM.ImageLocation.leading)
           Text("Trailing").tag(ButtonVM.ImageLocation.trailing)
         }
+        Picker("Image Rendering Mode", selection: self.$model.imageRenderingMode) {
+          Text("Default").tag(Optional<ImageRenderingMode>.none)
+          Text("Template").tag(ImageRenderingMode.template)
+          Text("Original").tag(ImageRenderingMode.original)
+        }
         Picker("Image Source", selection: self.$model.imageSrc) {
           Text("SF Symbol").tag(ButtonVM.ImageSource.sfSymbol("camera.fill"))
           Text("Local").tag(ButtonVM.ImageSource.local("avatar_placeholder"))

Sources/ComponentsKit/Components/Button/Models/ButtonImageSource.swift

@@ -1,7 +1,7 @@
 import Foundation
 
-/// Defines the image source options for a button.
 extension ButtonVM {
+  /// Defines the image source options for a button.
   public enum ImageSource: Hashable {
     /// An image loaded from a system SF Symbol.
     ///

Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift

@@ -30,6 +30,9 @@ public struct ButtonVM: ComponentVM {
   /// Defaults to `.leading`.
   public var imageLocation: ImageLocation = .leading
 
+  /// Defines how image is rendered.
+  public var imageRenderingMode: ImageRenderingMode?
+
   /// The source of the image to be displayed.
   public var imageSrc: ImageSource?
 
@@ -184,15 +187,14 @@ extension ButtonVM {
 extension ButtonVM {
   var image: UIImage? {
     guard let imageSrc else { return nil }
-    switch imageSrc {
+
+    let image = switch imageSrc {
     case .sfSymbol(let name):
-      return UIImage(systemName: name)?.withTintColor(
-        self.foregroundColor.uiColor,
-        renderingMode: .alwaysOriginal
-      )
+      UIImage(systemName: name)
     case .local(let name, let bundle):
-      return UIImage(named: name, in: bundle, compatibleWith: nil)
+      UIImage(named: name, in: bundle, compatibleWith: nil)
     }
+    return image?.withRenderingMode(self.imageRenderingMode)
   }
 }
 

Sources/ComponentsKit/Shared/Types/ImageRenderingMode.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+import UIKit
+
+/// A type that indicates how images are rendered.
+public enum ImageRenderingMode {
+  /// A mode that renders all non-transparent pixels as the foreground
+  /// color.
+  case template
+  /// A mode that renders pixels of bitmap images as-is.
+  ///
+  /// For system images created from the SF Symbol set, multicolor symbols
+  /// respect the current foreground and accent colors.
+  case original
+}
+
+// MARK: - UIKit Helpers
+
+extension ImageRenderingMode {
+  var uiImageRenderingMode: UIImage.RenderingMode {
+    switch self {
+    case .template:
+      return .alwaysTemplate
+    case .original:
+      return .alwaysOriginal
+    }
+  }
+}
+
+extension UIImage {
+  func withRenderingMode(_ mode: ImageRenderingMode?) -> UIImage {
+    if let mode {
+      return self.withRenderingMode(mode.uiImageRenderingMode)
+    } else {
+      return self
+    }
+  }
+}
+
+// MARK: - SwiftUI Helpers
+
+extension ImageRenderingMode {
+  var imageRenderingModel: Image.TemplateRenderingMode {
+    switch self {
+    case .template:
+      return .template
+    case .original:
+      return .original
+    }
+  }
+}