Digital ACT-191 ONEAPP-7013 story: removed unused code, updated Gutter pattern, renamed selectedIndex to groupIndex

This commit is contained in:
Vasavi Kanamarlapudi 2024-07-19 11:17:54 +05:30
parent 076f4c082c
commit f1b5fd18c9

View File

@ -39,7 +39,9 @@ open class Carousel: View {
} }
/// Enum used to describe the peek for this component. /// Enum used to describe the peek for this component.
/// This is how much a tile is partially visible. It is measured by the distance between the edge of the tile and the edge of the viewport or carousel container. A peek can appear on the left and/or right edge of the carousel container or viewport, depending on the carousels scroll position. /// This is how much a tile is partially visible. It is measured by the distance between the edge of
/// the tile and the edge of the viewport or carousel container. A peek can appear on the left and/or
/// right edge of the carousel container or viewport, depending on the carousels scroll position.
public enum Peek: String, CaseIterable { public enum Peek: String, CaseIterable {
case standard, minimum, none case standard, minimum, none
} }
@ -53,23 +55,19 @@ open class Carousel: View {
public enum Horizontal: String, CaseIterable { public enum Horizontal: String, CaseIterable {
case left, center, right case left, center, right
} }
/// Enum used to describe the width of a fixed value or percentage of parent's width.
public enum Width {
case percentage(CGFloat)
case value(CGFloat)
}
/// 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 , DefaultValuing {
case twelvePX = "12px" case gutter3X = "3X"
case twentyFourPX = "24px" case gutter6X = "6X"
var value: CGFloat { public static var defaultValue: Self { UIDevice.isIPad ? .gutter6X : .gutter3X }
public var value: CGFloat {
switch self { switch self {
case .twelvePX: case .gutter3X:
VDSLayout.space3X VDSLayout.space3X
case .twentyFourPX: case .gutter6X:
VDSLayout.space6X VDSLayout.space6X
} }
} }
@ -82,9 +80,10 @@ open class Carousel: View {
open var views: [UIView] = [] { didSet { setNeedsUpdate() } } open var views: [UIView] = [] { didSet { setNeedsUpdate() } }
/// 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.
open var gutter: Gutter = UIDevice.isIPad ? .twentyFourPX : .twelvePX { didSet { setNeedsUpdate() } } open var gutter: Gutter = Gutter.defaultValue { didSet { setNeedsUpdate() } }
/// The amount of slides visible in the carousel container at one time. The default value will be 3UP in tablet and 1UP in mobile. /// The amount of slides visible in the carousel container at one time.
/// The default value will be 3UP in tablet and 1UP in mobile.
open var layout: CarouselScrollbar.Layout = UIDevice.isIPad ? .threeUP : .oneUP { open var layout: CarouselScrollbar.Layout = UIDevice.isIPad ? .threeUP : .oneUP {
didSet { didSet {
carouselScrollBar.position = 0 carouselScrollBar.position = 0
@ -116,11 +115,12 @@ open class Carousel: View {
/// The default value will be 12px in tablet and 8px in mobile. These values are the default in order to avoid overlapping content within the carousel. /// The default value will be 12px in tablet and 8px in mobile. These values are the default in order to avoid overlapping content within the carousel.
open var paginationInset: CGFloat = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X { didSet { updatePaginationInset() } } open var paginationInset: CGFloat = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X { didSet { updatePaginationInset() } }
/// Options for user to configure the partially-visible tile in group. Setting peek to 'none' will display arrow navigation icons on mobile devices. /// Options for user to configure the partially-visible tile in group.
/// Setting peek to 'none' will display arrow navigation icons on mobile devices.
open var peek: Peek = .standard { didSet { setNeedsUpdate() } } open var peek: Peek = .standard { didSet { setNeedsUpdate() } }
/// The initial visible slide's index in the carousel. /// The initial visible slide's index in the carousel.
open var selectedIndex: Int? { didSet { setNeedsUpdate() } } open var groupIndex: Int? { didSet { setNeedsUpdate() } }
/// If provided, will set the alignment for slot content when the slots has different heights. /// If provided, will set the alignment for slot content when the slots has different heights.
open var slotAlignment: CarouselSlotAlignmentModel? = .init(vertical: .top, horizontal: .left) { didSet { setNeedsUpdate() } } open var slotAlignment: CarouselSlotAlignmentModel? = .init(vertical: .top, horizontal: .left) { didSet { setNeedsUpdate() } }
@ -184,15 +184,13 @@ open class Carousel: View {
private var containerViewHeightConstraint: NSLayoutConstraint? private var containerViewHeightConstraint: NSLayoutConstraint?
private var prevButtonLeadingConstraint: NSLayoutConstraint? private var prevButtonLeadingConstraint: NSLayoutConstraint?
private var nextButtonTrailingConstraint: NSLayoutConstraint? private var nextButtonTrailingConstraint: NSLayoutConstraint?
private var containerLeadingConstraint: NSLayoutConstraint?
// The scrollbar has top 5X space. So the expected top space is adjusted for tablet and mobile. // The scrollbar has top 5X space. So the expected top space is adjusted for tablet and mobile.
let scrollbarTopSpace = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space1X let scrollbarTopSpace = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space1X
var slotDefaultHeight = 50.0 var slotDefaultHeight = 50.0
var peekMinimum = 24.0 var peekMinimum = 24.0
var minimumSlotWidth = 0.0 var minimumSlotWidth = 0.0
var carouselScrollbarMinWidth = 96.0
//-------------------------------------------------- //--------------------------------------------------
// MARK: - Lifecycle // MARK: - Lifecycle
@ -280,10 +278,10 @@ open class Carousel: View {
updatePaginationControls() updatePaginationControls()
addCarouselSlots() addCarouselSlots()
// If selectedIndex is received, the carousel should update its position. // If groupIndex is received, the carousel should update its position.
if let selectedIndex { if let groupIndex {
let totalPos = totalPositions() let totalPos = totalPositions()
carouselScrollBar.position = selectedIndex >= totalPos ? totalPos : selectedIndex+1 carouselScrollBar.position = groupIndex >= totalPos ? totalPos : groupIndex+1
} }
} }
@ -295,7 +293,7 @@ open class Carousel: View {
pagination = .init(kind: .lowContrast, floating: true) pagination = .init(kind: .lowContrast, floating: true)
paginationDisplay = .none paginationDisplay = .none
paginationInset = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X paginationInset = UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
gutter = UIDevice.isIPad ? .twentyFourPX : .twelvePX gutter = UIDevice.isIPad ? .gutter6X : .gutter3X
peek = .standard peek = .standard
} }