make card components tappable

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -15,6 +15,7 @@ struct CardPreview: View {
         SUCard(model: self.model, content: self.suCardContent)
       }
       Form {
+        AnimationScalePicker(selection: self.$model.animationScale)
         Picker("Background Color", selection: self.$model.backgroundColor) {
           Text("Background").tag(UniversalColor.background)
           Text("Secondary Background").tag(UniversalColor.secondaryBackground)
@@ -48,6 +49,7 @@ struct CardPreview: View {
           Text("Large").tag(Shadow.large)
           Text("Custom").tag(Shadow.custom(20.0, .zero, UniversalColor.accentBackground))
         }
+        Toggle("Tappable", isOn: self.$model.isTappable)
       }
     }
   }

Sources/ComponentsKit/Components/Card/Models/CardVM.swift

@@ -2,6 +2,11 @@ import Foundation
 
 /// A model that defines the appearance properties for a card component.
 public struct CardVM: ComponentVM {
+  /// The scaling factor for the card's tap animation, with a value between 0 and 1.
+  ///
+  /// Defaults to `.medium`.
+  public var animationScale: AnimationScale = .medium
+
   /// The background color of the card.
   public var backgroundColor: UniversalColor = .background
 
@@ -23,6 +28,11 @@ public struct CardVM: ComponentVM {
   /// Defaults to `.medium`.
   public var cornerRadius: ContainerRadius = .medium
 
+  /// A Boolean value indicating whether the card should allow to be tapped.
+  ///
+  /// Defaults to `true`.
+  public var isTappable: Bool = false
+
   /// The shadow of the card.
   ///
   /// Defaults to `.medium`.

Sources/ComponentsKit/Components/Card/SUCard.swift

@@ -16,8 +16,14 @@ public struct SUCard<Content: View>: View {
 
   /// A model that defines the appearance properties.
   public let model: CardVM
+  /// A closure that is triggered when the card is tapped.
+  public var onTap: () -> Void
+
+  /// A Boolean value indicating whether the card is pressed.
+  @State public var isPressed: Bool = false
 
   @ViewBuilder private let content: () -> Content
+  @State private var contentSize: CGSize = .zero
 
   // MARK: - Initialization
 
@@ -28,10 +34,12 @@ public struct SUCard<Content: View>: View {
   ///   - content: The content that is displayed in the card.
   public init(
     model: CardVM = .init(),
-    content: @escaping () -> Content
+    content: @escaping () -> Content,
+    onTap: @escaping () -> Void = {}
   ) {
     self.model = model
     self.content = content
+    self.onTap = onTap
   }
 
   // MARK: - Body
@@ -49,5 +57,25 @@ public struct SUCard<Content: View>: View {
           )
       )
       .shadow(self.model.shadow)
+      .observeSize { self.contentSize = $0 }
+      .simultaneousGesture(DragGesture(minimumDistance: 0.0)
+        .onChanged { _ in
+          guard self.model.isTappable else { return }
+          self.isPressed = true
+        }
+        .onEnded { value in
+          guard self.model.isTappable else { return }
+
+          defer { self.isPressed = false }
+
+          if CGRect(origin: .zero, size: self.contentSize).contains(value.location) {
+            self.onTap()
+          }
+        }
+      )
+      .scaleEffect(
+        self.isPressed ? self.model.animationScale.value : 1,
+        anchor: .center
+      )
   }
 }

Sources/ComponentsKit/Components/Card/UKCard.swift

@@ -21,9 +21,22 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
   /// The primary content of the card, provided as a custom view.
   public let content: Content
 
-  // MARK: - Properties
+  // MARK: - Public Properties
 
-  private var contentConstraints = LayoutConstraints()
+  /// A closure that is triggered when the card is tapped.
+  public var onTap: () -> Void
+
+  /// A Boolean value indicating whether the button is pressed.
+  public private(set) var isPressed: Bool = false {
+    didSet {
+      self.transform = self.isPressed
+      ? .init(
+        scaleX: self.model.animationScale.value,
+        y: self.model.animationScale.value
+      )
+      : .identity
+    }
+  }
 
   /// A model that defines the appearance properties.
   public var model: CardVM {
@@ -32,6 +45,10 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
     }
   }
 
+  // MARK: - Private Properties
+
+  private var contentConstraints = LayoutConstraints()
+
   // MARK: - Initialization
 
   /// Initializer.
@@ -41,10 +58,12 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
   ///   - content: The content that is displayed in the card.
   public init(
     model: CardVM = .init(),
-    content: @escaping () -> Content
+    content: @escaping () -> Content,
+    onTap: @escaping () -> Void = {}
   ) {
     self.model = model
     self.content = content()
+    self.onTap = onTap
 
     super.init(frame: .zero)
 
@@ -95,6 +114,8 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
     self.layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
   }
 
+  // MARK: - Update
+
   /// Updates appearance when the model changes.
   open func update(_ oldValue: CardVM) {
     guard self.model != oldValue else { return }
@@ -113,6 +134,43 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
 
   // MARK: - UIView Methods
 
+  open override func touchesBegan(
+    _ touches: Set<UITouch>,
+    with event: UIEvent?
+  ) {
+    super.touchesBegan(touches, with: event)
+
+    guard self.model.isTappable else { return }
+
+    self.isPressed = true
+  }
+
+  open override func touchesEnded(
+    _ touches: Set<UITouch>,
+    with event: UIEvent?
+  ) {
+    super.touchesEnded(touches, with: event)
+
+    guard self.model.isTappable else { return }
+
+    defer { self.isPressed = false }
+
+    if self.model.isTappable,
+       let location = touches.first?.location(in: self),
+       self.bounds.contains(location) {
+      self.onTap()
+    }
+  }
+
+  open override func touchesCancelled(
+    _ touches: Set<UITouch>,
+    with event: UIEvent?
+  ) {
+    super.touchesCancelled(touches, with: event)
+
+    self.isPressed = false
+  }
+
   open override func traitCollectionDidChange(
     _ previousTraitCollection: UITraitCollection?
   ) {