lkzhao/uicomponent

A modern, declarative approach to building user interfaces with UIKit.

uicomponent's Issues

Is this component compatible with IOS 11?

Is this component compatible with IOS 11

Support sticky view？

SimpleViewComponent Size Issue

Hi, it's me again😅
I used the SimpleViewComponent component in the example, I cannot get the correct size

What can I do to make the component width and height correct?

this my code

SimpleViewComponent<UIButton>().update {
    $0.setTitle("button", for: .normal)
    $0.setTitleColor(.systemBlue, for: .normal)
}.backgroundColor(.brown)

Size：zero

Thanks for your help

Cooperate with `IQKeyboardManager` `ComponentScrollView` to display unusual

This will not happen with UIScrollView
Can you check where the problem is?

IQKBMBugReport.zip

ViewComponent enhancement

Hi,
I want rounded corners, but I don’t know the specific height of this Text component. Is there any way to set it?

It is possible to increase a similar SwiftUI.clipShape(Capsule())modified it? Because rounded corners are often used

this my code
Text("Round Style").textColor(.white).inset(h: 20, v: 10).background(SimpleViewComponent<UIView>().backgroundColor(.black))

actual

expect

How to hide an existing view element？

How to hide an existing view element

Consider compatibility with macOS

Consider compatibility with macOS?

Podspec missing Dependency `BaseToolbox`

Is it possible to have a drag and drop example?

Hope have a sample to implement drag and drop.

Support RTL?

I switched the language to ar and adjusted the card demo, and found that the rtl layout is not supported. Is there any plan to support it?

---

// CardViewController.swift

private class CardView: UIView {
    let titleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.boldSystemFont(ofSize: 22)
        label.backgroundColor = .red
        return label
    }()
    let subtitleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16)
        label.backgroundColor = .green
        return label
    }()
    let leadingLabel: UILabel = {
        let label = UILabel()
        label.text = "Leading"
        label.font = UIFont.systemFont(ofSize: 16)
        label.backgroundColor = .gray
        return label
    }()
    let trailingLabel: UILabel = {
        let label = UILabel()
        label.text = "Trailing"
        label.font = UIFont.systemFont(ofSize: 16)
        label.backgroundColor = .orange
        return label
    }()
    var onTap: (() -> Void)?
    var data: CardData? {
        didSet {
            titleLabel.text = data?.title
            subtitleLabel.text = data?.subtitle
        }
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .blue
        layer.cornerRadius = 8
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowRadius = 4
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        addSubview(titleLabel)
        addSubview(subtitleLabel)
        addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTap)))
        addSubview(leadingLabel)
        addSubview(trailingLabel)
        leadingLabel.translatesAutoresizingMaskIntoConstraints = false
        trailingLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            leadingLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            leadingLabel.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 8),
            trailingLabel.leadingAnchor.constraint(equalTo: leadingLabel.trailingAnchor, constant: 8),
            trailingLabel.topAnchor.constraint(equalTo: subtitleLabel.bottomAnchor, constant: 8),
        ])
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    @objc func didTap() {
        onTap?()
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        titleLabel.frame = CGRect(x: 20, y: 12, width: bounds.width - 40, height: 30)
        subtitleLabel.frame = CGRect(x: 20, y: 40, width: bounds.width - 40, height: 30)
    }
}

private struct CardComponent: Component {
    let data: CardData
    let onTap: () -> Void
    func layout(_ constraint: Constraint) -> CardRenderNode {
        CardRenderNode(data: data, onTap: onTap, size: CGSize(width: constraint.maxSize.width, height: 80 + 30))
    }
}

---

// CardViewController3.swift

private struct Card: ComponentBuilder {
    let card: CardData
    let onTap: () -> Void
    func build() -> some Component {
        VStack(spacing: 8) {
            Text(card.title).font(UIFont.boldSystemFont(ofSize: 22))
                .size(width: .fill)
                .backgroundColor(.red)
            Text(card.subtitle)
                .backgroundColor(.green)
            HStack(spacing: 8) {
                Text("Leading")
                    .backgroundColor(.gray)
                Text("Trailing")
                    .backgroundColor(.orange)
            }
        }
        .inset(top: 16, left: 20, bottom: 16, right: 50).size(width: .fill).tappableView(onTap).id(card.id)
        .backgroundColor(.blue)
        .with(\.layer.shadowColor, UIColor.black.cgColor)
        .with(\.layer.shadowRadius, 4)
        .with(\.layer.shadowOffset, CGSize(width: 0, height: 2))
        .with(\.layer.shadowOpacity, 0.2)
        .with(\.layer.cornerRadius, 8)
    }
}

Deleted

Can you make the internally used Then framework private or prefixed so that it is not exposed externally

My own project also uses this library, after importing your library all I use this will report ambiguity error

State Binding

If the concept of state binding is added to the data, I think this can be better
This is a great binding design, I think it will help you

reference: State

Support `SwipeActions`

Just like UITableViewCell

HStack has bug

Hi,

I use HStack Layout Component has a long string, I hope it will wrap, but it goes beyond the screen.

Is it possible to add CSS Flex Wrap properties to the Stack component?

e.g

HStack(wrap: .wrap || .noWrap) {
    ......
}

this my codes

HStack code

HStack {
    Text("long long long long long long long long long long long long long long long long long long long long long long long long long long long long text")
}.size(width: .percentage(1)).inset(h: 10, v: 10)

VStack code

VStack {
    Text("long long long long long long long long long long long long long long long long long long long long long long long long long long long long text")
}.size(width: .percentage(1)).inset(h: 10, v: 10)

Also exceed the screen boundary

VStack {
    HStack {
        VStack {
            Text("long long long long long long long long long long long long long long long long long long long long long long long long long long long long text")
        }
    }
}.size(width: .percentage(1)).inset(h: 10, v: 10)

HStack unusual

VStack normal

Use background modifier Issue

If i use background modifier with animator will have problems
This problem occurs in version 0.8.2