brock-noah / react-whatever-wizard Goto Github PK

Both the StepButton and your component button will need props. How should we separate these to avoid prop name conflicts.

1. Component's props as an object

<StepButton
  role="next"
  componentClass="button"
  componentProps={ {disabled} }
/>

2. Step Component props as an object

<StepButton
  wwProps={ {role: "next"} }
  componentClass="button"
  disabled
/>

3. Some string namespace for whatever wizard props
   _role or ww-role

role handles changes which step it is

1. button role fires, then button onClick
2. button onClick fires, then role
3. button onClick receives the role function as an argument, deciding if it should be called
4. StepButton.onClick.PropTypes.oneOf(['next', 'back', function])
5. ignore button's prop onClick, only role fires

Seems to not work

1. current repo is create-react-app
2. move to only react-whatever-wizard code
3. create npm package

Should Step map the children providing more props to StepButton?

Are any of the following useful to a single standalone button?

• step number (number)
• total number of steps (number)
• on first step (bool)
• on last step (bool)
• actions.{first, back, next} (func)

Look at route for React.Children.map instead of Array.reduce

Having a prop of props seems smelly.

Current:

<WW>
  <Step componentClass={YourStepOne} componentProps={{color: 'blue'}}>
    <StepButton />
  </Step>
</WW>

• lib calls React.createElement

Possible Alt:

<WW>
  <Step>
    <YourStepOne color="blue">
       <StepButton />
    </YourStepOne>
  </Step>
</WW>

How would this work with layout component? Does layoutComponent wrap all the steps? How does each step override the default props for the layout? Another prop of props, or wrap each step in layoutComponent.

Current:

<WW layoutComponent={YourLayout} layoutProps='Enter Contact Info'>
  <Step componentClass={YourStepOne} componentProps={{color: 'blue'}}>
    <StepButton />
  </Step>
</WW>

Possible Alt:

<WW>
  <YourLayout title='Enter Your Contact Info'>
    <Step>
      <YourStepOne color="blue">
         <StepButton />
      </YourStepOne>
    </Step>
    <Step />
  </YourLayout>
</WW>

Does it provide value?