Digital ACT-191 ONEAPP-7016 story: handling active dates, inactive dates, min date, max date with updated values

VDS/Components/Calendar/Calendar.swift

@@ -40,46 +40,36 @@ open class CalendarBase: View {
     
     /// Enable specific days. Pass an array of string value in date format e.g. ['07/21/2024', '07/24/2024', 07/28/2024'].
     /// All other dates will be inactive
-    open var activeDates: [Date] = []
+    open var activeDates: [Date] = [] { didSet { setNeedsUpdate() } }
-    
+
     /// Disable specific days. Pass an array of string value in date format e.g. ['07/21/2024', '07/24/2024', 07/28/2024'].
     /// All other dates will be active.
-    open var inactiveDates: [Date] = []
+    open var inactiveDates: [Date] = [] { didSet { setNeedsUpdate() } }
     
     /// If provided, the calendar will allow a selection to be made from this date forward. Defaults to today.
-    open var minDate: Date?
+    open var minDate: Date = Date() { didSet { setNeedsUpdate() } }
-    
+
     /// If provided, the calendar will allow a selection to be made up to this date.
-    open var maxDate: Date?
+    open var maxDate: Date = Date() { didSet { setNeedsUpdate() } }
     
     /// If provided, this is the date that will show as selected by the Calendar.
     /// If no value is provided, the current date will be used. If null is provided, no date will be selected.
-    open var selectedDate: Date {
+    open var selectedDate: Date = Date() { didSet { setNeedsUpdate() } }
-        get { return _selectedDate }
-        set {
-            _selectedDate = newValue
-            setNeedsUpdate()
-        }
-    }
     
     /// If provided, the calendar will be rendered with transparent background.
-    open var transparentBackground: Bool = false
+    open var transparentBackground: Bool = false { didSet { setNeedsUpdate() } }
     
     /// Array of ``CalendarIndicatorModel`` you are wanting to show on legend.
     open var indicators: [CalendarIndicatorModel] = [] { didSet { setNeedsUpdate() } }
-    
+            
-//    /// Array of indicators for the legend.
-//    open var indicatorData: [CalendarIndicatorModel] = [] { didSet { setNeedsUpdate() } }
-        
     /// A callback when the date changes. Passes parameters (selectedDate).
     public var onChangeSelectedDate: ((Date) -> Void)?
     
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    internal var _selectedDate: Date = Date()
     internal var containerSize: CGSize { CGSize(width: 328, height: 376) } //width:320/328
-    
+
     private let cellItemSize = CGSize(width: 40, height: 40)
     private let headerHeight = 88.0
     private let footerHeight = 40.0
@@ -228,7 +218,7 @@ extension CalendarBase: UICollectionViewDelegate, UICollectionViewDataSource, UI
                 }
             }
         }
-        cell.update(with: surface, indicators: indicators, text: days[indexPath.row], indicatorCount: indicatorCount, selectedDate: selectedDate, hideDate: hideCurrentDateIndicator)
+        cell.update(with: surface, indicators: indicators, text: days[indexPath.row], indicatorCount: indicatorCount, selectedDate: selectedDate, hideDate: hideCurrentDateIndicator, minDate: minDate, maxDate: maxDate, activeDates: activeDates, inactiveDates: inactiveDates)
         if (self.days[indexPath.row] == self.getDay(with: selectedDate)) {  selectedIndexPath = indexPath }
         return cell
     }

VDS/Components/Calendar/CalendarDateCollectionViewCell.swift

@@ -9,7 +9,7 @@ import Foundation
 import UIKit
 import VDSTokens
 
-/// Calendar collection view for Date view
+/// Calendar collection view cell for Date view
 final class CalendarDateCollectionViewCell: UICollectionViewCell {
     
     ///Identifier for the Calendar Date Cell
@@ -35,22 +35,23 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
             $0.setContentHuggingPriority(.defaultHigh, for: .horizontal)
         }
     }()
-
+    
     private var numberLabel = Label().with {
         $0.translatesAutoresizingMaskIntoConstraints = false
         $0.textAlignment = .center
         $0.textStyle = .bodySmall
     }
-
+    
     private lazy var shapeLayer = CAShapeLayer()
     
     private let selectedTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryInverseOnlight, VDSColor.elementsPrimaryInverseOndark)
     private let selectedBackgroundColor = SurfaceColorConfiguration(VDSColor.backgroundPrimaryInverseLight, VDSColor.backgroundPrimaryInverseDark)
     private let selectedCellIndicatorColorConfiguration = SurfaceColorConfiguration(VDSColor.paletteGray65, VDSColor.paletteGray44)
-
     private let unselectedTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
     private let unselectedCellIndicatorColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsSecondaryOnlight, VDSColor.elementsSecondaryOndark)
-
+    private let disabledTextColorConfiguration = SurfaceColorConfiguration(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark)
+    private let disabledBackgroundColor = SurfaceColorConfiguration(VDSFormControlsColor.backgroundOnlight, VDSFormControlsColor.backgroundOndark)
+    
     private let currentDate = Date()
     
     //--------------------------------------------------
@@ -66,6 +67,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
         setUp()
     }
     
+    /// Configuring the cell with default setup
     private func setUp() {
         isAccessibilityElement = false
         contentView.addSubview(containerView)
@@ -81,22 +83,53 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
         // Number label
         containerView.addSubview(numberLabel)
         numberLabel.pinToSuperView()
-
+        
         // Indicators
         containerView.addSubview(stackView)
         let topPos = containerSize.height * 0.7
         stackView.pinTop(topPos).pinBottom().pinTopGreaterThanOrEqualTo().pinTrailingLessThanOrEqualTo().pinCenterY()
         stackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
     }
-
+    
-    func update(with surface: Surface, indicators: [CalendarBase.CalendarIndicatorModel], text: String, indicatorCount: Int, selectedDate: Date, hideDate: Bool) {
+    /// Updating UI based on selected date, modified indicators data along with surface
-                numberLabel.text = text
+    /// Enable/disable cell based on min date, max date, active dates, inactive dates
+    func update(with surface: Surface, indicators: [CalendarBase.CalendarIndicatorModel], text: String, indicatorCount: Int, selectedDate: Date, hideDate: Bool, minDate: Date, maxDate: Date, activeDates: [Date], inactiveDates: [Date]) {
         numberLabel.surface = surface
-//        numberLabel.isEnabled = isEnabled
+        numberLabel.text = text
         stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
-
+                
+        // disabled cells based on min date, max date.
+        if let day:Int = Int(numberLabel.text), day < minDate.dayInt || day > maxDate.dayInt {
+            numberLabel.isEnabled = false
+            numberLabel.textColor = disabledTextColorConfiguration.getColor(surface)
+            layer.backgroundColor = disabledBackgroundColor.getColor(surface).cgColor
+        } else {
+            numberLabel.isEnabled = false
+            // handing active dates
+            if activeDates.count > 0 && inactiveDates.count == 0 {
+                for x in (0...(activeDates.count-1)) {
+                    if let day:Int = Int(numberLabel.text), day == activeDates[x].dayInt {
+                        numberLabel.isEnabled = true
+                    }
+                }
+            } else {
+                numberLabel.isEnabled = true
+            }
+        }
+        
+        // handling inactive dates
+        if inactiveDates.count > 0 {
+            for x in (0...(inactiveDates.count-1)) {
+                if let day:Int = Int(numberLabel.text), day == inactiveDates[x].dayInt {
+                    numberLabel.isEnabled = false
+                    numberLabel.textColor = disabledTextColorConfiguration.getColor(surface)
+                    layer.backgroundColor = disabledBackgroundColor.getColor(surface).cgColor
+                }
+            }
+        }
+        
         // update text color, bg color, corner radius
-        if numberLabel.text == self.getDay(with: selectedDate) {
+        if (numberLabel.text == self.getDay(with: selectedDate)) && numberLabel.isEnabled {
             numberLabel.textColor = selectedTextColorConfiguration.getColor(surface)
             layer.backgroundColor = selectedBackgroundColor.getColor(surface).cgColor
             layer.cornerRadius = VDSFormControls.borderRadius
@@ -112,18 +145,15 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
             stackView.widthAnchor.constraint(equalToConstant: CGFloat(width)).activate()
             for x in (0...(indicators.count-1)) {
                 if (self.numberLabel.text == self.getDay(with: indicators[x].date)) {
-                    if numberLabel.text == self.getDay(with: selectedDate) {
+                    let color = (numberLabel.text == self.getDay(with: selectedDate)) ? selectedCellIndicatorColorConfiguration.getColor(surface) : unselectedCellIndicatorColorConfiguration.getColor(surface)
-                        addIndicator(with: selectedCellIndicatorColorConfiguration.getColor(surface), surface: surface, clearFullCircle: (x == 1), drawSemiCircle: (x == 2))
+                    addIndicator(with: color, surface: surface, clearFullCircle: (x == 1), drawSemiCircle: (x == 2))
-                    } else {
-                        addIndicator(with: unselectedCellIndicatorColorConfiguration.getColor(surface), surface: surface, clearFullCircle: (x == 1), drawSemiCircle: (x == 2))
-                    }
                 }
             }
         }
         
         // update text style for current date
         if (numberLabel.text == self.getDay(with: currentDate)) {
-                numberLabel.textStyle = hideDate ? .bodySmall : .boldBodySmall
+            numberLabel.textStyle = hideDate ? .bodySmall : .boldBodySmall
         } else {
             numberLabel.textStyle = .bodySmall
         }
@@ -164,7 +194,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
         indicatorView.layer.addSublayer(shapeLayer)
     }
     
-    func getDay(with date:Date) -> String {
+    func getDay(with date: Date) -> String {
         if #available(iOS 15.0, *) {
             return date.formatted(.dateTime.day())
         } else {

VDS/Components/Calendar/CalendarHeaderView.swift

@@ -33,7 +33,7 @@ open class CalendarHeaderView: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    internal var containerSize: CGSize { CGSize(width: 304, height: 88) } //width:320/328
+    internal var containerSize: CGSize { CGSize(width: 304, height: 88) }
     
     private lazy var stackView = UIStackView().with {
         $0.translatesAutoresizingMaskIntoConstraints = false
@@ -60,7 +60,7 @@ open class CalendarHeaderView: View {
     internal var nextMonthView = View()
     internal var daysView = View()
     internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
-    
+
     internal var previousButton = ButtonIcon().with {
         $0.kind = .ghost
         $0.iconName = .leftCaret
@@ -112,7 +112,7 @@ open class CalendarHeaderView: View {
         super.setup()
         isAccessibilityElement = false
         
-        // stackView
+        // containerView
         addSubview(containerView)
         containerView
             .pinTop()
@@ -127,9 +127,9 @@ open class CalendarHeaderView: View {
         containerView.addSubview(stackView)
         stackView
             .pinTop()
+            .pinBottom(VDSLayout.space1X)
             .pinLeading()
             .pinTrailing()
-            .pinBottom(VDSLayout.space1X)
         stackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
         
         // month label view, previous and next buttons
@@ -145,7 +145,9 @@ open class CalendarHeaderView: View {
         monthYearHeaderStackView.addArrangedSubview(previousMonthView)
         previousMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
         previousMonthView.addSubview(previousButton)
-        
+        let spacing = VDSLayout.space1X
+        previousButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing)
+                
         // month year label
         monthYearHeaderStackView.addArrangedSubview(monthYearLabel)
         
@@ -153,6 +155,7 @@ open class CalendarHeaderView: View {
         monthYearHeaderStackView.addArrangedSubview(nextMonthView)
         nextMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
         nextMonthView.addSubview(nextButton)
+        nextButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing)
         
         // days Collection View
         stackView.addArrangedSubview(daysCollectionView)
@@ -177,6 +180,7 @@ open class CalendarHeaderView: View {
     
     open override func reset() {
         super.reset()
+        monthYearLabel.textStyle = .boldBodySmall
     }
 }
 
@@ -242,6 +246,5 @@ private class collectionViewCell: UICollectionViewCell {
         title.surface = surface
         title.text = text
         title.textColor = textColorConfiguration.getColor(surface)
-        title.backgroundColor = .clear
     }
 }