Digital ACT-191 ONEAPP-7958 story: Fixed issues in constraints for the component and updated to flexible width
This commit is contained in:
parent
8560d7a6d4
commit
8d415a72f1
@ -68,11 +68,12 @@ open class CalendarBase: View {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: 328, height: 376) } //width:320/328
|
||||
internal var containerSize: CGSize { CGSize(width: 328, height: 376) }
|
||||
|
||||
private let cellItemSize = CGSize(width: 40, height: 40)
|
||||
private let headerHeight = 88.0
|
||||
private let footerHeight = 40.0
|
||||
private let calendarWidth = 304.0
|
||||
private let items = 35
|
||||
|
||||
private var selectedIndexPath : IndexPath?
|
||||
@ -127,22 +128,19 @@ open class CalendarBase: View {
|
||||
.pinTrailingLessThanOrEqualTo()
|
||||
.height(containerSize.height)
|
||||
.width(containerSize.width)
|
||||
|
||||
containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
|
||||
let spacing = CGFloat(VDSFormControls.spaceInset) //CGFloat(VDSLayout.space2X)
|
||||
|
||||
// Calendar View
|
||||
containerView.addSubview(collectionView)
|
||||
let calendarHeight = containerSize.height - (2 * VDSLayout.space4X)
|
||||
let spacing = (containerSize.width - calendarWidth) / 2
|
||||
collectionView
|
||||
.pinTop(VDSLayout.space4X)
|
||||
.pinBottom(VDSLayout.space4X)
|
||||
.pinLeading(spacing)
|
||||
.pinTrailing(spacing)
|
||||
let width = containerSize.width - (2 * spacing)
|
||||
collectionView.widthAnchor.constraint(equalToConstant: width).activate()
|
||||
let height = containerSize.height - (2 * VDSLayout.space4X)
|
||||
collectionView.heightAnchor.constraint(equalToConstant: height).activate()
|
||||
.width(calendarWidth)
|
||||
.height(calendarHeight)
|
||||
collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
|
||||
}
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
|
||||
$0.spacing = VDSLayout.space1X
|
||||
$0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
|
||||
$0.setContentHuggingPriority(.defaultHigh, for: .horizontal)
|
||||
$0.backgroundColor = .clear
|
||||
}
|
||||
}()
|
||||
|
||||
@ -87,7 +88,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
|
||||
// Indicators
|
||||
containerView.addSubview(stackView)
|
||||
let topPos = containerSize.height * 0.7
|
||||
stackView.pinTop(topPos).pinBottom().pinTopGreaterThanOrEqualTo().pinTrailingLessThanOrEqualTo().pinCenterY()
|
||||
stackView.pinTop(topPos).pinBottom().pinTopGreaterThanOrEqualTo().pinTrailingLessThanOrEqualTo()
|
||||
stackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
}
|
||||
|
||||
@ -141,8 +142,8 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
|
||||
|
||||
// add indicators
|
||||
if indicatorCount > 0 {
|
||||
let width = (indicatorCount * 8) + (Int(VDSLayout.space1X) * (indicatorCount - 1))
|
||||
stackView.widthAnchor.constraint(equalToConstant: CGFloat(width)).activate()
|
||||
// let width = (indicatorCount * 8) + (Int(VDSLayout.space1X) * (indicatorCount - 1))
|
||||
// stackView.widthAnchor.constraint(equalToConstant: CGFloat(width)).activate()
|
||||
for x in (0...(indicators.count-1)) {
|
||||
if (self.numberLabel.text == self.getDay(with: indicators[x].date)) {
|
||||
let color = (numberLabel.text == self.getDay(with: selectedDate)) ? selectedCellIndicatorColorConfiguration.getColor(surface) : unselectedCellIndicatorColorConfiguration.getColor(surface)
|
||||
|
||||
@ -35,7 +35,7 @@ open class CalendarFooterView: View {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
internal var containerSize: CGSize { CGSize(width: 304, height: 40) } //width:320/328
|
||||
internal var containerSize: CGSize { CGSize(width: 304, height: 40) }
|
||||
|
||||
internal var containerView = View().with {
|
||||
$0.clipsToBounds = true
|
||||
|
||||
@ -43,7 +43,7 @@ open class CalendarHeaderView: View {
|
||||
$0.backgroundColor = .clear
|
||||
}
|
||||
|
||||
private lazy var monthYearHeaderStackView = UIStackView().with {
|
||||
private lazy var topHeaderView = UIStackView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.distribution = .fill
|
||||
$0.spacing = VDSLayout.space1X
|
||||
@ -51,15 +51,22 @@ open class CalendarHeaderView: View {
|
||||
$0.backgroundColor = .clear
|
||||
}
|
||||
|
||||
internal var containerView = View().with {
|
||||
$0.clipsToBounds = true
|
||||
$0.backgroundColor = .clear
|
||||
}
|
||||
internal var monthView = View()
|
||||
private lazy var daysCollectionView: UICollectionView = {
|
||||
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
|
||||
collectionView.isScrollEnabled = false
|
||||
collectionView.translatesAutoresizingMaskIntoConstraints = false
|
||||
collectionView.delegate = self
|
||||
collectionView.dataSource = self
|
||||
collectionView.showsHorizontalScrollIndicator = false
|
||||
collectionView.showsVerticalScrollIndicator = false
|
||||
collectionView.backgroundColor = .clear
|
||||
collectionView.register(collectionViewCell.self, forCellWithReuseIdentifier: collectionViewCell.identifier)
|
||||
return collectionView
|
||||
}()
|
||||
|
||||
internal var previousMonthView = View()
|
||||
internal var nextMonthView = View()
|
||||
internal var daysView = View()
|
||||
internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
|
||||
let viewSize = 40.0
|
||||
|
||||
internal var previousButton = ButtonIcon().with {
|
||||
$0.kind = .ghost
|
||||
@ -86,20 +93,8 @@ open class CalendarHeaderView: View {
|
||||
$0.isAccessibilityElement = false
|
||||
}
|
||||
|
||||
private lazy var daysCollectionView: UICollectionView = {
|
||||
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
|
||||
collectionView.isScrollEnabled = false
|
||||
collectionView.translatesAutoresizingMaskIntoConstraints = false
|
||||
collectionView.delegate = self
|
||||
collectionView.dataSource = self
|
||||
collectionView.showsHorizontalScrollIndicator = false
|
||||
collectionView.showsVerticalScrollIndicator = false
|
||||
collectionView.backgroundColor = .clear
|
||||
collectionView.register(collectionViewCell.self, forCellWithReuseIdentifier: collectionViewCell.identifier)
|
||||
return collectionView
|
||||
}()
|
||||
|
||||
internal var monthYearLabelTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
|
||||
internal let monthYearLabelTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Lifecycle
|
||||
@ -112,56 +107,41 @@ open class CalendarHeaderView: View {
|
||||
super.setup()
|
||||
isAccessibilityElement = false
|
||||
|
||||
// containerView
|
||||
addSubview(containerView)
|
||||
containerView
|
||||
.pinTop()
|
||||
.pinBottom()
|
||||
.pinLeadingGreaterThanOrEqualTo()
|
||||
.pinTrailingLessThanOrEqualTo()
|
||||
.height(containerSize.height)
|
||||
.width(containerSize.width)
|
||||
containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
|
||||
// stackview
|
||||
containerView.addSubview(stackView)
|
||||
addSubview(stackView)
|
||||
stackView
|
||||
.pinTop()
|
||||
.pinBottom(VDSLayout.space1X)
|
||||
.pinLeading()
|
||||
.pinTrailing()
|
||||
stackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
|
||||
.height(containerSize.height)
|
||||
.width(containerSize.width)
|
||||
stackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
|
||||
// month label view, previous and next buttons
|
||||
stackView.addArrangedSubview(monthView)
|
||||
monthView.backgroundColor = .clear
|
||||
monthView.heightAnchor.constraint(equalToConstant: 40).isActive = true
|
||||
|
||||
// month Header stack view
|
||||
monthView.addSubview(monthYearHeaderStackView)
|
||||
monthYearHeaderStackView.pinToSuperView()
|
||||
// top header stack view
|
||||
stackView.addArrangedSubview(topHeaderView)
|
||||
topHeaderView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
|
||||
topHeaderView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
|
||||
// previous button
|
||||
monthYearHeaderStackView.addArrangedSubview(previousMonthView)
|
||||
previousMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
|
||||
topHeaderView.addArrangedSubview(previousMonthView)
|
||||
previousMonthView.widthAnchor.constraint(equalToConstant: viewSize).activate()
|
||||
previousMonthView.addSubview(previousButton)
|
||||
let spacing = VDSLayout.space1X
|
||||
previousButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing)
|
||||
previousButton.pinCenterY().pinCenterX()
|
||||
|
||||
// month year label
|
||||
monthYearHeaderStackView.addArrangedSubview(monthYearLabel)
|
||||
topHeaderView.addArrangedSubview(monthYearLabel)
|
||||
|
||||
// next button
|
||||
monthYearHeaderStackView.addArrangedSubview(nextMonthView)
|
||||
nextMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
|
||||
topHeaderView.addArrangedSubview(nextMonthView)
|
||||
nextMonthView.widthAnchor.constraint(equalToConstant: viewSize).activate()
|
||||
nextMonthView.addSubview(nextButton)
|
||||
nextButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing)
|
||||
nextButton.pinCenterY().pinCenterX()
|
||||
|
||||
// days Collection View
|
||||
stackView.addArrangedSubview(daysCollectionView)
|
||||
daysCollectionView.widthAnchor.constraint(equalTo: widthAnchor).activate()
|
||||
daysCollectionView.heightAnchor.constraint(equalTo: monthView.heightAnchor).activate()
|
||||
daysCollectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
|
||||
topHeaderView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
|
||||
daysCollectionView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
|
||||
}
|
||||
|
||||
open override func updateView() {
|
||||
@ -197,7 +177,7 @@ extension CalendarHeaderView: UICollectionViewDelegate, UICollectionViewDataSour
|
||||
}
|
||||
|
||||
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
|
||||
return CGSize(width: 40, height: 40)
|
||||
return CGSize(width: viewSize, height: viewSize)
|
||||
}
|
||||
|
||||
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user