Digital ACT-191 ONEAPP-7016 story: handling active dates, inactive dates, min date, max date with updated values
This commit is contained in:
parent
7fe5123a69
commit
8560d7a6d4
@ -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
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user