diff --git a/VDS/Components/TileContainer/TileContainer.swift b/VDS/Components/TileContainer/TileContainer.swift index 7c8d738d..1f676421 100644 --- a/VDS/Components/TileContainer/TileContainer.swift +++ b/VDS/Components/TileContainer/TileContainer.swift @@ -287,9 +287,11 @@ open class TileContainer: Control { } } - public func addContentView(_ view: UIView) { + public func addContentView(_ view: UIView, shouldPin: Bool = true) { containerView.addSubview(view) - view.pinToSuperView() + if shouldPin { + view.pinToSuperView() + } } class BackgroundColorConfiguration: ObjectColorable { diff --git a/VDS/Components/Tilet/Tilet.swift b/VDS/Components/Tilet/Tilet.swift index dfbdca15..b33eb006 100644 --- a/VDS/Components/Tilet/Tilet.swift +++ b/VDS/Components/Tilet/Tilet.swift @@ -36,7 +36,7 @@ public enum TiletOtherTypographicalStyle: String, Codable, EnumSubset { @objc(VDSTilet) -open class Tilet: TileContainer { +open class Tilet: View { //-------------------------------------------------- // MARK: - Initializers @@ -56,21 +56,15 @@ open class Tilet: TileContainer { initialSetup() } //-------------------------------------------------- - // MARK: - Public Properties + // MARK: - Private Properties //-------------------------------------------------- - private var titleLockup = TitleLockup() - open override var surface: Surface { - didSet { - //flip the color - let flippedColor:ContainerBackgroundColor = surface == .dark ? .white : .black - containerBackgroundColor = flippedColor - - //flip the surface for the titleLockup - let flippedSurface: Surface = surface == .dark ? .light : .dark - titleLockup.surface = flippedSurface - } + private var tileContainer = TileContainer().with { + $0.aspectRatio = .none + $0.surface = .light } + private var titleLockup = TitleLockup() + //-------------------------------------------------- // MARK: - Public Properties //-------------------------------------------------- @@ -78,6 +72,43 @@ open class Tilet: TileContainer { open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }} open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }} + open var width: CGFloat = 100 { didSet { didChange() }} + + private var _textWidth: CGFloat? + open var textWidth: CGFloat? { + get { _textWidth } + set { + if let newValue, newValue > 44.0 && newValue <= width { + _textWidth = newValue + if _textPercentage != nil { + _textPercentage = nil + } + } else { + _textWidth = nil + } + print("_textWidth: \(_textWidth)") + didChange() + } + + } + + private var _textPercentage: CGFloat? + open var textPercentage: CGFloat? { + get { _textPercentage } + set { + if let newValue, newValue >= 5 && newValue <= 100.0 { + _textPercentage = newValue + if textWidth != nil { + _textWidth = nil + } + } else { + _textPercentage = nil + } + print("_textPercentage: \(_textPercentage)") + didChange() + } + } + //text open var titleText: String = "" { didSet { didChange() }} open var titleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }} @@ -90,7 +121,8 @@ open class Tilet: TileContainer { //-------------------------------------------------- // MARK: - Constraints //-------------------------------------------------- - internal var contentViewWithConstraint: NSLayoutConstraint? + internal var titleLockupWidthConstraint: NSLayoutConstraint? + internal var titleLockupTrailingConstraint: NSLayoutConstraint? //functions //-------------------------------------------------- // MARK: - Lifecycle @@ -98,14 +130,24 @@ open class Tilet: TileContainer { open override func setup() { super.setup() - aspectRatio = .none - surface = .light - addContentView(titleLockup) - titleLockup.pinToSuperView() + addSubview(tileContainer) + tileContainer.pinToSuperView() + tileContainer.addContentView(titleLockup, shouldPin: false) + titleLockup.pinTop() + titleLockup.pinLeading() + titleLockup.pinBottom() + + //either you are 100% width of the tileContainer.contentView + titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: tileContainer.containerView.trailingAnchor) + titleLockupTrailingConstraint?.isActive = true } public override func reset() { super.reset() + tileContainer.reset() + tileContainer.aspectRatio = .none + tileContainer.surface = .light + titleLockup.reset() titleText = "" @@ -121,7 +163,41 @@ open class Tilet: TileContainer { open override func updateView() { super.updateView() - + + //flip the color + let flippedColor:TileContainer.ContainerBackgroundColor = surface == .dark ? .white : .black + tileContainer.containerBackgroundColor = flippedColor + tileContainer.width = width + + //flip the surface for the titleLockup + let flippedSurface: Surface = surface == .dark ? .light : .dark + 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: tileContainer.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