dscyrescotti/shuffleit

A UI library for SwiftUI custom stack views with a wide range of elegant and unique shuffling, sliding and swiping behaviors.

shuffleit's Issues

Incorporate velocity-based calculations into swipe gesture handling

Is your feature request related to a problem? Please describe.
Calculation for swiping a card should take into account not only the final position of the swipe but also the velocity.

Describe the solution you'd like
If I swipe quickly it should swipe to the next card.

Additional context
Try to swipe items in AppStore app.

Visual Glitch when using *Stack view inside of CarouselStack item view

Describe the bug
Hi. Thanks for library - very helpful.
Got some issue here and can't solve few days
I'm trying to create CarouselStack Item view with complex layout but getting visual glitches inside of it

I need to split my layout into few subviews because its complex and contains many Stacks for alignment and content, but can't get it working.

I've created sample project for minimal reproducing, see Additional Context

To Reproduce
Minimum amount of code to reproduce:

ContentView.swift

import SwiftUI
import CarouselStack

struct ContentView: View {
    var ints = [1,2,3,4,5,6,7,8,9]
    var body: some View {
        CarouselStack(ints, initialIndex: 0) { int in
            CustomView(passedInt: int)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

CustomView.swift

import SwiftUI

struct CustomView: View {
    let passedInt: Int
    var body: some View {
        VStack { //works if replace VStack with Non-Stack view
            if passedInt % 2 == 0 {
                viewOne.padding()
            }
            else {
                viewTwo.padding()
            }

            subscription
                .padding()
        }
        .background(.gray)
    }

    var viewOne: some View {
        Group {
            Text("I like this Int: \(passedInt)")
                .foregroundColor(.yellow)
                .font(.title3)
                .background(content: {
                    ZStack {
                        Color(.blue)
                    }
                })
        }

    }

    var viewTwo: some View {
        Group {
            Text("I dont like this Int: \(passedInt)")
                .foregroundColor(.white)
                .font(.title)
                .background(content: {
                    ZStack {
                        Color(.blue)
                    }
                })

            Text("\(passedInt)")
                .foregroundColor(.white)
                .font(.title)
                .background(content: {
                    ZStack {
                        Color(.green)
                    }
                })
        }
    }

    var subscription: some View {
        VStack {
            Text("Please tell your favorite Int")
                .foregroundColor(.red)
        }

    }
}

struct CustomView_Previews: PreviewProvider {
    static var previews: some View {
        CustomView(passedInt: 1)
    }
}

Steps to reproduce the behavior:

1. Download attached project and run

Expected behavior
Everything works correctly

Screenshots

Device information (please complete the following information):

• Device: Simulator
• OS: 16.2
• Xcode version: 14.2

Additional context
MinimalProject.zip

To fix the warning of updating the view multiple times in CarouselStack while sliding

Report

onChange(of: CGFloat) action tried to update multiple times per frame.

Details

This warning appears occasionally when swiping CarouselStack because it happens due to the attachment of GeometryReader to child views and forces the preference to trigger multiple times.

Cards are not swipeable in tvos.

Describe the bug
Cards are not swipeable in tvos.
getting below warning

AX Safe category class '_UIFocusContainerGuideRegionAccessibility' was not found!
void * _Nullable NSMapGet(NSMapTable * _Nonnull, const void * _Nullable): map table argument is NULL

To Reproduce
Minimum amount of code to reproduce:

let colors: [Color] = [.blue, .brown, .black, .cyan, .green, .indigo, .pink, .purple, .red, .orange, .yellow]
var body: some View {
    ShuffleDeck(
        colors,
        initialIndex: 0
    ) { color in
        color
            .frame(width: 200, height: 300)
            .cornerRadius(16)
    }
}

Expected behavior
Cards should be swipeable, main functionality is not working.

Device information (please complete the following information):

• Device: Apple TV 4K
• OS: tvos 17
• Xcode version: xcode 15

Cannot call the view with a NavigationLink

Describe the bug
I use ShuffleStack, and I've managed to create exactly what I wanted with the library. The problem is that I can't call the view with the navigationLink.

I have an onboarding process, the first view contains the NavigationView and then each page is called in succession thanks to the navigation link, which is a button.

Here's the code that calls the view.

To Reproduce
Minimum amount of code to reproduce:

                        NavigationLink {
                            PlanShuffleStackView()
                                .navigationBarBackButtonHidden(true)
                        } label: {
                            Text("Suivant")
                                .font(.subheadline)
                                .foregroundColor(.white)
                                .fontWeight(.semibold)
                                .frame(width: 360, height: 44)
                                .background(
                                    LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
                                )
                                .cornerRadius(10)
                        } //: NAVIGATION LINK
                        .padding(.vertical)

Expected behavior
Normally, the PlanShuffleStackView should open correctly.

Screenshots
I can't send any screenshots because the application freezes completely and nothing happens until the memory runs out.

Device information (please complete the following information):

• Device: iPhone 14 pro max and Simulator

CarouselStack inside List

Describe the bug
If CarouselStack is used within a List, and when swiping a card to the right, the card jumps back to the center, but after the animation is complete, the correct card is selected.

To Reproduce
Minimum amount of code to reproduce:

import SwiftUI
import Combine
import ShuffleIt

struct CarouselStackDemoView: View {
    @Environment(\.dismiss) var dismiss
    @State private var sneaker: Sneaker?
    @State private var isShowItems: Bool = false
    let carouselPublisher = PassthroughSubject<CarouselDirection, Never>()
    let timer = Timer.publish(every: 10, tolerance: 0.1, on: .main, in: .default).autoconnect()
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    let columns: [GridItem] = .init(repeating: GridItem(.flexible(), spacing: 20, alignment: .leading), count: 2)
    let sneakers: [Sneaker] = .sneakers()
    
    var body: some View {
        List {
            CarouselStack(sneakers, initialIndex: 0) { sneaker, translation in
                SneakerCard(sneaker: sneaker, translation: translation)
            }
            .carouselScale(0.7)
            .carouselPadding(horizontalSizeClass == .compact ? 20 : 40)
            .carouselSpacing(horizontalSizeClass == .compact ? 10 : 30)
            .carouselStyle(.finiteScroll)
        }
        .listStyle(.plain)

        .overlay(alignment: .topTrailing) {
            Button(action: {
                dismiss()
            }) {
                Image(systemName: "xmark.circle.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.white)
                    .background {
                        Circle()
                            .foregroundColor(.black.opacity(0.4))
                            .padding(4)
                    }
            }
            .buttonStyle(.plain)
            .padding(.horizontal, 20)
        }
    }
}

Steps to reproduce the behavior:

1. Go to 'CaraouselStackDemoView' and replace view with code from above.
2. Swipe card left or right.
3. See card jumps back after swipe.

Expected behavior
If card is swiped to the right, the next card should be displayed in the centre.

Screenshots
If applicable, add screenshots to help explain your problem.

Device information (please complete the following information):

• Device: iPhone/Simulator
• OS: iOS 17.0
• Xcode version: Xcode 15

Additional context
Add any other context about the problem here.

CarouselStack not rendering properly if its child view contains Button inside Stack views

Discussed in #45

^{Originally posted by dorjeozer December 14, 2022}
I noticed that when you add a VStack or HStack containing a Button to the CarouselStack content view, the CarouselStack stops rendering left and right content. Is there a way to fix this kind of behavior or is it simply a bug in the library or in SwiftUI?

The following code can reproduce the output:

let fruits: [String] = ["Apple", "Pear", "Orange"]
CarouselStack(
    fruits,
    initialIndex: 0
) { fruit in
    HStack {
        Button(fruit, action: {})
    }
        .frame(maxWidth: .infinity)
        .background(Color.yellow)
        .cornerRadius(16)
}
.carouselStyle(.infiniteScroll)

Support for jump a specific item on CarouselView

Description

The user wants to jump to a specific item using the index on CarouselView instead of left and right direction.

Discussion

#71

Proposal

It will add a new direction in CarouselDirection as follows.

public enum CarouselDirection {
   // the rest
   case index(Int)
}

Inside CarouselView, it requires to implement custom animation effect. That's it. It is easy to say though! :) On the call side, it only needs to pass a direction with an index value through carouselTrigger(on:) modifier.

To implement ShuffleDeck

This is the ticket for the implementation of ShuffleDeck which mimics the style of photo collections in Apple Message App.

• To implement the clone of photo collections of Apple Message App
• To write the documentation
• To implement the demo app for ShuffleDeck
• To implement test cases for ShuffleDeck
• To update README
• To release the new version - v2.1.0