Digital ACT-191 ONEAPP-7013 story: removed unused code, updated Gutter pattern, renamed selectedIndex to groupIndex
This commit is contained in:
parent
076f4c082c
commit
f1b5fd18c9
@ -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 carousel’s 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 carousel’s scroll position.
|
||||||
public enum Peek: String, CaseIterable {
|
public enum Peek: String, CaseIterable {
|
||||||
case standard, minimum, none
|
case standard, minimum, none
|
||||||
}
|
}
|
||||||
@ -54,22 +56,18 @@ open class Carousel: View {
|
|||||||
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,7 +184,6 @@ 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
|
||||||
@ -192,7 +191,6 @@ open class Carousel: View {
|
|||||||
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user