Clean up ShadowedRoundedRectangle, prepare for reuse w/ vertical mode (…

…stripe#3567) ## Testing Existing tests ## Changelog Not user facing.
wpkyoto · May 6, 2024 · aef5164 · aef5164
1 parent 9047661
commit aef5164
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 69 deletions.
diff --git a/...Sheet/Source/PaymentSheet/New Payment Method Screen/PaymentMethodTypeCollectionView.swift b/...Sheet/Source/PaymentSheet/New Payment Method Screen/PaymentMethodTypeCollectionView.swift
@@ -191,11 +191,7 @@ extension PaymentMethodTypeCollectionView {
             return paymentMethodLogo
         }()
         private lazy var shadowRoundedRectangle: ShadowedRoundedRectangle = {
-            let shadowRoundedRectangle = ShadowedRoundedRectangle(appearance: appearance)
-            shadowRoundedRectangle.layer.borderWidth = 1
-            shadowRoundedRectangle.layoutMargins = UIEdgeInsets(
-                top: 15, left: 24, bottom: 15, right: 24)
-            return shadowRoundedRectangle
+            return ShadowedRoundedRectangle(appearance: appearance)
         }()
         lazy var paymentMethodLogoWidthConstraint: NSLayoutConstraint = {
             paymentMethodLogo.widthAnchor.constraint(equalToConstant: 0)
@@ -312,21 +308,9 @@ extension PaymentMethodTypeCollectionView {
             }
             updateImage(image)
 
-            if isSelected {
-                // Set text color
-                label.textColor = appearance.colors.primary
-
-                // Set border
-                shadowRoundedRectangle.layer.borderWidth = appearance.borderWidth * 2
-                shadowRoundedRectangle.layer.borderColor = appearance.colors.primary.cgColor
-            } else {
-                // Set text color
-                label.textColor = appearance.colors.componentText
-
-                // Set border
-                shadowRoundedRectangle.layer.borderWidth = appearance.borderWidth
-                shadowRoundedRectangle.layer.borderColor = appearance.colors.componentBorder.cgColor
-            }
+            shadowRoundedRectangle.isSelected = isSelected
+            // Set text color
+            label.textColor = isSelected ? appearance.colors.primary : appearance.colors.componentText
             accessibilityLabel = label.text
             accessibilityTraits = isSelected ? [.selected] : []
             accessibilityIdentifier = paymentMethodType.identifier

diff --git a/...et/Source/PaymentSheet/Saved Payment Method Screen/SavedPaymentMethodCollectionView.swift b/...et/Source/PaymentSheet/Saved Payment Method Screen/SavedPaymentMethodCollectionView.swift
@@ -81,10 +81,7 @@ extension SavedPaymentMethodCollectionView {
             light: .systemGray5, dark: .tertiaryLabel))
         lazy var selectedIcon: CircleIconView = CircleIconView(icon: .icon_checkmark, fillColor: appearance.colors.primary)
         lazy var shadowRoundedRectangle: ShadowedRoundedRectangle = {
-            let shadowRoundedRectangle = ShadowedRoundedRectangle(appearance: appearance)
-            shadowRoundedRectangle.layoutMargins = UIEdgeInsets(
-                top: 15, left: 24, bottom: 15, right: 24)
-            return shadowRoundedRectangle
+            return ShadowedRoundedRectangle(appearance: appearance)
         }()
         lazy var accessoryButton: CircularButton = {
             let button = CircularButton(style: .remove,
@@ -329,14 +326,12 @@ extension SavedPaymentMethodCollectionView {
             }
             let applyDefaultStyle: () -> Void = { [self] in
                 shadowRoundedRectangle.isEnabled = true
+                shadowRoundedRectangle.isSelected = false
                 label.textColor = appearance.colors.text
                 paymentMethodLogo.alpha = 1
                 plus.alpha = 1
                 selectedIcon.isHidden = true
                 layer.shadowOpacity = 0
-                shadowRoundedRectangle.layer.cornerRadius = appearance.cornerRadius
-                shadowRoundedRectangle.layer.borderWidth = appearance.borderWidth
-                shadowRoundedRectangle.layer.borderColor = appearance.colors.componentBorder.cgColor
             }
 
             if isRemovingPaymentMethods {
@@ -362,8 +357,6 @@ extension SavedPaymentMethodCollectionView {
                     paymentMethodLogo.alpha = 0.6
                     plus.alpha = 0.6
                     label.textColor = appearance.colors.text.disabledColor
-                    shadowRoundedRectangle.layer.borderWidth = appearance.borderWidth
-                    shadowRoundedRectangle.layer.borderColor = appearance.colors.componentBorder.cgColor
                 }
 
             } else if isSelected {
@@ -376,16 +369,12 @@ extension SavedPaymentMethodCollectionView {
                 selectedIcon.backgroundColor = appearance.colors.primary
 
                 // Draw a border with primary color
-                shadowRoundedRectangle.layer.borderWidth = appearance.borderWidth * 2
-                shadowRoundedRectangle.layer.borderColor = appearance.colors.primary.cgColor
-                shadowRoundedRectangle.layer.cornerRadius = appearance.cornerRadius
+                shadowRoundedRectangle.isSelected = true
             } else {
                 accessoryButton.isHidden = true
-                shadowRoundedRectangle.isEnabled = true
                 applyDefaultStyle()
             }
             accessoryButton.isAccessibilityElement = !accessoryButton.isHidden
-            shadowRoundedRectangle.roundedRectangle.backgroundColor = appearance.colors.componentBackground
             label.font = appearance.scaledFont(for: appearance.font.base.medium, style: .footnote, maximumPointSize: 20)
 
             shadowRoundedRectangle.accessibilityTraits = {

diff --git a/...mentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift b/...mentSheet/StripePaymentSheet/Source/PaymentSheet/Views/ShadowedRoundedRectangleView.swift
@@ -10,78 +10,71 @@
 import UIKit
 
 /// The shadowed rounded rectangle that our cells use to display content
-/// For internal SDK use only
-@objc(STP_Internal_ShadowedRoundedRectangle)
 class ShadowedRoundedRectangle: UIView {
-    let roundedRectangle: UIView
+    private let roundedRectangle: UIView
     var appearance: PaymentSheet.Appearance {
         didSet {
-            layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
-            layer.cornerRadius = appearance.cornerRadius
-            roundedRectangle.layer.cornerRadius = appearance.cornerRadius
-            roundedRectangle.backgroundColor = appearance.colors.componentBackground
+            update()
         }
     }
 
-    lazy var shouldDisplayShadow: Bool = true {
+    var isEnabled: Bool = true {
         didSet {
-            if shouldDisplayShadow {
-                layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
-            } else {
-                layer.shadowOpacity = 0
-            }
+            update()
         }
     }
 
-    var isEnabled: Bool = true {
+    var isSelected: Bool = false {
         didSet {
-            updateBackgroundColor()
+            update()
         }
     }
 
-    private func updateBackgroundColor() {
+    /// All mutations to this class should route to this single method to update the UI
+    private func update() {
+        // Background color
         if isEnabled {
             roundedRectangle.backgroundColor = appearance.colors.componentBackground
         } else {
             roundedRectangle.backgroundColor = appearance.colors.componentBackground.disabledColor
         }
+
+        // Corner radius
+        roundedRectangle.layer.cornerRadius = appearance.cornerRadius
+        layer.cornerRadius = appearance.cornerRadius
+
+        // Shadow
+        layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
+
+        // Border
+        if isSelected {
+            layer.borderWidth = appearance.borderWidth * 2
+            layer.borderColor = appearance.colors.primary.cgColor
+        } else {
+            layer.borderWidth = appearance.borderWidth
+            layer.borderColor = appearance.colors.componentBorder.cgColor
+        }
     }
 
     required init(appearance: PaymentSheet.Appearance) {
         self.appearance = appearance
         roundedRectangle = UIView()
-        roundedRectangle.layer.cornerRadius = appearance.cornerRadius
         roundedRectangle.layer.masksToBounds = true
-
         super.init(frame: .zero)
-
-        layer.cornerRadius = appearance.cornerRadius
-        layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
-
-        addSubview(roundedRectangle)
-        updateBackgroundColor()
+        addAndPinSubview(roundedRectangle)
+        update()
     }
 
     override func layoutSubviews() {
         super.layoutSubviews()
         // Update shadow paths based on current frame
         roundedRectangle.frame = bounds
-
-        // Turn off shadows in dark mode
-        if traitCollection.userInterfaceStyle == .dark || !shouldDisplayShadow {
-            layer.shadowOpacity = 0
-        } else {
-            layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
-        }
-
-        // Update shadow (cg)color
-        layer.applyShadow(shadow: appearance.asElementsTheme.shadow)
     }
 
     #if !canImport(CompositorServices)
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         super.traitCollectionDidChange(previousTraitCollection)
-        setNeedsLayout()
+        update()
     }
     #endif