Digital ACT-191 ONEAPP-7013 story: Fixed Constraints issue and refactored Code
This commit is contained in:
parent
de8a2ebdee
commit
a829df86e5
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user