refactored stackview and added in badge
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce
parent
2f603b1a64
commit
f868312b1f
@ -10,31 +10,6 @@ import Foundation
|
||||
import VDSColorTokens
|
||||
import UIKit
|
||||
|
||||
public enum TiletTitleTypographicalStyle: String, Codable, EnumSubset {
|
||||
case TitleXLarge
|
||||
case BoldTitleXLarge
|
||||
case TitleLarge
|
||||
case BoldTitleLarge
|
||||
case TitleMedium
|
||||
case BoldTitleMedium
|
||||
case TitleSmall
|
||||
case BoldTitleSmall
|
||||
|
||||
public var defaultValue: TitleLockupTitleTypographicalStyle { .BoldTitleSmall }
|
||||
}
|
||||
|
||||
public enum TiletOtherTypographicalStyle: String, Codable, EnumSubset {
|
||||
case BodyLarge
|
||||
case BoldBodyLarge
|
||||
case BodyMedium
|
||||
case BoldBodyMedium
|
||||
case BodySmall
|
||||
case BoldBodySmall
|
||||
|
||||
public var defaultValue: TitleLockupOtherTypographicalStyle { .BodySmall }
|
||||
}
|
||||
|
||||
|
||||
@objc(VDSTilet)
|
||||
open class Tilet: TileContainer {
|
||||
|
||||
@ -58,12 +33,23 @@ open class Tilet: TileContainer {
|
||||
//--------------------------------------------------
|
||||
// MARK: - Private Properties
|
||||
//--------------------------------------------------
|
||||
private var stackView = UIStackView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
$0.axis = .vertical
|
||||
$0.distribution = .fill
|
||||
$0.spacing = 5
|
||||
}
|
||||
|
||||
private var titleLockupContainerView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
}
|
||||
|
||||
private var titleLockup = TitleLockup().with {
|
||||
let configs = [
|
||||
TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall],
|
||||
neighboring: [
|
||||
.BodySmall, .BoldBodySmall,
|
||||
.BodyMedium, .BoldBodyMedium
|
||||
.BodyMedium, .BoldBodyMedium
|
||||
],
|
||||
spacing: 8.0,
|
||||
deviceType: .iPhone),
|
||||
@ -84,8 +70,8 @@ open class Tilet: TileContainer {
|
||||
.BodyLarge, .BoldBodyLarge,
|
||||
.TitleMedium, .BoldTitleMedium
|
||||
],
|
||||
spacing: 12.0,
|
||||
deviceType: .iPhone),
|
||||
spacing: 12.0,
|
||||
deviceType: .iPhone),
|
||||
|
||||
TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall,
|
||||
.TitleMedium, .BoldTitleMedium],
|
||||
@ -104,30 +90,34 @@ open class Tilet: TileContainer {
|
||||
.BodyLarge, .BoldBodyLarge,
|
||||
.TitleSmall, .BoldTitleSmall
|
||||
],
|
||||
spacing: 12.0,
|
||||
deviceType: .iPad),
|
||||
spacing: 12.0,
|
||||
deviceType: .iPad),
|
||||
|
||||
TypographicalStyleDeviceSpacingConfig([.TitleXLarge, .BoldTitleXLarge],
|
||||
neighboring: [
|
||||
.BodyLarge, .BoldBodyLarge,
|
||||
.TitleMedium, .BoldTitleMedium
|
||||
],
|
||||
spacing: 16.0,
|
||||
deviceType: .iPad)
|
||||
|
||||
]
|
||||
spacing: 16.0,
|
||||
deviceType: .iPad)
|
||||
|
||||
]
|
||||
|
||||
$0.bottomTypographicalStyleSpacingConfig = TypographicalStyleSpacingConfig(configs: configs)
|
||||
}
|
||||
|
||||
private var badgeContainerView = UIView().with {
|
||||
$0.translatesAutoresizingMaskIntoConstraints = false
|
||||
}
|
||||
|
||||
private var badge = Badge().with {
|
||||
$0.fillColor = .red
|
||||
}
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Public Properties
|
||||
//--------------------------------------------------
|
||||
//style
|
||||
open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }}
|
||||
open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }}
|
||||
|
||||
private var _textWidth: CGFloat?
|
||||
open var textWidth: CGFloat? {
|
||||
get { _textWidth }
|
||||
@ -161,20 +151,19 @@ open class Tilet: TileContainer {
|
||||
}
|
||||
}
|
||||
|
||||
//badge
|
||||
open var showBadge: Bool = false { didSet { didChange() }}
|
||||
open var badgeText: String = "" { didSet { didChange() }}
|
||||
open var badgeColor: BadgeFillColor = .red { didSet { didChange() }}
|
||||
public var badgeModel: TiletBadgeModel? { didSet { didChange() }}
|
||||
|
||||
//text
|
||||
open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }}
|
||||
open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }}
|
||||
open var titleText: String = "" { didSet { didChange() }}
|
||||
open var titleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
|
||||
open var subTitleText: String = "" { didSet { didChange() }}
|
||||
open var subTitleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
|
||||
open var subTitleColor: Use = .primary { didSet { didChange() }}
|
||||
|
||||
|
||||
//icons
|
||||
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - Constraints
|
||||
@ -192,14 +181,27 @@ open class Tilet: TileContainer {
|
||||
aspectRatio = .none
|
||||
containerBackgroundColor = .black
|
||||
|
||||
addContentView(titleLockup, shouldPin: false)
|
||||
titleLockup.pinTop()
|
||||
titleLockup.pinLeading()
|
||||
titleLockup.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor).isActive = true
|
||||
addContentView(stackView)
|
||||
|
||||
//either you are 100% width of the tileContainer.contentView
|
||||
titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: containerView.trailingAnchor)
|
||||
//badge
|
||||
badgeContainerView.addSubview(badge)
|
||||
badge
|
||||
.pinTop()
|
||||
.pinLeading()
|
||||
.pinBottom()
|
||||
badge.trailingAnchor.constraint(lessThanOrEqualTo: badgeContainerView.trailingAnchor).isActive = true
|
||||
|
||||
titleLockupContainerView.addSubview(titleLockup)
|
||||
titleLockup
|
||||
.pinTop()
|
||||
.pinLeading()
|
||||
.pinBottom()
|
||||
titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: titleLockupContainerView.trailingAnchor)
|
||||
titleLockupTrailingConstraint?.isActive = true
|
||||
|
||||
//stackView.addArrangedSubview(badgeContainerView)
|
||||
//stackView.addArrangedSubview(titleLockupContainerView)
|
||||
|
||||
}
|
||||
|
||||
public override func reset() {
|
||||
@ -207,60 +209,84 @@ open class Tilet: TileContainer {
|
||||
aspectRatio = .none
|
||||
surface = .light
|
||||
containerBackgroundColor = .black
|
||||
|
||||
titleLockup.reset()
|
||||
|
||||
//badge
|
||||
badge.reset()
|
||||
badgeModel = nil
|
||||
|
||||
//titleLockup
|
||||
titleLockup.reset()
|
||||
titleText = ""
|
||||
titleTextAttributes = nil
|
||||
subTitleText = ""
|
||||
subTitleTextAttributes = nil
|
||||
subTitleColor = .primary
|
||||
}
|
||||
|
||||
|
||||
//--------------------------------------------------
|
||||
// MARK: - State
|
||||
//--------------------------------------------------
|
||||
|
||||
|
||||
open override func updateView() {
|
||||
super.updateView()
|
||||
|
||||
//flip the surface for the titleLockup
|
||||
let flippedSurface: Surface = containerBackgroundColor == .black ? .dark : .light
|
||||
titleLockup.surface = flippedSurface
|
||||
|
||||
//either use textWidth
|
||||
if let textWidth {
|
||||
titleLockupTrailingConstraint?.isActive = false
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupWidthConstraint = titleLockup.widthAnchor.constraint(equalToConstant: textWidth)
|
||||
titleLockupWidthConstraint?.isActive = true
|
||||
|
||||
} else if let textPercentage {
|
||||
titleLockupTrailingConstraint?.isActive = false
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupWidthConstraint = NSLayoutConstraint(item: titleLockup,
|
||||
attribute: .width,
|
||||
relatedBy: .equal,
|
||||
toItem: containerView,
|
||||
attribute: .width,
|
||||
multiplier: textPercentage / 100,
|
||||
constant: 0.0)
|
||||
titleLockupWidthConstraint?.isActive = true
|
||||
|
||||
//flip the surface for the titleLockup
|
||||
let titleLockupSurface: Surface = containerBackgroundColor == .black ? .dark : .light
|
||||
titleLockup.surface = titleLockupSurface
|
||||
|
||||
//update constraints
|
||||
|
||||
//badge
|
||||
if let badgeModel {
|
||||
if badgeContainerView.superview == nil {
|
||||
stackView.insertArrangedSubview(badgeContainerView, at: 0)
|
||||
}
|
||||
badge.set(with: badgeModel)
|
||||
} else {
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupTrailingConstraint?.isActive = true
|
||||
|
||||
badgeContainerView.removeFromSuperview()
|
||||
}
|
||||
|
||||
titleLockup.titleText = titleText
|
||||
titleLockup.titleTypograpicalStyle = titleTypograpicalStyle.value
|
||||
titleLockup.titleTextAttributes = titleTextAttributes
|
||||
|
||||
titleLockup.subTitleText = subTitleText
|
||||
titleLockup.otherTypograpicalStyle = otherTypograpicalStyle.value
|
||||
titleLockup.subTitleTextAttributes = titleTextAttributes
|
||||
titleLockup.subTitleColor = subTitleColor
|
||||
if !titleText.isEmpty || !subTitleText.isEmpty {
|
||||
if titleLockupContainerView.superview == nil {
|
||||
stackView.insertArrangedSubview(titleLockupContainerView, at: badgeContainerView.superview == nil ? 0 : 1)
|
||||
}
|
||||
|
||||
//titleLockup
|
||||
if let textWidth {
|
||||
titleLockupTrailingConstraint?.isActive = false
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupWidthConstraint = titleLockup.widthAnchor.constraint(equalToConstant: textWidth)
|
||||
titleLockupWidthConstraint?.isActive = true
|
||||
|
||||
} else if let textPercentage {
|
||||
titleLockupTrailingConstraint?.isActive = false
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupWidthConstraint = NSLayoutConstraint(item: titleLockup,
|
||||
attribute: .width,
|
||||
relatedBy: .equal,
|
||||
toItem: containerView,
|
||||
attribute: .width,
|
||||
multiplier: textPercentage / 100,
|
||||
constant: 0.0)
|
||||
titleLockupWidthConstraint?.isActive = true
|
||||
|
||||
} else {
|
||||
titleLockupWidthConstraint?.isActive = false
|
||||
titleLockupTrailingConstraint?.isActive = true
|
||||
}
|
||||
|
||||
titleLockup.titleText = titleText
|
||||
titleLockup.titleTypograpicalStyle = titleTypograpicalStyle.value
|
||||
titleLockup.titleTextAttributes = titleTextAttributes
|
||||
|
||||
titleLockup.subTitleText = subTitleText
|
||||
titleLockup.otherTypograpicalStyle = otherTypograpicalStyle.value
|
||||
titleLockup.subTitleTextAttributes = titleTextAttributes
|
||||
titleLockup.subTitleColor = subTitleColor
|
||||
|
||||
} else {
|
||||
titleLockupContainerView.removeFromSuperview()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user