badrinathvm/stepperview

SwiftUI iOS component for Step Indications.

stepperview's Issues

How to set step indicator based on step life cycle

Hi! Is there a way to set the step indicators to change based on the life cycle of the step? I see that if I set StepLineOptions as custom it will change the line color, is there a similar thing for the step indicators?

StepperEdgeInsets: trailing padding

Describe the bug
Unfortunately, the trailing padding is still there (I added a Spacer() between the image and text in ImageTextRowView example so it should fill the screen).

Screenshots

Info (please complete the following information):

• Device: Real Device - iPhone 11 Pro
• OS: 14.7.1

Thank you for your work! :)

Different UI after upgrade to Xcode 12

Hello,,
I develope apps on xcode 11, this library is running well. then i switch project to Xcode 12. after build project and run on device, UI look like on my screenshoot.

Any wrong on my source code?

Thanks

Simple Numeric Step Indicator Without Texts

I wanted a simple step indicator with just the number view. I'm able to achieve it by simply initialising the steps with an array of empty Texts, but not sure if it is the right way to do so. Please let me know if there is any other way to achieve the same.

Trailing connecting line after the last step when .top aligned

Describe the bug
There will be a trailing line after the last step, when alignment is .top and last step has multiple lines of text

To Reproduce

    let steps = [ Text("Cart").font(.caption),
                  Text("Delivery Address").font(.caption),
                  Text("Order Summary").font(.caption),
                  Text("Payment Method").font(.caption),
                  Text("Track\nTracking\nTracking").font(.caption)]

    let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
                            .custom(NumberedCircleView(text: "2")),
                            .custom(NumberedCircleView(text: "3")),
                            .custom(NumberedCircleView(text: "4")),
                            .custom(NumberedCircleView(text: "5"))]

    var body: some View {
        StepperView()
            .addSteps(steps)
            .indicators(indicationTypes)
            .stepIndicatorMode(StepperMode.vertical)
            .spacing(30)
            .alignments([StepperAlignment.top, .top, .top, .top, .top])
            .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
    }

Expected behavior
Hide the trailing line

Screenshots
https://tinypng.com/web/output/08ageudqwq54yxpuu02az1vmt7gze0mt/Screen%20Shot%202021-05-24%20at%2010.06.46%20am.png

Info (please complete the following information):

• Device: iPhone 12 simulator
• OS: iOS 13
• Pod Version (What is this?)
• Xcode Version 12.5 (12E262)

Additional context
None. Thanks for helping.

Support for MacOS

As of now Step Indicator support is available for iOS and WatchOS. Extend the support for Mac as well.

How to use with horizontal scrollview

I need to use stepperview with 9 steps. So i need a scrollview because width of stepperview more than device width
i try to add scrollview but the result show blank view.
How to do this case?

Thanks

Different UI elements for steps not working

Describe the bug
Using different UI elements for different steps does not seem to work.

To Reproduce

    static let stepLineColor = Color(red: 229 / 255, green: 229 / 255, blue: 229 / 255)
    static let stepCircleColor = Color(red: 17 / 255, green: 16 / 255, blue: 56 / 255)

    let indicationTypes: [StepperIndicationType<NumberedCircleView>] = [
        .custom(NumberedCircleView(text: "1", color: stepCircleColor, triggerAnimation: true)),
        .custom(NumberedCircleView(text: "2", color: stepCircleColor, triggerAnimation: true)),
        .custom(NumberedCircleView(text: "3", color: stepCircleColor, triggerAnimation: true)),
        .custom(NumberedCircleView(text: "4", color: stepCircleColor, triggerAnimation: true)),
        .custom(NumberedCircleView(text: "5", color: stepCircleColor, triggerAnimation: true)),
        .custom(NumberedCircleView(text: "6", color: stepCircleColor, triggerAnimation: true))
    ]


    var body: some View {
        StepperView()
                .addSteps([
                    VStack {
                        Text("")
                        DatePicker("", selection: $date, in: Date()..., displayedComponents: [.date])
                    },
                    Text("")
                ])
                .indicators(indicationTypes)
                .stepIndicatorMode(StepperMode.vertical)
                .spacing(30)
                .lineOptions(StepperLineOptions.custom(2, TestView.stepLineColor))
    }

This yields in Failed to produce diagnostic for expression; please submit a bug report (https://swift.org/contributing/#reporting-bugs) and include the project

Expected behavior
The code compiles, the first step displays a VStack and the second step displays Text.

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

Info (please complete the following information):

• Device: Simulator
• OS: 14.5
• SPM library version: 1.6.2
• Xcode Version: 12.5

Warnings and logs in the console when using on watch

Describe the bug
When using the stepper view there are several warnings in the logs. Performance to render the view is also somewhat slow which could be related to the warnings.

Bound preference HeightPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference VerticalHeightPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Bound preference WidthPreference tried to update multiple times per frame.
Intermediate Divider Height [5: 19.5, 6: 19.5, 12: 19.5, 11: 19.5, 14: 19.5, 3: 19.5, 2: 19.5, 7: 19.5, 10: 19.5, 0: 19.5, 9: 19.5, 13: 19.5, 8: 19.5, 1: 19.5, 4: 19.5]
Height of Divider [0: 628.5]
Final Line Height 609.0

The StepperView is contained within a ScrollView and VStack

            ScrollView {
                VStack {
                    makeStepperView()
                    Text("Sample label 😎").font(.caption)
                }.padding(.bottom)
            }
            Button(action: handleStartTap) { Text("Start") }
        }

Info (please complete the following information):

• Device: 6.2 Simulator and device on 6.2
• Pod Version 1.4.1

WatchOS Segments not aligned in centre

Describe the bug
The segments are no longer centred on the line.

To Reproduce
Run sample app with latest Xcode 12.2 on a WatchOS 7.1 S5/S6 simulator

Expected behavior
The line to be aligned in the centre of the segments

Screenshots

Screenshot of the sample app

Info (please complete the following information):

• Device: Both simulator and device
• OS: WatchOS 7.1 S5/S6 (40 or 44mm)
• Pod Version: 1.5.2
• Xcode Version 12.2

Additional context
It looks like it may be caused by some default padding in the latest version of SwiftUI? I have not looked into the source code yet to try and identify the problem.

Dynamic space calculation between the steps

Calculate the space between the steps instead of using static .spacing ViewModifier.

Core Data and StepperView

I am having a hard time getting StepperView to work with Core Data objects. Is there a tutorial or is it possible to be pointed in the right direction?

Adding stepperView to a UIView in swift

Hello, Trying to add this to a UIView, I havnt really used SwiftUI yet.

Doesn't work with Carthage

Describe the bug
Dependency "stepperView" has no shared framework schemes for any of the platforms: iOS

To Reproduce
Steps to reproduce the behavior:

1. Run 'carthage update --platform iOS'
2. See error

Expected behavior
Carthage successfully builds StepperView

How to add steps dynamically?

The example only has let type.
How to add steps dynamically?
thx

Horizontal Stepperview frame incorrect due to overlayPreferenceValue

Describe the bug
It seems the frame isn't calculated correctly and this results in weird UI behaviour and having to compensate by adding uneven padding

To Reproduce
Steps to reproduce the behavior:
See screenshot

Expected behavior
Frame to take the full bounds of the StepperView

Screenshots

Even padding:

Uneven padding:

Info (please complete the following information):

• Device: [e.g. Simulator / Real Device]
• OS: [e.g. iOS 13]
• Pod Version [e.g. 2.16]
• Xcode Version [e.g. 11] if applicable

Additional context
Add any other context about the problem here.

First and last steps do not appear on line when displayed vertically

Describe the bug
Display issue with the first and last steps when displayed vertically where the indicator and text is indented to the right from the line.

To Reproduce
Use the code from the readme and change .horizontal to .vertical:

struct MyMain: View {
    let steps = [ Text("Cart").font(.caption),
                  Text("Delivery Address").font(.caption),
                  Text("Order Summary").font(.caption),
                  Text("Payment Method").font(.caption),
                  Text("Track").font(.caption)]

    let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
                            .custom(NumberedCircleView(text: "2")),
                            .custom(NumberedCircleView(text: "3")),
                            .custom(NumberedCircleView(text: "4")),
                            .custom(NumberedCircleView(text: "5"))]
    
    var body: some View {
        StepperView()
            .addSteps(steps)
            .indicators(indicationTypes)
            .stepIndicatorMode(StepperMode.vertical)
            .spacing(50)
            .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
    }
}

Expected behavior
Indicators should line up.

Screenshots

Info (please complete the following information):

• Device: Simulator (not tried on actual device)
• OS: iOS 14.2
• Xcode Version 12.2 (12B45b)

Additional context
N/A

How to update StepperView Steps dynamically from UIKit

I am using this stepper view in UIKit and adding it programmatically in my code. For Static data. It is working perfectly.

I have to pass data for Steps and Indicators from an array of tracking details. Below is the detailed code

    var trackings = event?.getTracking() // My Tracking data
    var trackingSteps: [AnyView] = []
    var trackingIndicators: [StepperIndicationType<AnyView>] = []

    for item in trackings! {
        trackingSteps.append(
            HStack() {
                VStack(alignment: .leading) {
                    Text(title)
                    Text(description)
                    Text(dateTime)
                }
                
                VStack(alignment: .trailing) {
                    Button(action: {
                        item.isCompleted.toggle() // This is suppose to change button image but not doing it :( 
                    }) {
                        Image(item.isCompleted == true ? ImagesNames.ic_toggle_on : ImagesNames.ic_toggle_off)
                    }
                }
            }
        )
        
        trackingIndicators.append(StepperIndicationType.custom(MyCustomImage))
    }

Now using the above steps and indicators to make SwiftUIView

    var stepperView = StepperView()
        .addSteps(trackingSteps) // [View]
        .indicators(trackingIndicators)  // [StepperIndicationType<View>]
        .onAppear(perform: {
           self.trackingD[1].isCompleted = true // This also not working
        })
    
    let host = UIHostingController(rootView: stepperView)
    let hostView = host.view!
    addChild(host)
    trackingListView.addSubview(hostView)

In this above code. Inside VStack of Steps Button is bind with image with mutating data. When the item.isCompleted gets toggled which is finely doing so. The button image is not changing.

I have tried all. I am able to set the UI elements of SwiftUIView for the first time of calling. They are not changing themselves afterward.

What i am missing?

How to remove default padding

Hello! I would like to use StepperView without the default leading and trailing padding. How could I do that?

Steps not aligned

Describe the bug
Steps in vertical orientation are not aligned, even the code example given in Usage Section of Readme.md is not aligned. Somehow width of the text is causing the misalignment.

To Reproduce
Copy the example code given in the Usage Section of Readme.md and just change .stepIndicatorMode(StepperMode.horizontal) to .stepIndicatorMode(StepperMode.vertical)

Expected behavior
All steps should have been centre aligned to the line

Screenshots

Info (please complete the following information):

• Device: Simulator
• OS: iOS 14.3
• Swift Package Manager: v1.5.2
• Xcode Version 12.3