mbrucedogs/vds_ios
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Digital ACT-191 ONEAPP-7958 story: Fixed issues in constraints for the component and updated to flexible width

Browse Source
This commit is contained in:
vasavk 2024-05-08 12:02:08 +05:30
parent 8560d7a6d4
commit 8d415a72f1
4 changed files with 46 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
VDS/Components/Calendar/Calendar.swift
View File

@ -68,11 +68,12 @@ open class CalendarBase: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Private Properties // 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 cellItemSize = CGSize(width: 40, height: 40)
private let headerHeight = 88.0 private let headerHeight = 88.0
private let footerHeight = 40.0 private let footerHeight = 40.0
private let calendarWidth = 304.0
private let items = 35 private let items = 35
private var selectedIndexPath : IndexPath? private var selectedIndexPath : IndexPath?
@ -127,22 +128,19 @@ open class CalendarBase: View {
.pinTrailingLessThanOrEqualTo() .pinTrailingLessThanOrEqualTo()
.height(containerSize.height) .height(containerSize.height)
.width(containerSize.width) .width(containerSize.width)
containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate() containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
let spacing = CGFloat(VDSFormControls.spaceInset) //CGFloat(VDSLayout.space2X)
// Calendar View // Calendar View
containerView.addSubview(collectionView) containerView.addSubview(collectionView)
let calendarHeight = containerSize.height - (2 * VDSLayout.space4X)
let spacing = (containerSize.width - calendarWidth) / 2
collectionView collectionView
.pinTop(VDSLayout.space4X) .pinTop(VDSLayout.space4X)
.pinBottom(VDSLayout.space4X) .pinBottom(VDSLayout.space4X)
.pinLeading(spacing) .pinLeading(spacing)
.pinTrailing(spacing) .pinTrailing(spacing)
let width = containerSize.width - (2 * spacing) .width(calendarWidth)
collectionView.widthAnchor.constraint(equalToConstant: width).activate() .height(calendarHeight)
let height = containerSize.height - (2 * VDSLayout.space4X)
collectionView.heightAnchor.constraint(equalToConstant: height).activate()
collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate() collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
} }

7
VDS/Components/Calendar/CalendarDateCollectionViewCell.swift
View File

@ -33,6 +33,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
$0.spacing = VDSLayout.space1X $0.spacing = VDSLayout.space1X
$0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal) $0.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
$0.setContentHuggingPriority(.defaultHigh, for: .horizontal) $0.setContentHuggingPriority(.defaultHigh, for: .horizontal)
$0.backgroundColor = .clear
} }
}() }()
@ -87,7 +88,7 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
// Indicators // Indicators
containerView.addSubview(stackView) containerView.addSubview(stackView)
let topPos = containerSize.height * 0.7 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() stackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
} }
@ -141,8 +142,8 @@ final class CalendarDateCollectionViewCell: UICollectionViewCell {
// add indicators // add indicators
if indicatorCount > 0 { if indicatorCount > 0 {
let width = (indicatorCount * 8) + (Int(VDSLayout.space1X) * (indicatorCount - 1)) // let width = (indicatorCount * 8) + (Int(VDSLayout.space1X) * (indicatorCount - 1))
stackView.widthAnchor.constraint(equalToConstant: CGFloat(width)).activate() // stackView.widthAnchor.constraint(equalToConstant: CGFloat(width)).activate()
for x in (0...(indicators.count-1)) { for x in (0...(indicators.count-1)) {
if (self.numberLabel.text == self.getDay(with: indicators[x].date)) { if (self.numberLabel.text == self.getDay(with: indicators[x].date)) {
let color = (numberLabel.text == self.getDay(with: selectedDate)) ? selectedCellIndicatorColorConfiguration.getColor(surface) : unselectedCellIndicatorColorConfiguration.getColor(surface) let color = (numberLabel.text == self.getDay(with: selectedDate)) ? selectedCellIndicatorColorConfiguration.getColor(surface) : unselectedCellIndicatorColorConfiguration.getColor(surface)

2
VDS/Components/Calendar/CalendarFooterView.swift
View File

@ -35,7 +35,7 @@ open class CalendarFooterView: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Private Properties // 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 { internal var containerView = View().with {
$0.clipsToBounds = true $0.clipsToBounds = true

90
VDS/Components/Calendar/CalendarHeaderView.swift
View File

@ -43,7 +43,7 @@ open class CalendarHeaderView: View {
$0.backgroundColor = .clear $0.backgroundColor = .clear
} }
private lazy var monthYearHeaderStackView = UIStackView().with { private lazy var topHeaderView = UIStackView().with {
$0.translatesAutoresizingMaskIntoConstraints = false $0.translatesAutoresizingMaskIntoConstraints = false
$0.distribution = .fill $0.distribution = .fill
$0.spacing = VDSLayout.space1X $0.spacing = VDSLayout.space1X
@ -51,15 +51,22 @@ open class CalendarHeaderView: View {
$0.backgroundColor = .clear $0.backgroundColor = .clear
} }
internal var containerView = View().with { private lazy var daysCollectionView: UICollectionView = {
$0.clipsToBounds = true let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
$0.backgroundColor = .clear collectionView.isScrollEnabled = false
} collectionView.translatesAutoresizingMaskIntoConstraints = false
internal var monthView = View() 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 previousMonthView = View()
internal var nextMonthView = View() internal var nextMonthView = View()
internal var daysView = View() let viewSize = 40.0
internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
internal var previousButton = ButtonIcon().with { internal var previousButton = ButtonIcon().with {
$0.kind = .ghost $0.kind = .ghost
@ -86,20 +93,8 @@ open class CalendarHeaderView: View {
$0.isAccessibilityElement = false $0.isAccessibilityElement = false
} }
private lazy var daysCollectionView: UICollectionView = { internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout()) internal let monthYearLabelTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
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)
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Lifecycle // MARK: - Lifecycle
@ -112,56 +107,41 @@ open class CalendarHeaderView: View {
super.setup() super.setup()
isAccessibilityElement = false isAccessibilityElement = false
// containerView
addSubview(containerView)
containerView
.pinTop()
.pinBottom()
.pinLeadingGreaterThanOrEqualTo()
.pinTrailingLessThanOrEqualTo()
.height(containerSize.height)
.width(containerSize.width)
containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
// stackview // stackview
containerView.addSubview(stackView) addSubview(stackView)
stackView stackView
.pinTop() .pinTop()
.pinBottom(VDSLayout.space1X) .pinBottom(VDSLayout.space1X)
.pinLeading() .pinLeading()
.pinTrailing() .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 // top header stack view
stackView.addArrangedSubview(monthView) stackView.addArrangedSubview(topHeaderView)
monthView.backgroundColor = .clear topHeaderView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
monthView.heightAnchor.constraint(equalToConstant: 40).isActive = true topHeaderView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
// month Header stack view
monthView.addSubview(monthYearHeaderStackView)
monthYearHeaderStackView.pinToSuperView()
// previous button // previous button
monthYearHeaderStackView.addArrangedSubview(previousMonthView) topHeaderView.addArrangedSubview(previousMonthView)
previousMonthView.widthAnchor.constraint(equalToConstant: 40).activate() previousMonthView.widthAnchor.constraint(equalToConstant: viewSize).activate()
previousMonthView.addSubview(previousButton) previousMonthView.addSubview(previousButton)
let spacing = VDSLayout.space1X previousButton.pinCenterY().pinCenterX()
previousButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing)
// month year label // month year label
monthYearHeaderStackView.addArrangedSubview(monthYearLabel) topHeaderView.addArrangedSubview(monthYearLabel)
// next button // next button
monthYearHeaderStackView.addArrangedSubview(nextMonthView) topHeaderView.addArrangedSubview(nextMonthView)
nextMonthView.widthAnchor.constraint(equalToConstant: 40).activate() nextMonthView.widthAnchor.constraint(equalToConstant: viewSize).activate()
nextMonthView.addSubview(nextButton) nextMonthView.addSubview(nextButton)
nextButton.pinTop(spacing).pinBottom(spacing).pinLeading(spacing).pinTrailing(spacing) nextButton.pinCenterY().pinCenterX()
// days Collection View // days Collection View
stackView.addArrangedSubview(daysCollectionView) stackView.addArrangedSubview(daysCollectionView)
daysCollectionView.widthAnchor.constraint(equalTo: widthAnchor).activate() topHeaderView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
daysCollectionView.heightAnchor.constraint(equalTo: monthView.heightAnchor).activate() daysCollectionView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
daysCollectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
} }
open override func updateView() { open override func updateView() {
@ -197,7 +177,7 @@ extension CalendarHeaderView: UICollectionViewDelegate, UICollectionViewDataSour
} }
public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 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 { public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {