updated tilet with icons

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-01-11 11:27:06 -06:00
parent b43149cf57
commit 4e49a55d7d

View File

@ -13,6 +13,11 @@ import UIKit
@objc(VDSTilet)
open class Tilet: TileContainer {
public enum TextPosition {
case top
case bottom
}
//--------------------------------------------------
// MARK: - Initializers
//--------------------------------------------------
@ -114,6 +119,16 @@ open class Tilet: TileContainer {
$0.fillColor = .red
}
private let iconContainerView = UIView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.backgroundColor = .clear
}
private var descriptiveIcon = Icon()
private var directionalIcon = Icon().with {
$0.name = .rightArrow
}
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
@ -151,11 +166,33 @@ open class Tilet: TileContainer {
}
}
open var textPostion: TextPosition = .top { didSet { didChange() }}
//models
public var badgeModel: TiletBadgeModel? { didSet { didChange() }}
public var titleModel: TiletTitleModel? { didSet { didChange() }}
public var subTitleModel: TiletSubTitleModel? { didSet { didChange() }}
//only 1 Icon can be active
private var _descriptiveIconModel: TiletDescriptiveIcon?
public var descriptiveIconModel: TiletDescriptiveIcon? {
get { _descriptiveIconModel }
set {
_descriptiveIconModel = newValue;
_directionalIconModel = nil
didChange()
}
}
private var _directionalIconModel: TiletDirectionalIcon?
public var directionalIconModel: TiletDirectionalIcon? {
get { _directionalIconModel }
set {
_directionalIconModel = newValue;
_descriptiveIconModel = nil
didChange()
}
}
//icons
@ -174,8 +211,15 @@ open class Tilet: TileContainer {
width = 100
aspectRatio = .none
containerBackgroundColor = .black
addContentView(stackView)
let view = UIView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
}
view.addSubview(stackView)
stackView.pinTop()
stackView.pinLeading()
stackView.pinTrailing()
stackView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor).isActive = true
addContentView(view)
//badge
badgeContainerView.addSubview(badge)
@ -193,8 +237,18 @@ open class Tilet: TileContainer {
titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: titleLockupContainerView.trailingAnchor)
titleLockupTrailingConstraint?.isActive = true
//stackView.addArrangedSubview(badgeContainerView)
//stackView.addArrangedSubview(titleLockupContainerView)
iconContainerView.addSubview(descriptiveIcon)
iconContainerView.addSubview(directionalIcon)
descriptiveIcon
.pinLeading()
.pinTop()
.pinBottom()
directionalIcon
.pinTrailing()
.pinTop()
.pinBottom()
}
@ -204,43 +258,33 @@ open class Tilet: TileContainer {
surface = .light
containerBackgroundColor = .black
//badge
badge.reset()
//models
badgeModel = nil
//titleLockup
titleLockup.reset()
titleModel = nil
subTitleModel = nil
descriptiveIconModel = nil
directionalIconModel = nil
}
//--------------------------------------------------
// MARK: - State
//--------------------------------------------------
open override func updateView() {
super.updateView()
//flip the surface for the titleLockup
let titleLockupSurface: Surface = containerBackgroundColor == .black ? .dark : .light
titleLockup.surface = titleLockupSurface
//update constraints
//badge
fileprivate func updateBadge() {
if let badgeModel {
if badgeContainerView.superview == nil {
stackView.insertArrangedSubview(badgeContainerView, at: 0)
}
badge.text = badgeModel.text
badge.fillColor = badgeModel.fillColor
badge.numberOfLines = badgeModel.numberOfLines
badge.surface = badgeModel.surface
badge.maxWidth = badgeModel.maxWidth
if badgeContainerView.superview == nil {
stackView.insertArrangedSubview(badgeContainerView, at: 0)
}
} else {
badge.reset()
badgeContainerView.removeFromSuperview()
}
}
fileprivate func updateTitleLockup() {
var showTitleLockup = false
@ -251,11 +295,10 @@ open class Tilet: TileContainer {
if let subTitleModel, !subTitleModel.text.isEmpty {
showTitleLockup = true
}
if showTitleLockup {
if titleLockupContainerView.superview == nil {
stackView.insertArrangedSubview(titleLockupContainerView, at: badgeContainerView.superview == nil ? 0 : 1)
}
//flip the surface for the titleLockup
titleLockup.surface = containerBackgroundColor == .black ? .dark : .light
//titleLockup
if let textWidth {
@ -288,11 +331,78 @@ open class Tilet: TileContainer {
if let style = subTitleModel?.typographicalStyle.value {
titleLockup.otherTypograpicalStyle = style
}
if titleLockupContainerView.superview == nil {
stackView.insertArrangedSubview(titleLockupContainerView, at: badgeContainerView.superview == nil ? 0 : 1)
}
} else {
titleLockupContainerView.removeFromSuperview()
}
}
fileprivate func updateIcons() {
//icons
var showIconContainerView = false
if let descriptiveIconModel {
descriptiveIcon.name = descriptiveIconModel.name
descriptiveIcon.size = descriptiveIconModel.size
descriptiveIcon.surface = descriptiveIconModel.surface
showIconContainerView = true
}
if let directionalIconModel {
directionalIcon.size = directionalIconModel.size
directionalIcon.surface = directionalIconModel.surface
showIconContainerView = true
}
//iconContainer
descriptiveIcon.isHidden = descriptiveIconModel == nil
directionalIcon.isHidden = directionalIconModel == nil
if showIconContainerView {
//spacing before iconContainerView
var view: UIView?
if badgeContainerView.superview != nil {
view = badgeContainerView
}
if titleLockupContainerView.superview != nil {
view = titleLockupContainerView
}
if let view {
stackView.setCustomSpacing(containerPadding.tiletSpacing, after: view)
}
if iconContainerView.superview == nil {
stackView.addArrangedSubview(iconContainerView)
}
} else {
iconContainerView.removeFromSuperview()
}
}
open override func updateView() {
super.updateView()
updateBadge()
updateTitleLockup()
updateIcons()
}
}
extension TileContainer.ContainerPadding {
fileprivate var tiletSpacing: CGFloat {
switch self {
case .twelve:
return 16
case .sixteen:
return 24
case .twentyFour:
return 32
case .thirtyTwo:
return 48
case .fourtyEight:
return 16
}
}
}