refactored into base class for dealing with TileContainer Padding
This commit is contained in:
parent
119b71bb3a
commit
82a8a32ccb
@ -10,8 +10,45 @@ import VDSColorTokens
|
|||||||
import VDSFormControlsTokens
|
import VDSFormControlsTokens
|
||||||
import UIKit
|
import UIKit
|
||||||
|
|
||||||
|
public protocol Valuing {
|
||||||
|
static var defaultValue: Self { get }
|
||||||
|
var value: CGFloat { get }
|
||||||
|
}
|
||||||
|
|
||||||
@objc(VDSTileContainer)
|
@objc(VDSTileContainer)
|
||||||
open class TileContainer: Control {
|
open class TileContainer: TileContainerBase<TileContainer.Padding> {
|
||||||
|
|
||||||
|
/// Enum used to describe the padding choices used for this component.
|
||||||
|
public enum Padding: Valuing {
|
||||||
|
case padding2X
|
||||||
|
case padding4X
|
||||||
|
case padding6X
|
||||||
|
case padding8X
|
||||||
|
case padding12X
|
||||||
|
case custom(CGFloat)
|
||||||
|
|
||||||
|
public static var defaultValue: Self { .padding4X }
|
||||||
|
|
||||||
|
public var value: CGFloat {
|
||||||
|
switch self {
|
||||||
|
case .padding2X:
|
||||||
|
return VDSLayout.Spacing.space2X.value
|
||||||
|
case .padding4X:
|
||||||
|
return VDSLayout.Spacing.space4X.value
|
||||||
|
case .padding6X:
|
||||||
|
return VDSLayout.Spacing.space6X.value
|
||||||
|
case .padding8X:
|
||||||
|
return VDSLayout.Spacing.space8X.value
|
||||||
|
case .padding12X:
|
||||||
|
return VDSLayout.Spacing.space12X.value
|
||||||
|
case .custom(let padding):
|
||||||
|
return padding
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
open class TileContainerBase<PaddingType: Valuing>: Control {
|
||||||
|
|
||||||
//--------------------------------------------------
|
//--------------------------------------------------
|
||||||
// MARK: - Initializers
|
// MARK: - Initializers
|
||||||
@ -53,33 +90,6 @@ open class TileContainer: Control {
|
|||||||
case gradient(String, String)
|
case gradient(String, String)
|
||||||
case none
|
case none
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Enum used to describe the padding choices used for this component.
|
|
||||||
public enum Padding {
|
|
||||||
case padding2X
|
|
||||||
case padding4X
|
|
||||||
case padding6X
|
|
||||||
case padding8X
|
|
||||||
case padding12X
|
|
||||||
case custom(CGFloat)
|
|
||||||
|
|
||||||
public var value: CGFloat {
|
|
||||||
switch self {
|
|
||||||
case .padding2X:
|
|
||||||
return VDSLayout.Spacing.space2X.value
|
|
||||||
case .padding4X:
|
|
||||||
return VDSLayout.Spacing.space4X.value
|
|
||||||
case .padding6X:
|
|
||||||
return VDSLayout.Spacing.space6X.value
|
|
||||||
case .padding8X:
|
|
||||||
return VDSLayout.Spacing.space8X.value
|
|
||||||
case .padding12X:
|
|
||||||
return VDSLayout.Spacing.space12X.value
|
|
||||||
case .custom(let padding):
|
|
||||||
return padding
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Enum used to describe the aspect ratios used for this component.
|
/// Enum used to describe the aspect ratios used for this component.
|
||||||
public enum AspectRatio: String, CaseIterable {
|
public enum AspectRatio: String, CaseIterable {
|
||||||
@ -130,7 +140,7 @@ open class TileContainer: Control {
|
|||||||
open var backgroundEffect: BackgroundEffect = .none { didSet { setNeedsUpdate() } }
|
open var backgroundEffect: BackgroundEffect = .none { didSet { setNeedsUpdate() } }
|
||||||
|
|
||||||
/// Sets the inside padding for the component
|
/// Sets the inside padding for the component
|
||||||
open var padding: Padding = .padding4X { didSet { setNeedsUpdate() } }
|
open var padding: PaddingType = PaddingType.defaultValue { didSet { setNeedsUpdate() } }
|
||||||
|
|
||||||
/// Applies a background color if backgroundImage prop fails or has trouble loading.
|
/// Applies a background color if backgroundImage prop fails or has trouble loading.
|
||||||
open var imageFallbackColor: Surface = .light { didSet { setNeedsUpdate() } }
|
open var imageFallbackColor: Surface = .light { didSet { setNeedsUpdate() } }
|
||||||
@ -253,7 +263,6 @@ open class TileContainer: Control {
|
|||||||
super.reset()
|
super.reset()
|
||||||
shouldUpdateView = false
|
shouldUpdateView = false
|
||||||
color = .white
|
color = .white
|
||||||
padding = .padding4X
|
|
||||||
aspectRatio = .ratio1x1
|
aspectRatio = .ratio1x1
|
||||||
imageFallbackColor = .light
|
imageFallbackColor = .light
|
||||||
width = nil
|
width = nil
|
||||||
@ -395,7 +404,7 @@ open class TileContainer: Control {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
extension TileContainer {
|
extension TileContainerBase {
|
||||||
|
|
||||||
struct DropshadowConfiguration: Dropshadowable {
|
struct DropshadowConfiguration: Dropshadowable {
|
||||||
var shadowColorConfiguration: AnyColorable = SurfaceColorConfiguration().with {
|
var shadowColorConfiguration: AnyColorable = SurfaceColorConfiguration().with {
|
||||||
@ -408,7 +417,7 @@ extension TileContainer {
|
|||||||
|
|
||||||
final class BackgroundColorConfiguration: ObjectColorable {
|
final class BackgroundColorConfiguration: ObjectColorable {
|
||||||
|
|
||||||
typealias ObjectType = TileContainer
|
typealias ObjectType = TileContainerBase
|
||||||
|
|
||||||
let primaryColorConfig = SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, VDSColor.backgroundPrimaryDark)
|
let primaryColorConfig = SurfaceColorConfiguration(VDSColor.backgroundPrimaryLight, VDSColor.backgroundPrimaryDark)
|
||||||
let secondaryColorConfig = SurfaceColorConfiguration(VDSColor.backgroundSecondaryLight, VDSColor.backgroundSecondaryDark)
|
let secondaryColorConfig = SurfaceColorConfiguration(VDSColor.backgroundSecondaryLight, VDSColor.backgroundSecondaryDark)
|
||||||
@ -418,7 +427,7 @@ extension TileContainer {
|
|||||||
|
|
||||||
required init() { }
|
required init() { }
|
||||||
|
|
||||||
func getColor(_ object: TileContainer) -> UIColor {
|
func getColor(_ object: ObjectType) -> UIColor {
|
||||||
switch object.color {
|
switch object.color {
|
||||||
case .primary:
|
case .primary:
|
||||||
primaryColorConfig.getColor(object.surface)
|
primaryColorConfig.getColor(object.surface)
|
||||||
|
|||||||
@ -16,7 +16,38 @@ import Combine
|
|||||||
/// while it can include an arrow CTA, it does not require one in order to
|
/// while it can include an arrow CTA, it does not require one in order to
|
||||||
/// function.
|
/// function.
|
||||||
@objc(VDSTilelet)
|
@objc(VDSTilelet)
|
||||||
open class Tilelet: TileContainer {
|
open class Tilelet: TileContainerBase<Tilelet.Padding> {
|
||||||
|
|
||||||
|
/// Enum used to describe the padding choices used for this component.
|
||||||
|
public enum Padding: String, Valuing, CaseIterable {
|
||||||
|
case small
|
||||||
|
case large
|
||||||
|
|
||||||
|
public static var defaultValue: Self { .large }
|
||||||
|
|
||||||
|
public var value: CGFloat {
|
||||||
|
switch self {
|
||||||
|
case .small:
|
||||||
|
return UIDevice.isIPad ? VDSLayout.Spacing.space3X.value : VDSLayout.Spacing.space4X.value
|
||||||
|
case .large:
|
||||||
|
return UIDevice.isIPad ? VDSLayout.Spacing.space4X.value : VDSLayout.Spacing.space6X.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fileprivate var titleLockupBottomSpacing: CGFloat {
|
||||||
|
switch self.value {
|
||||||
|
case VDSLayout.Spacing.space3X.value:
|
||||||
|
return VDSLayout.Spacing.space4X.value
|
||||||
|
case VDSLayout.Spacing.space4X.value:
|
||||||
|
return VDSLayout.Spacing.space6X.value
|
||||||
|
case VDSLayout.Spacing.space4X.value:
|
||||||
|
return VDSLayout.Spacing.space8X.value
|
||||||
|
default:
|
||||||
|
return VDSLayout.Spacing.space4X.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//--------------------------------------------------
|
//--------------------------------------------------
|
||||||
// MARK: - Initializers
|
// MARK: - Initializers
|
||||||
@ -392,7 +423,7 @@ open class Tilelet: TileContainer {
|
|||||||
view = titleLockupContainerView
|
view = titleLockupContainerView
|
||||||
}
|
}
|
||||||
if let view {
|
if let view {
|
||||||
stackView.setCustomSpacing(padding.tiletSpacing, after: view)
|
stackView.setCustomSpacing(padding.titleLockupBottomSpacing, after: view)
|
||||||
}
|
}
|
||||||
if iconContainerView.superview == nil {
|
if iconContainerView.superview == nil {
|
||||||
stackView.addArrangedSubview(iconContainerView)
|
stackView.addArrangedSubview(iconContainerView)
|
||||||
@ -403,20 +434,3 @@ open class Tilelet: TileContainer {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
extension TileContainer.Padding {
|
|
||||||
fileprivate var tiletSpacing: CGFloat {
|
|
||||||
switch self {
|
|
||||||
case .padding2X:
|
|
||||||
return 16
|
|
||||||
case .padding4X:
|
|
||||||
return 24
|
|
||||||
case .padding6X:
|
|
||||||
return 32
|
|
||||||
case .padding8X:
|
|
||||||
return 48
|
|
||||||
default:
|
|
||||||
return 16
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user