Skip to content

Commit 47b198b

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #384 from rvsia/predictStepsDefault
fix(pf4): wizard predicts steps by default
2 parents e72dbd9 + b258cb1 commit 47b198b

6 files changed

Lines changed: 30 additions & 106 deletions

File tree

‎packages/pf4-component-mapper/demo/demo-schemas/wizard-schema.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export const wizardSchema = {
4949
component: componentTypes.WIZARD,
5050
name: 'wizzard',
5151
crossroads: ['source.source-type'],
52-
predictSteps: true,
5352
//inModal: true,
5453
title: 'Title',
5554
showTitles: true,
@@ -158,7 +157,6 @@ export const wizardSchemaWithFunction = {
158157
{
159158
component: componentTypes.WIZARD,
160159
name: 'wizzard',
161-
predictSteps: true,
162160
//inModal: true,
163161
title: 'Title',
164162
showTitles: true,
@@ -372,7 +370,6 @@ export const wizardSchemaMoreSubsteps = {
372370
title: 'Dynamic with steps predicting',
373371
description: 'Description',
374372
buttonsPosition: 'left',
375-
predictSteps: true,
376373
fields: [
377374
{
378375
title: 'Get started with adding source',

‎packages/pf4-component-mapper/src/components/wizard.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ const Wizard = ({
3232
isDynamic,
3333
inModal,
3434
crossroads,
35-
predictSteps,
3635
title,
3736
description,
3837
buttonLabels,
@@ -57,22 +56,22 @@ const Wizard = ({
5756
if (inModal) {
5857
dispatch({ type: 'setContainer' });
5958
} else {
60-
dispatch({ type: 'finishLoading', payload: { formOptions, fields, predictSteps } });
59+
dispatch({ type: 'finishLoading', payload: { formOptions, fields } });
6160
}
62-
}, [inModal, formOptions, fields, predictSteps]);
61+
}, [inModal, formOptions, fields]);
6362

6463
useEffect(() => {
6564
if (state.container) {
6665
document.body.appendChild(state.container);
67-
dispatch({ type: 'finishLoading', payload: { formOptions, fields, predictSteps } });
66+
dispatch({ type: 'finishLoading', payload: { formOptions, fields } });
6867
}
6968

7069
return () => {
7170
if (inModal && state.container) {
7271
document.body.removeChild(state.container);
7372
}
7473
};
75-
}, [state.container, formOptions, fields, predictSteps, inModal]);
74+
}, [state.container, formOptions, fields, inModal]);
7675

7776
if (state.loading) {
7877
return null;
@@ -114,13 +113,13 @@ const Wizard = ({
114113
/>
115114
);
116115

117-
const jumpToStep = (index, valid) => dispatch({ type: 'jumpToStep', payload: { index, valid, fields, predictSteps, crossroads, formOptions } });
116+
const jumpToStep = (index, valid) => dispatch({ type: 'jumpToStep', payload: { index, valid, fields, crossroads, formOptions } });
118117

119118
const handlePrev = () => jumpToStep(state.activeStepIndex - 1);
120119

121-
const handleNext = (nextStep) => dispatch({ type: 'handleNext', payload: { nextStep, formOptions, fields, predictSteps } });
120+
const handleNext = (nextStep) => dispatch({ type: 'handleNext', payload: { nextStep, formOptions, fields } });
122121

123-
const setPrevSteps = () => dispatch({ type: 'setPrevSteps', payload: { formOptions, fields, predictSteps } });
122+
const setPrevSteps = () => dispatch({ type: 'setPrevSteps', payload: { formOptions, fields } });
124123

125124
const findCurrentStepWrapped = (step) => findCurrentStep(step, fields);
126125

@@ -185,7 +184,6 @@ Wizard.propTypes = {
185184
setFullHeight: PropTypes.bool,
186185
isDynamic: PropTypes.bool,
187186
showTitles: PropTypes.bool,
188-
predictSteps: PropTypes.bool,
189187
crossroads: PropTypes.arrayOf(PropTypes.string)
190188
};
191189

‎packages/pf4-component-mapper/src/components/wizard/reducer.js‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import get from 'lodash/get';
22

33
export const DYNAMIC_WIZARD_TYPES = ['function', 'object'];
44

5-
const createSchema = ({ currentIndex, isDynamic, formOptions, predictSteps, fields }) => {
5+
const createSchema = ({ currentIndex, isDynamic, formOptions, fields }) => {
66
const { values } = formOptions.getState();
77
let schema = [];
88
let field = fields[0]; // find first wizard step
@@ -20,10 +20,6 @@ const createSchema = ({ currentIndex, isDynamic, formOptions, predictSteps, fiel
2020
}
2121
];
2222

23-
if (isDynamic && !predictSteps && currentIndex === index) {
24-
break;
25-
}
26-
2723
let nextStep = field.nextStep;
2824

2925
if (typeof field.nextStep === 'object') {
@@ -44,7 +40,7 @@ const createSchema = ({ currentIndex, isDynamic, formOptions, predictSteps, fiel
4440
return schema;
4541
};
4642

47-
const handleNext = (state, nextStep, formOptions, fields, predictSteps) => {
43+
const handleNext = (state, nextStep, formOptions, fields) => {
4844
const newActiveIndex = state.activeStepIndex + 1;
4945
const shouldInsertStepIntoHistory = state.prevSteps.includes(state.activeStep);
5046

@@ -58,7 +54,6 @@ const handleNext = (state, nextStep, formOptions, fields, predictSteps) => {
5854
navSchema: state.isDynamic
5955
? createSchema({
6056
...state,
61-
predictSteps,
6257
fields,
6358
formOptions,
6459
currentIndex: newActiveIndex
@@ -69,7 +64,7 @@ const handleNext = (state, nextStep, formOptions, fields, predictSteps) => {
6964

7065
export const findCurrentStep = (activeStep, fields) => fields.find(({ name }) => name === activeStep);
7166

72-
const jumpToStep = (state, index, valid, fields, predictSteps, crossroads, formOptions) => {
67+
const jumpToStep = (state, index, valid, fields, crossroads, formOptions) => {
7368
const clickOnPreviousStep = state.prevSteps[index];
7469

7570
if (clickOnPreviousStep) {
@@ -92,7 +87,7 @@ const jumpToStep = (state, index, valid, fields, predictSteps, crossroads, formO
9287
const currentStepHasStepMapper = DYNAMIC_WIZARD_TYPES.includes(typeof currentStep.nextStep);
9388

9489
const hardcodedCrossroads = crossroads;
95-
const dynamicStepShouldDisableNav = newState.isDynamic && (currentStepHasStepMapper || !predictSteps);
90+
const dynamicStepShouldDisableNav = newState.isDynamic && currentStepHasStepMapper;
9691

9792
const invalidStepShouldDisableNav = valid === false;
9893

@@ -103,15 +98,12 @@ const jumpToStep = (state, index, valid, fields, predictSteps, crossroads, formO
10398
if (dynamicStepShouldDisableNav && !hardcodedCrossroads) {
10499
updatedState = {
105100
...updatedState,
106-
navSchema: predictSteps
107-
? createSchema({
108-
...updatedState,
109-
predictSteps,
110-
formOptions,
111-
fields,
112-
currentIndex: index
113-
})
114-
: newState.navSchema.slice(0, index + INDEXING_BY_ZERO),
101+
navSchema: createSchema({
102+
...updatedState,
103+
formOptions,
104+
fields,
105+
currentIndex: index
106+
}),
115107
prevSteps: newState.prevSteps.slice(0, index),
116108
maxStepIndex: index
117109
};
@@ -143,7 +135,6 @@ const reducer = (state, { type, payload }) => {
143135
loading: false,
144136
navSchema: createSchema({
145137
...state,
146-
predictSteps: payload.predictSteps,
147138
fields: payload.fields,
148139
formOptions: payload.formOptions,
149140
currentIndex: 0
@@ -152,22 +143,21 @@ const reducer = (state, { type, payload }) => {
152143
case 'setContainer':
153144
return { ...state, container: document.createElement('div') };
154145
case 'handleNext':
155-
return handleNext(state, payload.nextStep, payload.formOptions, payload.fields, payload.predictSteps);
146+
return handleNext(state, payload.nextStep, payload.formOptions, payload.fields);
156147
case 'setPrevSteps':
157148
return {
158149
...state,
159150
prevSteps: state.prevSteps.slice(0, state.activeStepIndex),
160151
maxStepIndex: state.activeStepIndex,
161152
navSchema: createSchema({
162153
...state,
163-
predictSteps: payload.predictSteps,
164154
fields: payload.fields,
165155
formOptions: payload.formOptions,
166156
currentIndex: state.activeStepIndex
167157
})
168158
};
169159
case 'jumpToStep':
170-
return jumpToStep(state, payload.index, payload.valid, payload.fields, payload.predictSteps, payload.crossroads, payload.formOptions);
160+
return jumpToStep(state, payload.index, payload.valid, payload.fields, payload.crossroads, payload.formOptions);
171161
default:
172162
return state;
173163
}

‎packages/pf4-component-mapper/src/tests/wizard/wizard.test.js‎

Lines changed: 4 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -380,63 +380,6 @@ describe('<Wizard />', () => {
380380
).toEqual('bar-step');
381381
});
382382

383-
it('should build progressive navigation', () => {
384-
schema = {
385-
fields: [
386-
{
387-
name: 'wizard',
388-
component: 'wizard',
389-
isDynamic: true,
390-
fields: [
391-
{
392-
title: 'foo-step',
393-
name: '1',
394-
fields: [
395-
{
396-
name: 'foo-field',
397-
component: 'text-field'
398-
}
399-
],
400-
nextStep: '2'
401-
},
402-
{
403-
name: '2',
404-
title: 'bar-step',
405-
fields: [
406-
{
407-
name: 'bar-field',
408-
component: 'text-field'
409-
}
410-
]
411-
}
412-
]
413-
}
414-
]
415-
};
416-
417-
const wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
418-
419-
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(1);
420-
expect(
421-
wrapper
422-
.find('.pf-c-wizard__nav-item')
423-
.first()
424-
.childAt(0)
425-
.text()
426-
).toEqual('foo-step');
427-
428-
nextButtonClick(wrapper);
429-
430-
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(2);
431-
expect(
432-
wrapper
433-
.find('.pf-c-wizard__nav-item')
434-
.last()
435-
.childAt(0)
436-
.text()
437-
).toEqual('bar-step');
438-
});
439-
440383
it('should jump when click simple navigation', () => {
441384
const wrapper = mount(<FormRenderer {...initialProps} />);
442385

@@ -637,12 +580,13 @@ describe('<Wizard />', () => {
637580
const wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
638581

639582
expect(wrapper.find(TextInput).props().name).toEqual('foo-field');
640-
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(1);
583+
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(3);
584+
expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(2); // steps + substep
641585

642586
nextButtonClick(wrapper);
643587

644588
expect(wrapper.find(TextInput).props().name).toEqual('bar-field');
645-
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(3);
589+
expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(0);
646590

647591
// click on first nav link
648592
wrapper
@@ -653,8 +597,7 @@ describe('<Wizard />', () => {
653597
wrapper.update();
654598

655599
expect(wrapper.find(TextInput).props().name).toEqual('foo-field');
656-
// visited step perished from navigation
657-
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(1);
600+
expect(wrapper.find('.pf-c-wizard__nav-item')).toHaveLength(3);
658601

659602
nextButtonClick(wrapper);
660603

@@ -862,7 +805,6 @@ describe('<Wizard />', () => {
862805
{
863806
component: componentTypes.WIZARD,
864807
name: 'wizard',
865-
predictSteps: true,
866808
fields: [
867809
{
868810
title: FIRST_TITLE,
@@ -1041,7 +983,6 @@ describe('<Wizard />', () => {
1041983
{
1042984
component: componentTypes.WIZARD,
1043985
name: 'wizard',
1044-
predictSteps: true,
1045986
fields: [
1046987
{
1047988
title: FIRST_TITLE,
@@ -1129,7 +1070,6 @@ describe('<Wizard />', () => {
11291070
{
11301071
component: componentTypes.WIZARD,
11311072
name: 'wizard',
1132-
predictSteps: true,
11331073
fields: [
11341074
{
11351075
title: FIRST_TITLE,
@@ -1206,7 +1146,6 @@ describe('<Wizard />', () => {
12061146
{
12071147
component: componentTypes.WIZARD,
12081148
name: 'wizard',
1209-
predictSteps: true,
12101149
fields: [
12111150
{
12121151
title: FIRST_TITLE,
@@ -1288,7 +1227,6 @@ describe('<Wizard />', () => {
12881227
{
12891228
component: componentTypes.WIZARD,
12901229
name: 'wizard',
1291-
predictSteps: true,
12921230
crossroads: ['source.source-type'],
12931231
fields: [
12941232
{
@@ -1453,7 +1391,6 @@ describe('<Wizard />', () => {
14531391
{
14541392
component: componentTypes.WIZARD,
14551393
name: 'wizard',
1456-
predictSteps: true,
14571394
crossroads: ['source.source-type'],
14581395
fields: [
14591396
{

‎packages/react-renderer-demo/src/app/pages/renderer/migration-guide.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,10 @@ import { componentMapper } from '@data-driven-forms/pf4-component-mapper'
149149
150150
- stepKey prop is replaced by name
151151
152+
### PF4 Wizard predictSteps removed
153+
154+
- predictSteps prop is now removed, wizard always predicts steps
155+
152156
</Grid>
153157
<Grid item xs={false} md={2}>
154158
<ListOfContents file="renderer/migration-guide" />

‎packages/react-renderer-demo/src/app/src/doc-components/pf4-wizard.md‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
1515
| setFullHeight | bool | undefined | see Patternfly |
1616
| isDynamic | bool | undefined | will dynamically generate steps navigation (=progressive wizard), please use if you use any condition fields which changes any field in other steps (wizards with conditional steps are dynamic by default) |
1717
|showTitles|bool|undefined|If true, step titles will be shown in the wizard body|
18-
|predictSteps|bool|undefined|If true, dynamic wizard will predict steps in the navigation.|
1918
|crossroads|array|undefined|Array of field names, which change next steps|
2019

2120
**Default buttonLabels**
@@ -40,7 +39,7 @@ You can rewrite only selection of them, e.g.
4039

4140
**Crossroads**
4241

43-
With the help of `crossroads` you can manually defined which fields change next steps and together with `predictSteps`, it will cause that the wizard navigation is always refreshed, when one of the crossroads name is changed.
42+
With the help of `crossroads` you can manually defined which fields change next steps, it will cause that the wizard navigation is always refreshed, when one of the crossroads name is changed.
4443

4544
Ex.: `crossroads: ['name', 'nested.password']`
4645

@@ -179,9 +178,8 @@ Progressive wizard
179178
- steps are visible as user visits them
180179
- user can jump only back
181180
- use `isDynamic` prop to enforce it
182-
- use `predictSteps` to allow navigation to show future steps
183-
- if you have any conditional fields in the step, you should use `disableForwardJumping` in the step definition, to disable jumping forward in the navigation, otherwise user could miss the changed fields in next steps.
184-
- you can use `crossroads` to define, which fields the wizzard will listen to and change the navigation according to changes of the defined values
181+
- if you have any conditional fields in the step, you should use `disableForwardJumping` in the step definition, to disable jumping forward in the navigation, otherwise user could miss the changed fields in next steps.
182+
- you can use `crossroads` to define, which fields the wizzard will listen to and change the navigation according to changes of the defined values
185183

186184
![progressivewizard](https://user-images.githubusercontent.com/32869456/58427241-5b370a80-809f-11e9-8e79-a4a829b8d181.gif)
187185

0 commit comments

Comments
 (0)