Digital ACT-191 ONEAPP-7013 story: Fixed Constraints issue and refactored Code

This commit is contained in:
vasavk 2024-06-14 13:17:29 +05:30
parent de8a2ebdee
commit a829df86e5

View File

@ -33,20 +33,6 @@ open class Carousel: View {
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Enums // MARK: - Enums
//-------------------------------------------------- //--------------------------------------------------
/// Enum used to describe the aspect ratios used for this component.
public enum AspectRatio: String, CaseIterable {
case ratio1x1 = "1:1"
case ratio3x4 = "3:4"
case ratio4x3 = "4:3"
case ratio2x3 = "2:3"
case ratio3x2 = "3:2"
case ratio9x16 = "9:16"
case ratio16x9 = "16:9"
case ratio1x2 = "1:2"
case ratio2x1 = "2:1"
case none
}
/// Space between each tile. The default value will be 24px (6X) in tablet and 12px (3X) in mobile. /// Space between each tile. The default value will be 24px (6X) in tablet and 12px (3X) in mobile.
public enum Gutter: String, CaseIterable { public enum Gutter: String, CaseIterable {
case twelvePX = "12px" case twelvePX = "12px"
@ -73,7 +59,6 @@ open class Carousel: View {
case standard, minimum, none case standard, minimum, none
} }
// TO DO: move to model class
/// Enum used to describe the vertical of slotAlignment. /// Enum used to describe the vertical of slotAlignment.
public enum Vertical: String, CaseIterable { public enum Vertical: String, CaseIterable {
case top, middle, bottom case top, middle, bottom
@ -94,7 +79,7 @@ open class Carousel: View {
// MARK: - Public Properties // MARK: - Public Properties
//-------------------------------------------------- //--------------------------------------------------
/// Aspect-ratio options for tilelet in the carousel. If 'none' is passed, the tilelet will take the height of the tallest item in the carousel. /// Aspect-ratio options for tilelet in the carousel. If 'none' is passed, the tilelet will take the height of the tallest item in the carousel.
open var aspectRatio: AspectRatio = .ratio1x1 { didSet { setNeedsUpdate() } } open var aspectRatio: Tilelet.AspectRatio = .ratio1x1 { didSet { setNeedsUpdate() } }
/// Data used to render tilelets in the carousel. /// Data used to render tilelets in the carousel.
open var data: [Any] = [] { didSet { setNeedsUpdate() } } open var data: [Any] = [] { didSet { setNeedsUpdate() } }
@ -140,7 +125,7 @@ open class Carousel: View {
} }
/// A callback when moving the carousel. Returns event object and selectedGroupIndex. /// A callback when moving the carousel. Returns event object and selectedGroupIndex.
open var onChange: ((Int) -> Void)? { // TO DO: return object and index open var onChange: ((Int) -> Void)? {
get { nil } get { nil }
set { set {
onChangeCancellable?.cancel() onChangeCancellable?.cancel()
@ -231,28 +216,32 @@ open class Carousel: View {
$0.backgroundColor = .clear $0.backgroundColor = .clear
} }
/// Previous button to show previous slide. /// Previous button to show previous slide.
private var previousButton = ButtonIcon().with { private var previousButton = ButtonIcon().with {
$0.kind = .lowContrast $0.kind = .lowContrast
$0.iconName = .leftCaret $0.iconName = .leftCaret
$0.iconOffset = .init(x: -2, y: 0) $0.iconOffset = .init(x: -2, y: 0)
$0.customContainerSize = UIDevice.isIPad ? 40 : 28 $0.customContainerSize = UIDevice.isIPad ? 40 : 28
$0.icon.customSize = UIDevice.isIPad ? 16 : 12 $0.icon.customSize = UIDevice.isIPad ? 16 : 12
} }
/// Next button to show next slide. /// Next button to show next slide.
private var nextButton = ButtonIcon().with { private var nextButton = ButtonIcon().with {
$0.kind = .lowContrast $0.kind = .lowContrast
$0.iconName = .rightCaret $0.iconName = .rightCaret
$0.iconOffset = .init(x: 2, y: 0) $0.iconOffset = .init(x: 2, y: 0)
$0.customContainerSize = UIDevice.isIPad ? 40 : 28 $0.customContainerSize = UIDevice.isIPad ? 40 : 28
$0.icon.customSize = UIDevice.isIPad ? 16 : 12 $0.icon.customSize = UIDevice.isIPad ? 16 : 12
} }
/// A publisher for when the scrubber position changes. Passes parameters (position). /// A publisher for when the scrubber position changes. Passes parameters (position).
open var onChangePublisher = PassthroughSubject<Int, Never>() open var onChangePublisher = PassthroughSubject<Int, Never>()
private var onChangeCancellable: AnyCancellable? private var onChangeCancellable: AnyCancellable?
/// A publisher for when the carousel moves. Passes parameters (data).
open var onScrollPublisher = PassthroughSubject<Array<Any>, Never>()
private var onScrollCancellable: AnyCancellable?
internal var _layout: CarouselScrollbar.Layout = UIDevice.isIPad ? .threeUP : .oneUP internal var _layout: CarouselScrollbar.Layout = UIDevice.isIPad ? .threeUP : .oneUP
internal var _pagination: CarouselPaginationModel = .init(kind: .lowContrast, floating: true) internal var _pagination: CarouselPaginationModel = .init(kind: .lowContrast, floating: true)
internal var _paginationDisplay: PaginationDisplay = .none internal var _paginationDisplay: PaginationDisplay = .none
@ -320,8 +309,10 @@ open class Carousel: View {
.pinBottom() .pinBottom()
.pinLeading() .pinLeading()
.pinTrailing() .pinTrailing()
.heightGreaterThanEqualTo(scrollbarTopSpace + containerSize.height) .heightGreaterThanEqualTo(containerSize.height)
contentStackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate() contentStackView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
addlisteners()
} }
open override func updateView() { open override func updateView() {
@ -354,7 +345,7 @@ open class Carousel: View {
for x in 0...data.count - 1 { for x in 0...data.count - 1 {
let carouselSlot = View().with { let carouselSlot = View().with {
$0.clipsToBounds = true $0.clipsToBounds = true
$0.backgroundColor = UIColor(red: CGFloat(216) / 255.0, green: CGFloat(218) / 255.0, blue: CGFloat(218) / 255.0, alpha: 1) $0.backgroundColor = UIColor(red: CGFloat(216) / 255.0, green: CGFloat(218) / 255.0, blue: CGFloat(218) / 255.0, alpha: 1)
} }
scrollView.addSubview(carouselSlot) scrollView.addSubview(carouselSlot)
carouselSlot carouselSlot
@ -365,7 +356,6 @@ open class Carousel: View {
.height(slotHeight) .height(slotHeight)
xPos = xPos + minimumSlotWidth + gutter.value xPos = xPos + minimumSlotWidth + gutter.value
} }
scrollView.heightAnchor.constraint(equalToConstant: slotHeight).isActive = true
scrollView.contentSize = CGSize(width: xPos - gutter.value, height: slotHeight) scrollView.contentSize = CGSize(width: xPos - gutter.value, height: slotHeight)
} }
@ -380,7 +370,6 @@ open class Carousel: View {
containerViewHeightConstraint?.isActive = true containerViewHeightConstraint?.isActive = true
containerStackHeightConstraint?.isActive = true containerStackHeightConstraint?.isActive = true
addlisteners()
layoutIfNeeded() layoutIfNeeded()
} }
@ -401,10 +390,10 @@ open class Carousel: View {
previousButton.onClick = { _ in self.previousButtonClick() } previousButton.onClick = { _ in self.previousButtonClick() }
//setup test page to show scrubber id was changed //setup test page to show scrubber id was changed
// carouselScrollBar.onScrubberDrag = { [weak self] scrubberId in // carouselScrollBar.onScrubberDrag = { [weak self] scrubberId in
// guard let self else { return } // guard let self else { return }
// updateScrollPosition(position: scrubberId, callbackText:"onScrubberDrag") // updateScrollPosition(position: scrubberId, callbackText:"onScrubberDrag")
// } // }
/// will be called when the thumb move forward. /// will be called when the thumb move forward.
carouselScrollBar.onMoveForward = { [weak self] scrubberId in carouselScrollBar.onMoveForward = { [weak self] scrubberId in