From 8560d7a6d4426fe51bca1659056b16cc47194bfc Mon Sep 17 00:00:00 2001 From: vasavk Date: Tue, 7 May 2024 11:13:56 +0530 Subject: [PATCH] Digital ACT-191 ONEAPP-7016 story: handling active dates, inactive dates, min date, max date with updated values --- VDS/Components/Calendar/Calendar.swift | 32 +++------ .../CalendarDateCollectionViewCell.swift | 68 +++++++++++++------ .../Calendar/CalendarHeaderView.swift | 15 ++-- 3 files changed, 69 insertions(+), 46 deletions(-) diff --git a/VDS/Components/Calendar/Calendar.swift b/VDS/Components/Calendar/Calendar.swift index dd0f08eb..179f3efa 100644 --- a/VDS/Components/Calendar/Calendar.swift +++ b/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 { - get { return _selectedDate } - set { - _selectedDate = newValue - setNeedsUpdate() - } - } + open var selectedDate: Date = Date() { didSet { 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 } diff --git a/VDS/Components/Calendar/CalendarDateCollectionViewCell.swift b/VDS/Components/Calendar/CalendarDateCollectionViewCell.swift index d822c820..71562de5 100644 --- a/VDS/Components/Calendar/CalendarDateCollectionViewCell.swift +++ b/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) { - numberLabel.text = text + + /// Updating UI based on selected date, modified indicators data along with surface + /// 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) { - addIndicator(with: selectedCellIndicatorColorConfiguration.getColor(surface), surface: surface, clearFullCircle: (x == 1), drawSemiCircle: (x == 2)) - } else { - addIndicator(with: unselectedCellIndicatorColorConfiguration.getColor(surface), surface: surface, clearFullCircle: (x == 1), drawSemiCircle: (x == 2)) - } + let color = (numberLabel.text == self.getDay(with: selectedDate)) ? selectedCellIndicatorColorConfiguration.getColor(surface) : unselectedCellIndicatorColorConfiguration.getColor(surface) + addIndicator(with: color, 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 { diff --git a/VDS/Components/Calendar/CalendarHeaderView.swift b/VDS/Components/Calendar/CalendarHeaderView.swift index f217ae40..c47f4df9 100644 --- a/VDS/Components/Calendar/CalendarHeaderView.swift +++ b/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 } }