jcmcneal / react-step-wizard Goto Github PK

I'm currently using the wizard but I have some strict styling requirements that make styling difficult if I nest nest components inside the step and not at the same depth as the Nav component. Unfortunately there's currently no way to nest any components except Nav inside the inner div so I can't align them. My workaround for this was to use the instance prop and pull the Nav component out of the StepWizard component and do some things manually and keep all the components at the same depth. It would be great if I didn't have to do that but could nest an arbitrary amount of components to a "footer slot" or something like this.

My current work around:

            <div id={styles.wizard}>
                <Nav {...stepProps} {...this.props} data={navData} />
                <StepWizard
                    onStepChange={this.onStepChange}
                    instance={this.setWizardInstance}
                    className={styles['wizard-content']}
                >
                    <StepOne {...this.props} />
                    <StepTwo {...this.props} />
                    <StepThree {...this.props} />
                    <StepFour {...this.props} />
                </StepWizard>
                <Controls {...stepProps} {...this.props} />
            </div>

Unfortunately this results some additional work since I have to recreate the step props for those Nav and Controls components and then I have to do some extra re-rendering based on the wizard instance state.

It would be a bit nicer if I could do something like this instead:

<StepWizard nav={<Nav />} slots={[<Component1 />, <Component 2 />]} />

Not sure about the feasibility of this but just another enhancement suggestion. I am thankful for the instance addition because it at least allows me to work around it.

Thanks for your hard-work on this library!

Even with isLazyMount explicitly set to false, components mount before they are active.
This leads to problems, when some input from say step 1 is not yet defined in step 2.

Is this a bug or am I doing something wrong?

Hi all,

I am new to React and have not much knowledge of the component.
May I ask how to use the previous and next function in order to switch through steps?
Below is my current code. Thanks.

<StepWizard isLazyMount={true} initialStep={this.currentStep}>
	<div>
		Step 1
	        <p><button onClick={()=>{
			this.currentStep--;
			this.forceUpdate();
		}}>Previous Step</button></p>
		<p><button onClick={()=>{
			this.currentStep++;
			this.forceUpdate();
		}}>Next Step</button></p>
		</div>
			<div>Step 2</div>
			<div>Step 3</div>
			<div>Step 4</div>
		</StepWizard>

Thanks for any help.

hello your component and give the follow problems
My react js version is create-react-app version 0.6.0 with react js and react dom 15.6.1

What could be the solution to this problem?

any help please

Im experiencing some issues with the isHashEnable flag where it sets the router browser url to #undefined instead of #step1 ... #step{N} etc...

<StepWizard
                              isHashEnabled={true}
                              transitions={{
                                enterRight: "",
                                enterLeft: "",
                                exitRight: "",
                                exitLeft: "",
                              }}
                            >
                              {this.state.steps.map((stepdata, i) => {
                                return (
                                  <CustomStep
                                    key={i}
                                    data={stepdata}
                                    update={this.setData}
                                    canGoBack={this.canGoBack}
                                  />
                                );
                              })}
                            </StepWizard>

Im using eact-router-dom as my router if that matters... ?

SW.currentStep does not change

const InstanceDemo = ({ SW }) => ( <Fragment> <h4>{SW.currentStep}</h4> <button className="bg-sc-purple text-white" onClick={SW.previousStep}> Previous Step </button> &nbsp; <button className="bg-sc-purple text-white" onClick={SW.nextStep}> Next Step </button> </Fragment> );

Sorry but it's not issue , I have a question about transitions.
I'm using your code but I'm confused about transitions.If I want to use Fade transitions How should I use it !? :(

Is there a way to use vertical transitions instead of the horizontal ones?

This is not an issue as much as a feature request. Is there any chance for swipeable mobile-enabled wizard in the feature? So to go to the previous step they could swipe to the left, and the next step swipe to the right? Any insight is greatly appreciated. Thanks!

Hi, i've been trying to use your example, but i can't get it to work, i've tried from a fresh react project, using the same setup (even babel 6 and babel loader 7) but it prompts out that error:

n.props.children.forEach is not a function.

Do you have any idea what could be wrong?

Would be nice to have an onFinish event callback passed when the last step is reached. I want to handle the finish step through the wizard's parent. Let's say i want to call backend to save all the data from the wizard, it's not good for me to do it within the last step's component. Can't seem to find a way to pass a callback prop to this wizard, is there any way?

Thanks.

is it possible to transfer data from one step to the other?

I am trying to render steps form a loop. Here is my code:

<StepWizard isLazyMount={true} nav={<WizardDots />}>
          <Introduction />
          <CreateProfileInstructions giftTypes={state.giftTypes} onConfirmation={this.setGiftSelectionMode}/>
            {state.pages.map((type) => (
              <ProfileSelection key={type} hashKey={type} giftType={type} />
            ))}
        </StepWizard>

I am getting this error about cannot read property hashkey of undefined. I have tried initializing state.pages as both an empty array and an array with a single string element. How can I render steps based on an array in state?

Thanks!

The following series of warnings are generated when children are inlined instead of abstracted into their own components:

VM10074:794 Warning: React does not recognize the totalSteps prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase totalsteps instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Repro test case:

const Wizard = () =>
    <StepWizard>
        <div>1</div>
        <div>2</div>
    </StepWizard>;

Admittedly not best practice but there are use cases for structuring an app this way (small prototype, for example).

When trying to install the package directly from github it does not work:

yarn add https://github.com/jcmcneal/react-step-wizard

And results in:

Module not found: Can't resolve 'react-step-wizard' in 'C:\Source\create-react-app\src'

This is due to invalid main property in package.json_ of dist/react-step-wizard.min.js which should be src/index.js.

I think that the npm package should not be minfiied dist. It prevents projects from overriding babel configuration with project-wide babel.config.json. Thank you.

Could you include a folder for examples to this repo?

Thanks!

The following error occurs when there is only a single child passed to StepWizard:

Uncaught TypeError: o.props.children.forEach is not a function

You may want to consider guarding against this at least for developer sanity :)

Maybe I''m missing something but I guess this is a feature request, would it be possible to pass data to the onStepChange handler?
Especially when going to the next step this would really help for a lot of functionalities that can be built with this I think, like one example where user has to enter data on some of the steps and the parent component can use this to update state, or do you have better suggestions?
This could also maybe change the steps as you are going through it depending on which data is entered.

Hi guys,

I have a problem with the container-height, where I am basically experiencing this issue here and get white-space under the footer (https://stackoverflow.com/questions/34188161/remove-white-space-below-footer)

When i enable isLazyMount the first step looks good, but after going to the next step the white-space appears.

Has anyone got the same problem and knows a solution?

when isLazyMount set true, user action records cannot be retained。 Like the value of the input box in the previous step

I have a "creation flow" that requires a payment form if the user hasn't got a credit card attached to their account. So this step is conditional, and looks like this:

This throws an error if they do have a card source attached since that step is null.

Here's the solution I used to fix it in my forked version:

If you'd like me to submit a PR, I'd be glad to.

It would be great if the library (optionally) allowed for zero-indexed steps. For one, it creates confusion when using the optional nav prop that the nav implementation is an array (zero-indexed). Similar issues arise if the steps themselves are an array of components.

Hello! 😄

I'm following the instructions you have regarding moving the Navigation bar to the bottom of the screen but no matter how I try to style to the StepWizard component it just doesn't seem to work. I tried regular css styling by applying a className, inline styling with the style prop and I've also tried wrapping it in a styled-component but nothing works. The StepsWizard component is used in a simple functional component, I've also tried converting it to a class component, that didn't work either. I would really appreciate your help! 😃

If you have only one child component in the step wizard, you get this error
×
TypeError: o.props.children.filter is not a function
a.getSteps
node_modules/react-step-wizard/dist/react-step-wizard.min.js:1

When we use function components the result of child.type is a function and when we test this.isReactComponent we received function... thats ok. But when execute the app the props have not been passed to child.

Dynamic loading is better when there is more content in each step

HI,
I am using custom transition animation for my wizard steps. For me the enterLeft and enterRight transitions are working fine. But the other two, exitLeft and exitRight animations are not working.

I hope the exit animations are applied to the one step when the other step comes in.

Hi

Maybe I am doing something wrong but I noticed that all my steps components render at once. Is there away to stop this?

It would be great if the goToStep also supported named steps, e.g. goToStep("#billingAddress") that is independent of the ordering of the steps (i.e. relative vs absolute).

I'm looking for some advice on how I might achieve a specific piece of functionality using this library. I'm ~90% there with my implementation but there are some bugs that I'm not sure if it's just me or not. What I'm trying to do is the following:

1. Display an initial question with multiple answers
2. Selecting an answer will branch to a different question
3. The previously selected question(s) and answer(s) will remain visible
4. A previous question may be selected to reset progress to that question
5. A different answer may be selected to change branch

What I'm struggling with specifically is 3. I have an exitLeft transition that sets display: block on the step. However, I don't see a way to correctly manage the applied classes. For example, if my path through questions is 1 > 4 > 7 and then I reset back to 1, then 7 is correctly hidden but 4 is not because it isn't actively transitioning.

Any advice regarding this is greatly appreciated.

After switching to step 2, the url adds #step2. When I hit the back button, it returns back to the original url which doesn't do the transition back to step1 at all. Is there a way to have the back button work on step1 after transitioning to step2?

Thanks!

Hello there!
I have the following code:

                        <StepWizard transitions={noTransitions} isHashEnabled>
                            <fieldset>
                                <h5>fsdfdsfsdf</h5>
                                <button className='btn btn-primary btn-block' onClick={nextStep}>Continue</button>
                            </fieldset>
                            <fieldset isActive>
                                <h5>dsggdfg</h5>
                                <button className='btn btn-default btn-block' onClick={previousStep}>Go Back</button>
                            </fieldset>
                        </StepWizard>

Nevertheless, when I click on Continue button, nothing changes. The page reloads, but nothing changes.
Any ideas?

Thanks in advance.

If the current active step had lower height than the next step, next step button are clickable
see here: https://www.dropbox.com/s/yjh7nu46xzmfn64/simplescreenrecorder-2019-04-04_10.21.11.mp4?dl=0

Will you accept a PR for passing in the prop initialStep to <StepWizard /> that will cause the step # to render first on initial mount?

This is a useful prop where StepWizard defines a full step flow but some use cases of a StepWizard flow might need to start at step # 'X' ie: skip the first step.

Hi, thank you for your work. Can you provide types for typescript?

I've having issue where some of the steps are not loaded even thought they are inside the StepWizard component. Let's say I have 8 steps, it only shows the first 5. What could be the problem here?

This doesn't work:

{
   questionnaires.map((questionnaire) => (
     <Questionnaire question={questionnaire.title} options={questionnaire.options} callback={updateSymptom} />
    ))
}

This works:

<Questionnaire question={questionnaires[0].title} options={questionnaires[0].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[1].title} options={questionnaires[1].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[2].title} options={questionnaires[2].options} callback={updateSymptom} />
<Questionnaire question={questionnaires[3].title} options={questionnaires[3].options} callback={updateSymptom} />

Your component does not work with react-scripts because of the css-loader you use:

import Styles from '../dist/styles.css';

You might have to mention that this does not work with react-scripts or you might have to alter the way your styles are imported.

Hi, its not a bug sorry.

Its possible to set the active children from outside a child?

I have an structure like this.

MyContainer
  Buttons
  StepWizard
     Form1
     Form2

I want to control the active child from myContainer. Is this possible?

Thanks!

To reproduce, once the progress bar starts, go to first step and wait.

After at while you will automatically be moved to second step.

This is more of a question than an issue. I wanted to use the initialStep prop to change the step, BUT I needed to do this after the component had already mounted. At least I think I need to do it this way.

Is there a way to control the step of the wizard from a prop even after it mounts? I appreciate any help. Thanks!

Here is my StepWizard:
''<StepWizard isLazyMount={true} initialStep={props.initialStep} ref={el => this.stepWizard = el}> ...some steps </StepWizard>''

I change the initialStep prop on a setState in my app based on a button click.

Thanks!

When I try to build my gatsby application this error occurs and it breaks my build.
I think this can be resolved moving window.addEventListener to componentDidMount.

I'd like to request a new feature: navigation. Something like this: https://semantic-ui.com/elements/step.html. For that we need to know which steps are finished. Is it possible to integrate this?

Thoughts on adding feature for optional url hash of the step # or localStorage?

Very primitive initial thoughts:

<StepWizard persistSate="url">
    <Step><Step1 /></Step>
    <Step><Step2 /></Step>
    <Step><Step.. /></Step>
    <Step><Step..12 /></Step>
    <Step><WhateverComponentName /></Step>
  </StepWizard>

My use case is that I want to display a title for each step in the navbar.
My current solution is to create a new array and render navbar items by mapping it.
It would be nice if Nav component can get just the hashkeys of all children rendered in StepWizard component. It can also be some other prop if not hashKeys.

Something like this would be helpful in my case.

<StepWizard nav={<Nav />}>
   <StepA hashKey='A' />
   <StepB hashKey='B' />
   <StepC hashKey='C' />
</StepWizard>

const Nav = ({ hashKeys }) => {
   console.log(hashKeys);
   //  => ['A', 'B', 'C']
}

It would be great if, I can just map an array prop to display my navbar items.

Could you remove the min-height attribute from step-wizard? It's breaking my layout.

Hi!

It seems there's no clean way to apply styles to the inner divs, especially since webpack will mangle the class names (this is a non-issue for the parent div since it accepts a className prop).

<div class="PublishWizard_wizard-content__3Ovvw">
    <div class="rsw_2Y">
        <div class="rsw_2f  rsw_3G"></div>
    </dv>
</div>

I have to work around the fact that I don't have the class names by doing something like this in my CSS.

#wizard > div,
#wizard > div > div {
    height: 100%; /* example */
}

I'm not sure how this could be solved but seems like a small paper-cut for full control. I'm also not that familiar with webpack so I might be missing something completely obvious here.

How can I disable transitions ?

Hello. I faced with some problem. My first step is Select and for each selection value I have config file with steps, because I need to change set of steps when I change select value. So, my render looks like

 <StepWizard
          isHashEnabled
          isLazyMount
          onStepChange={this.onStepChange}
        >
          {this.renderSelect()}
          {steps.map(({ Component, key }) => (
            <Component key={key} hashKey={key} />
          ))}
        </StepWizard>

The problem is that StepWizard think that there are only two steps (Select and second), although config file (steps) contains list of steps. How I can solve it?

Im getting the following error when trying to use the stepwizard

TypeError: o.props.children.filter is not a function
a.getSteps
node_modules/react-step-wizard/dist/react-step-wizard.min.js:1

if i want to capture form data from Step 3, or 4, i use the update function like in the First step below.

But the update function returns Type error : update is not a function

  const update = (e) => {
    props.update(e.target.name, e.target.value);
  };