search

apptekstudios / ASCollectionView

A SwiftUI collection view with support for custom layouts, preloading, and more.
MIT License
1.36k stars 160 forks source link

Canvas breaks using ASCollectionView #218

Open Z3r0CooLE opened 3 years ago

Z3r0CooLE commented 3 years ago

Sorry in advanced, but I'm not sure why the first line of each struct break code markdown here?

Describe the bug I have a TabView in my main ContentView body. I have four structs that return the content view of each tab item. Two of these structs contain an ASCollectionView; the first collection has three ASCollectionViewSections and the second collection has two. The project builds fine, Xcode reports no errors in the code and the syntax highlighting is showing everything the way it should look. The app installs on emulators and physical devices with no issue. But the canvas preview fails to build and claims it can't type check the expression in reasonable time. If I replace my first ASCollectionView; the one with three ASCollectionViewSections, with a simple Text view, the canvas builds works as expected. However, if I replace the last ASCollectionView; the one only containing two ASCollectionViewSections, with a simple Text view and uncomment the first ASCollectionView, canvas still fails to build. I have replaced the entire first ASCollectionView with a copy of the one that doesn't cause Canvas to fail and I have even replaced the entire content view struct with a copy of the struct that works, changing out the data collection and item names to be used in the collection with those of the one it is replacing. I have also tried only putting two sections in it to exactly mimic the collection that works. But no matter what this one collection makes canvas fail. Any help, guidance or info provided is greatly appreciated.

To Reproduce Here are both of my ASCollection View structs, the item models used for the lists return an int for their position and a few strings for details about theirselves, other than one collection having 3 sections and one having 2, I don't see any differences that would result in one breaking canvas preview and one not.

` struct OtherItemViewContent: View { @State private var otherItemOneList = [ListItem]() @State private var otherItemTwoList = [ListItem]() @State private var otherItemThreeList = [ListItem]()

var body: some View {
    ASCollectionView {
        ASCollectionViewSection(id: 0, data: otherItemOneList, dataID: \.self) { item, _ in
            HStack(alignment: .center) {
                VStack(alignment: .center) {
                    Text("Rank")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("#\(item.id)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 30)
                VStack(alignment: .center) {
                    Text("Name")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.itemName)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 130)
                VStack(alignment: .center){
                    Text("Pick Ratio")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.pickRatio)%")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 150)
                VStack(alignment: .center) {
                    Text("KD")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.kdRatio)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 40)
            }
            Divider()
        }
        .sectionHeader {
            Text("Items One")
                .foregroundColor(Color("color-text"))
                .padding()
        }
        ASCollectionViewSection(id: 1, data: otherItemTwoList, dataID: \.self) { item, _ in
            HStack(alignment: .center) {
                VStack(alignment: .center) {
                    Text("Rank")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("#\(item.id)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 30)
                VStack(alignment: .center) {
                    Text("Name")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.itemName)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 130)
                VStack(alignment: .center){
                    Text("Pick Ratio")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.pickRatio)%")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 150)
                VStack(alignment: .center) {
                    Text("KD")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.kdRatio)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 40)
            }
            Divider()
        }
        .sectionHeader {
            Text("Items Two")
                .foregroundColor(Color("color-text"))
                .padding()
        }
        ASCollectionViewSection(id: 2, data: otherItemThreeList, dataID: \.self) { item, _ in
            HStack(alignment: .center) {
                VStack(alignment: .center) {
                    Text("Rank")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("#\(item.id)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 30)
                VStack(alignment: .center) {
                    Text("Name")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.itemName)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 130)
                VStack(alignment: .center){
                    Text("Pick Ratio")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.pickRatio)%")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 150)
                VStack(alignment: .center) {
                    Text("KD")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.kdRatio)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 40)
            }
            Divider()
        }
        .sectionHeader {
            Text("Items Three")
                .foregroundColor(Color("color-text"))
                .padding()
        }
    }
    .layout { sectionID in
        switch sectionID {
            default:
                return .list(
                    itemSize: .absolute(50),
                    spacing: 10,
                    sectionInsets: .zero,
                    insetSupplementaries: true,
                    stickyHeader: false,
                    stickyFooter: false)
        }
    }
    .onAppear() {
        MY_API().loadOtherItemsData { (otherItemOneList, otherItemTwoList, otherItemThreeList) in
            self.otherItemOneList = otherItemOneList
            self.otherItemTwoList = otherItemTwoList
            self.otherItemThreeList = otherItemThreeList
        }
    }
}

}

struct ListItemsViewContent: View { @State private var dataOneList = [ListItem]() @State private var dataTwoList = [ListItem]()

var body: some View {
    ASCollectionView {
        ASCollectionViewSection(id: 3, data: dataOneList, dataID: \.self) { item, _ in
            HStack(alignment: .center) {
                VStack(alignment: .center) {
                    Text("Rank")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("#\(item.id)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 30)
                VStack(alignment: .center) {
                    Text("Name")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.itemName)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 130)
                VStack(alignment: .center){
                    Text("Pick Ratio")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.pickRatio)%")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 150)
                VStack(alignment: .center) {
                    Text("KD")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.kdRatio)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 40)
            }
            Divider()
        }
        .sectionHeader {
            Text("Section One")
                .foregroundColor(Color("color-text"))
                .padding()
        }
        ASCollectionViewSection(id: 4, data: dataTwoList, dataID: \.self) { item, _ in
            HStack(alignment: .center) {
                VStack(alignment: .center) {
                    Text("Rank")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("#\(item.id)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 30)
                VStack(alignment: .center) {
                    Text("Name")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.itemName)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 130)
                VStack(alignment: .center){
                    Text("Pick Ratio")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.pickRatio)%")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 150)
                VStack(alignment: .center) {
                    Text("KD")
                        .fontWeight(.bold)
                        .font(.system(size: 10))
                        .multilineTextAlignment(.center)
                    Text("\(item.kdRatio)")
                        .font(.system(size: 12))
                        .multilineTextAlignment(.center)
                }
                .frame(width: 40)
            }
            Divider()
        }
        .sectionHeader {
            Text("Section Two")
                .foregroundColor(Color("color-text"))
                .padding()
        }
    }
    .layout { sectionID in
        switch sectionID {
            default:
                return .list(
                    itemSize: .absolute(50),
                    spacing: 10,
                    sectionInsets: .zero,
                    insetSupplementaries: true,
                    stickyHeader: false,
                    stickyFooter: false)
        }
    }
    .onAppear() {
        MY_API().loadSecondItemsData { (dataOneList, dataTwoList) in
            self. dataOneList = dataOneList
            self. dataTwoList = dataTwoList
        }
    }
}

}`

Expected behaviour Both views should work with canvas preview

Screenshots N/A

Xcode Version:

Simulator, Device, Both?