|
1 | | -This a custom component. OnSubmit will send only values from visited steps. |
| 1 | +**Docs for steps** |
2 | 2 |
|
3 | | -**Props** |
| 3 | +|Props|Type|Description| |
| 4 | +|----|-------------|----------------| |
| 5 | +|name|string,number|Name of the step| |
| 6 | +|nextStep|object/stepKey of next step/function|See below| |
| 7 | +|fields|array|As usual| |
4 | 8 |
|
5 | | -| Prop | Type | Default | Description | |
6 | | -| ------------- | ------------- | ------------- | ------------- | |
7 | | -| buttonLabels | object of nodes | see below | Labels for buttons | |
8 | | -| stepsInfo | object | undefined | Information for building the stepper | |
9 | | -| ButtonContainerProps | object | {} | Props passed to Grid wrapping buttons | |
10 | | -| StepperProps | object | {} | Props passed to the Stepper component | |
11 | | -| WizardBodyProps | object | {} | Props passed to Grid wrapping fields and the button container | |
12 | | -| WizardProps | object | {} | Props passed to the root Grid | |
| 9 | +**nextStep** |
13 | 10 |
|
14 | | -**Default buttonLabels** |
| 11 | +A) **string** - no branching, name of the next step |
15 | 12 |
|
16 | 13 | ```jsx |
17 | 14 | { |
18 | | - cancel: 'Cancel', |
19 | | - back: 'Back', |
20 | | - next: 'Next', |
21 | | - submit: 'Submit', |
| 15 | + nextStep: 'next-step-name' |
22 | 16 | } |
23 | 17 | ``` |
24 | 18 |
|
25 | | -You can rewrite only selection of them, e.g. |
| 19 | +B) **object** - simple branching |
26 | 20 |
|
27 | 21 | ```jsx |
28 | | -{ |
29 | | - submit: 'Deploy', |
30 | | -} |
| 22 | +nextStep: { |
| 23 | + when: 'source-type', |
| 24 | + stepMapper: { |
| 25 | + aws: 'aws-step', |
| 26 | + google: 'google-step', |
| 27 | + ... |
| 28 | + }, |
| 29 | +}, |
31 | 30 | ``` |
32 | 31 |
|
33 | | -(Others will stay default) |
| 32 | +i.e.: When `source-type` is `asw` go to to the `aws-step`. |
34 | 33 |
|
35 | | -**Format of stepsInfo** |
| 34 | +C) **function** - complex branching |
36 | 35 |
|
37 | | -|Key|Type|Default|Description| |
38 | | -|---|----|-------|-----------| |
39 | | -|label/title|string|undefined|Text for the title| |
40 | | -|StepLabelProps|object|{}|Props passed to StepLabel component| |
41 | | -|StepProps|object|{}|Props passed to Step component| |
| 36 | +another option is to use custom function. The custom function receives as the first argument an object with values and the function has to return a `name` in string. |
42 | 37 |
|
43 | 38 | ```jsx |
44 | | -[ |
45 | | - { title: 'Add a source', StepLabelProps: { style: { color: 'red' } } }, // step 1 |
46 | | - { title: 'Configure a source' }, // step 2 |
47 | | - { title: 'Summary' }, // step 3 |
48 | | - ... |
49 | | -], |
| 39 | +nextStep: ({ values }) => (values.aws === '123' &&& values.password === 'secret') ? 'secretStep' : 'genericStep' |
50 | 40 | ``` |
51 | 41 |
|
52 | | -**Docs for steps** |
53 | | - |
54 | | -| Props | Type | Description | |
55 | | -| ------------- | ------------- | ------------- | |
56 | | -| name | string, number | Name of the step | |
57 | | -| nextStep | object/stepKey of next step/function | See below | |
58 | | -| fields | array | As usual | |
| 42 | +**initialState** |
59 | 43 |
|
60 | | -- nextStep can be name of the next step |
61 | | -- or you can branch the way by using of object: |
| 44 | +It is possible to set the initial state of the wizard component. This can be useful when an application returns users to a specific step. |
62 | 45 |
|
63 | 46 | ```jsx |
64 | | -nextStep: { |
65 | | - when: 'source-type', // name of field, where deciding value is stored |
66 | | - stepMapper: { |
67 | | - aws: 'aws', // value: 'name' of next step |
68 | | - google: 'google', |
69 | | - ... |
70 | | - }, |
71 | | -}, |
| 47 | +{ |
| 48 | + component: 'wizard', |
| 49 | + ..., // fields, etc. |
| 50 | + initialState: { |
| 51 | + activeStep: 'second-step', // name of the active step |
| 52 | + activeStepIndex: 1, // active index |
| 53 | + maxStepIndex: 1, // max achieved index |
| 54 | + prevSteps: ['first-step'], // array with names of previously visited steps |
| 55 | + registeredFieldsHistory: { 'first-step': ['field'] } |
| 56 | + // array of registered fields for each visited step |
| 57 | + // only values from registered fields will be submitted |
| 58 | + } |
| 59 | +} |
72 | 60 | ``` |
73 | 61 |
|
74 | | -- another option is to use custom function. The custom function receives as the first argument an object with values and the function has to return a `name` in string. |
| 62 | +How to get the state from existing wizard? The state is passed to both `onCancel` and `onSubmit`: |
| 63 | + |
| 64 | +A) `onSubmit` - `(values, formApi, wizardState) => ...` |
| 65 | +B) `onCancel` - `(values, wizardState) => ...` |
| 66 | + |
| 67 | +**WizardContext** |
| 68 | + |
| 69 | +Wizard share its configuration and props via `WizardContext`. |
75 | 70 |
|
76 | 71 | ```jsx |
77 | | -nextStep: ({ values }) => (values.aws === '123' &&& values.password === 'secret') ? 'secretStep' : 'genericStep' |
| 72 | +import { WizardContext } from '@data-driven-forms/react-form-renderer'; |
| 73 | + |
| 74 | + const { |
| 75 | + crossroads, // variables changing the navigation |
| 76 | + formOptions, // modified formOptions with submit and cancel handlers |
| 77 | + currentStep, // curent step object |
| 78 | + handlePrev, // going back in the wizard |
| 79 | + onKeyDown, // overrides form onKeyDown event for the wizard |
| 80 | + jumpToStep, // jump to step, jumpToStep(index, formOptions.valid) |
| 81 | + setPrevSteps, // rewrites the nav schema, use to change the navigation |
| 82 | + handleNext, // jumps to the nextStep: handleNext(nextStep) |
| 83 | + navSchema, // internal object representing the schema of current wizard flow |
| 84 | + activeStepIndex, // active index of the step |
| 85 | + maxStepIndex, // maximal achieved step |
| 86 | + isDynamic, // if form is dynamic (= it is branching steps) |
| 87 | + prevSteps // array with names of previous steps |
| 88 | + } = useContext(WizardContext); |
78 | 89 | ``` |
| 90 | + |
| 91 | +*This API is subject to change. If you implement custom components using these variables and functions, make sure that it is fully tested to prevent bugs when updating.* |
0 commit comments