From 4e49a55d7d60caf3d85d2ef2ca0d5b71eb98cf3e Mon Sep 17 00:00:00 2001 From: Matt Bruce Date: Wed, 11 Jan 2023 11:27:06 -0600 Subject: [PATCH] updated tilet with icons Signed-off-by: Matt Bruce --- VDS/Components/Tilet/Tilet.swift | 170 +++++++++++++++++++++++++------ 1 file changed, 140 insertions(+), 30 deletions(-) diff --git a/VDS/Components/Tilet/Tilet.swift b/VDS/Components/Tilet/Tilet.swift index 5c44503a..0e6c954c 100644 --- a/VDS/Components/Tilet/Tilet.swift +++ b/VDS/Components/Tilet/Tilet.swift @@ -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 + } + } +}