From f868312b1f037a777eff587a730c88fa27733e6e Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Fri, 6 Jan 2023 11:40:19 -0600 Subject: [PATCH] refactored stackview and added in badge Signed-off-by: Matt Bruce --- VDS/Components/Tilet/Tilet.swift | 200 +++++++++++++++++-------------- 1 file changed, 113 insertions(+), 87 deletions(-) diff --git a/VDS/Components/Tilet/Tilet.swift b/VDS/Components/Tilet/Tilet.swift index 1dd1424d..2fa05dde 100644 --- a/VDS/Components/Tilet/Tilet.swift +++ b/VDS/Components/Tilet/Tilet.swift @@ -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() + } } }