Comments (6)
Hi, first of all thank you for your interest, and yes I'm totally open to PR ! I was going to start improving the wizard too because we use it in production and we also need a few other use cases.
You make me think of two things:
1. Go-forward feature
The history is implemented as a basic stack. The current step is the last item of the stack. When you go back it pops the last item out of the stack. If your purpose is to go forward after you went backward n times, we should probably create a new stack that would store the popped values. Then the forward() method would pop the last value from this second stack and add it to the history stack.
We should also have a method (that returns a boolean) to know if there is a "forward step" or not (it would just check if the second stack is empty or not), so we can display the button or not.
You can code it, be my guest !
2. Get current-step-number feature
You might want a getCurrentStepNumber() method ? A use case I see is that you can display information to the user about how 'long' it will take (like step 2 out of 5). To achieve that we can even implement a getWizardLength() method so your component can be created dynamically.
One question I have about it: how would it work with nested paths ?
- 1/ Would it just return the step-number of the first-level array ?
- 2/ Or do we just disable this feature for nested paths (and have it only for linear paths) ?
Considering nested paths can be of different length in the end we can't return a single unique number.
---
Sorry for the two different answers, I wasn't sure which one was described at first.
I wanted to rewrite the whole hook (with backward compatibility of course), feel free to join and brainstorm if you're interested. I wrote this a while back and I'm sure we can implement it better.
EDIT: Sorry for the many updates of this answer, hope it wasn't confusing ...
from use-wizard.
Given the complexity and that your in a middle of a refactor, I'll hold off on the refactor. I have a solution that works for me for now but wanted to raise as a improvement opportunity.
from use-wizard.
Ok, I'll push the new version on next sunday with backward compatibility.
Both discussed features will be included, the code will also be a lot cleaner...
By the way, in the use case you posted, you can go forward by using the method nextStep( ), does it help ?
For the future don't hesitate to give feedback or do pull requests, we can do something usefull out of it !
from use-wizard.
I actually didn't end up using the next step because the hierarchy stuff was a bit confusing and I needed that and had a short amount of time to do it. did something like this:
const paths = [
'welcome',
'legal',
'data',
'terms',
'org',
'finish'
];
const [step, wizard] = useWizard(paths);
then later on:
onClick={() => wizard.goToStep(hasOrg ? 'finish' : 'org')}
from use-wizard.
Ok great, thanks for the feedback, I see what you mean now. I'll try to post an example where you can handle step jumps by using useEffect inside components (I call it the 'fall-through' strategy, it is pretty effective in more complex scenarios so you don't have to check what redirection is on every button all of the time).
from use-wizard.
v4.0.0 is out.
Basically:
- You have a method called forwardStep(). It allows you to move forward (see notes bellow).
- You have a method called nForwardSteps(). It returns the number of forward steps you can do. It will mostly be useful to disable or hide the "forward" button when it returns 0.
- You have a method called nPreviousSteps(). It returns the number of steps you can move back.
- You have stepIndex() that gives you the index of the current step and wizardLength() that gives you the length of your wizard. It will help you show the user a progression bar of some sort.
Notes on forwardStep():
- If you didn't use previousStep() before it will not do anything. You need to go back in history in order to go forward
(use nextStep() if you just want to go to the next step in the path). - If you use previousStep() then rewrite a new path with goToStep() or nextStep(), the forward steps will be emptied to avoid weird behaviour. (user is basically going back then changing the path).
Don't hesitate to share your feedback, open an issue or PR of course
from use-wizard.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from use-wizard.