Skip to content

Exporting StepOptionsButton type to be able to add tour steps buttons dynamically with type checking#2137

Merged
RobbieTheWagner merged 1 commit intoshipshapecode:masterfrom
xhafan:StepOptionsButton
Nov 21, 2022
Merged

Exporting StepOptionsButton type to be able to add tour steps buttons dynamically with type checking#2137
RobbieTheWagner merged 1 commit intoshipshapecode:masterfrom
xhafan:StepOptionsButton

Conversation

@xhafan
Copy link
Copy Markdown
Contributor

@xhafan xhafan commented Nov 7, 2022

I'd like to create Shepherd tour steps dynamically, with step buttons based on the index of the step. The first step would have only the Next button, steps in the middle would have Back and Next buttons, and the last step would have Back and Done buttons. Here's the code:

const tour = new Shepherd.Tour({...});

steps.forEach((step, i) => { // steps is an array of objects with properties text, title, and elementIdentifier
            
            // below I want to have "Shepherd.Step.StepOptionsButton" instead of "any"
            const buttons: Shepherd.Step.StepOptionsButton[] = []; 
            if (i > 0) {
                buttons.push({
                    text: "Back",
                    action: tour.back
                });
            }

            if (i < this.modelValue.steps.length - 1) {
                buttons.push({
                    text: "Next",
                    action: tour.next
                });
            }

            if (i == this.modelValue.steps.length - 1) {
                buttons.push({
                    text: "Done",
                    action: tour.complete
                });
            }

            tour.addStep({
                title: step.title,
                text: step.text,
                attachTo: {
                    element: step.elementIdentifier,
                    on: "bottom"
                },
                buttons: buttons,
                canClickTarget: false
            });
        });
...

@RobbieTheWagner RobbieTheWagner merged commit e5a82cc into shipshapecode:master Nov 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants