Digital ACT-191 ONEAPP-7013 story: flexible width support, Carousel can be set to any pixel or percentage

VDS/Components/Carousel/Carousel.swift

@@ -79,7 +79,7 @@ open class Carousel: View {
     // MARK: - Public Properties
     //--------------------------------------------------
     /// Aspect-ratio options for tilelet in the carousel. If 'none' is passed, the tilelet will take the height of the tallest item in the carousel.
-    open var aspectRatio: Tilelet.AspectRatio = .ratio1x1 { didSet {  setNeedsUpdate() } }
+    open var aspectRatio: Tilelet.AspectRatio = .none { didSet {  setNeedsUpdate() } }
     
     /// Data used to render tilelets in the carousel.
     open var data: [Any] = [] { didSet { setNeedsUpdate() } }
@@ -92,10 +92,13 @@ open class Carousel: View {
                 switch newValue {
                 case .percentage(let percentage):
                     if percentage >= 10 && percentage <= 100.0 {
+                        let expectedWidth = safeAreaLayoutGuide.layoutFrame.size.width * (percentage/100)
+                        if expectedWidth > carouselScrollbarMinWidth {
                             _width = newValue
                         }
+                    }
                 case .value(let value):
-                    if value > minimumSlotWidth { /*(size.minimumSlotWidth)*/
+                    if value > carouselScrollbarMinWidth {
                         _width = newValue
                     }
                 }
@@ -256,6 +259,7 @@ open class Carousel: View {
     private var containerViewHeightConstraint: NSLayoutConstraint?
     private var prevButtonLeadingConstraint: NSLayoutConstraint?
     private var nextButtonTrailingConstraint: NSLayoutConstraint?
+    private var containerLeadingConstraint: NSLayoutConstraint?
 
     // The scrollbar has top 5X space. So the expected top space is adjusted for tablet and mobile.
     let scrollbarTopSpace = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space1X
@@ -263,6 +267,7 @@ open class Carousel: View {
     var slotHeight = 100.0
     var peekMinimum = 24.0
     var minimumSlotWidth = 0.0
+    var carouselScrollbarMinWidth = 96.0
     //--------------------------------------------------
     // MARK: - Lifecycle
     //--------------------------------------------------
@@ -279,10 +284,11 @@ open class Carousel: View {
         containerView
             .pinTop()
             .pinBottom()
-            .pinLeading()
+            .pinLeadingGreaterThanOrEqualTo()
             .pinTrailing()
             .heightGreaterThanEqualTo(containerSize.height)
-        containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
+        containerView.centerYAnchor.constraint(equalTo: centerYAnchor).activate()
+        containerLeadingConstraint = containerView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: 0)
 
         // add content stackview
         containerView.addSubview(contentStackView)
@@ -312,13 +318,30 @@ open class Carousel: View {
             .pinLeading()
             .pinTrailing()
             .heightGreaterThanEqualTo(containerSize.height)
-        contentStackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
         
         addlisteners()
     }
         
     open override func updateView() {
         super.updateView()
+        
+        if containerView.frame.size.width > 0 {
+            if let width {
+                containerLeadingConstraint?.deactivate()
+                switch width {
+                case .value(let value):
+                    var expectedWidth = value
+                    let fullWidth = safeAreaLayoutGuide.layoutFrame.size.width
+                    expectedWidth = expectedWidth > fullWidth ? fullWidth : expectedWidth
+                    containerLeadingConstraint?.constant = safeAreaLayoutGuide.layoutFrame.size.width - expectedWidth
+                case .percentage(let percentage):
+                    let expectedWidth = safeAreaLayoutGuide.layoutFrame.size.width * (percentage/100)
+                    containerLeadingConstraint?.constant = safeAreaLayoutGuide.layoutFrame.size.width - expectedWidth
+                }
+                containerLeadingConstraint?.activate()
+            }
+        }
+        
         carouselScrollBar.numberOfSlides = data.count
         carouselScrollBar.layout = _layout
         carouselScrollBar.position = (carouselScrollBar.position == 0 || carouselScrollBar.position > carouselScrollBar.numberOfSlides) ? 1 : carouselScrollBar.position
@@ -335,11 +358,13 @@ open class Carousel: View {
             peek = .standard
         }
 
-        containerViewHeightConstraint?.isActive = false
-        containerStackHeightConstraint?.isActive = false
         updatePaginationControls()
         getSlotWidth()
 
+        if containerView.frame.size.width > 0 {
+            containerViewHeightConstraint?.isActive = false
+            containerStackHeightConstraint?.isActive = false
+            
             // perform a loop to iterate each subView
             scrollView.subviews.forEach { subView in
                 // removing subView from its parent view
@@ -379,14 +404,13 @@ open class Carousel: View {
             }
             containerViewHeightConstraint?.isActive = true
             containerStackHeightConstraint?.isActive = true
-        
+        }
-        layoutIfNeeded()
     }
     
     open override func reset() {
         super.reset()
         shouldUpdateView = false
-        aspectRatio = .ratio1x1
+        aspectRatio = .none
         layout = UIDevice.isIPad ? .threeUP : .oneUP
         pagination = .init(kind: .lowContrast, floating: true)
         paginationDisplay = .none