Disable controls while performing an action

[frassinier]

Hello there 👋

I'm wondering if you know any good solution to temporary disable controls for a step? I would like to profit of displaying the tour to suggest to the user to import samples. I think about retrieving controls using action callback in my step and then manipulate them via content function, but it is not really sexy.

Any advice?

[elrumordelaluz]

Hi @frassinier , thanks for open the Issue. Let me know if I understand well, you need to disable controls (next, close, etc) when you are in a specific step, so the user must do that action? how change the to the next/prev step? I think I am missing something.

However pretty interested in your Issue that seems a potentially feature to implement.

[frassinier]

Thank you, that's exactly what I want to do, but just for a quick period, while loading stuff.

Let me show you what I want to achieve:

Here is the demo, please check step 2 and click on the button to trigger a sample. http://2085.talend.surge.sh/components/?selectedKind=GuidedTour&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Here is the piece of code for now https://github.com/Talend/ui/pull/2085/files#diff-b6c88a459ae164037a1669b61dca3775R108

[elrumordelaluz]

Hey @frassinier, thank you for sharing your code, it's super clear the idea.

Available now you have two options.

Here is one using showNavigation, showButtons and showNumber Tour props (you could also add disableKeyboardNavigation and so on).

The second one is to make the same approach but changing the Helper Component, customizing on your needs like in the demo when you press enter, here the code (this feature is not documented yet but available).

Let me know,

[frassinier]

Thank you for demo, 🎉 I've just copied (and adapted) your code from codesandbox.io and it works like a charm! 👌 I close this issue.