Skip to content

Commit e41833e

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #365 from rvsia/removeStepKey
breaking(pf4 wizard): stepKey is now replaced by name
2 parents 9010f89 + 3a37a59 commit e41833e

File tree

11 files changed

+192
-315
lines changed

11 files changed

+192
-315
lines changed

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

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@ export const wizardSchema = {
5858
fields: [
5959
{
6060
title: 'Get started with adding source',
61-
name: 'step-1',
62-
stepKey: 1,
61+
name: 1,
6362
nextStep: {
6463
when: 'source.source-type',
6564
stepMapper: {
@@ -102,8 +101,7 @@ export const wizardSchema = {
102101
},
103102
{
104103
title: 'Configure AWS',
105-
name: 'step-2',
106-
stepKey: 'aws',
104+
name: 'aws',
107105
substepOf: 'Summary',
108106
nextStep: 'summary',
109107
buttons: ValidateButtons,
@@ -122,9 +120,8 @@ export const wizardSchema = {
122120
]
123121
},
124122
{
125-
stepKey: 'google',
123+
name: 'google',
126124
title: 'Configure google',
127-
name: 'step-3',
128125
nextStep: 'summary',
129126
showTitle: false,
130127
fields: [
@@ -147,7 +144,6 @@ export const wizardSchema = {
147144
component: 'summary'
148145
}
149146
],
150-
stepKey: 'summary',
151147
name: 'summary',
152148
substepOf: 'Summary',
153149
title: 'Summary'
@@ -171,8 +167,7 @@ export const wizardSchemaWithFunction = {
171167
fields: [
172168
{
173169
title: 'Get started with adding source',
174-
name: 'step-1',
175-
stepKey: 1,
170+
name: 1,
176171
nextStep: ({ values }) => values.source && values.source['source-type'],
177172
fields: [
178173
{
@@ -209,8 +204,7 @@ export const wizardSchemaWithFunction = {
209204
},
210205
{
211206
title: 'Configure AWS',
212-
name: 'step-2',
213-
stepKey: 'aws',
207+
name: 'aws',
214208
substepOf: 'Summary',
215209
nextStep: 'summary',
216210
buttons: ValidateButtons,
@@ -229,9 +223,8 @@ export const wizardSchemaWithFunction = {
229223
]
230224
},
231225
{
232-
stepKey: 'google',
226+
name: 'google',
233227
title: 'Configure google',
234-
name: 'step-3',
235228
nextStep: 'summary',
236229
showTitle: false,
237230
fields: [
@@ -254,7 +247,6 @@ export const wizardSchemaWithFunction = {
254247
component: 'summary'
255248
}
256249
],
257-
stepKey: 'summary',
258250
name: 'summary',
259251
substepOf: 'Summary',
260252
title: 'Summary'
@@ -276,7 +268,6 @@ export const wizardSchemaSimple = {
276268
{
277269
title: 'Get started with adding source',
278270
name: 'step-1',
279-
stepKey: 1,
280271
nextStep: 'aws',
281272
fields: [
282273
{
@@ -289,8 +280,7 @@ export const wizardSchemaSimple = {
289280
},
290281
{
291282
title: 'Configure AWS',
292-
name: 'step-2',
293-
stepKey: 'aws',
283+
name: 'aws',
294284
nextStep: 'summary',
295285
fields: [
296286
{
@@ -313,7 +303,6 @@ export const wizardSchemaSimple = {
313303
component: 'summary'
314304
}
315305
],
316-
stepKey: 'summary',
317306
name: 'summary',
318307
title: 'Summary'
319308
}
@@ -334,8 +323,7 @@ export const wizardSchemaSubsteps = {
334323
{
335324
title: 'Get started with adding source',
336325
showTitle: true,
337-
name: 'step-1',
338-
stepKey: 1,
326+
name: 1,
339327
nextStep: 'aws',
340328
fields: [
341329
{
@@ -348,8 +336,7 @@ export const wizardSchemaSubsteps = {
348336
},
349337
{
350338
title: 'Configure AWS',
351-
name: 'step-2',
352-
stepKey: 'aws',
339+
name: 'aws',
353340
nextStep: 'summary',
354341
substepOf: 'Summary',
355342
fields: [
@@ -367,7 +354,6 @@ export const wizardSchemaSubsteps = {
367354
component: 'summary'
368355
}
369356
],
370-
stepKey: 'summary',
371357
name: 'summary',
372358
title: 'Summary',
373359
substepOf: 'Summary'
@@ -390,8 +376,7 @@ export const wizardSchemaMoreSubsteps = {
390376
fields: [
391377
{
392378
title: 'Get started with adding source',
393-
name: 'step-1',
394-
stepKey: 1,
379+
name: 1,
395380
nextStep: 'aws',
396381
fields: [
397382
{
@@ -404,8 +389,7 @@ export const wizardSchemaMoreSubsteps = {
404389
},
405390
{
406391
title: 'Configure AWS',
407-
name: 'step-2',
408-
stepKey: 'aws',
392+
name: 'aws',
409393
nextStep: 'aws2',
410394
substepOf: 'Summary',
411395
fields: [
@@ -418,9 +402,8 @@ export const wizardSchemaMoreSubsteps = {
418402
},
419403
{
420404
title: 'Configure AWS part 2 - disabled jumping',
421-
name: 'step-88',
422405
disableForwardJumping: true,
423-
stepKey: 'aws2',
406+
name: 'aws2',
424407
nextStep: 'summary',
425408
substepOf: 'Summary',
426409
fields: [
@@ -438,7 +421,6 @@ export const wizardSchemaMoreSubsteps = {
438421
component: 'summary'
439422
}
440423
],
441-
stepKey: 'summary',
442424
name: 'summary',
443425
title: 'Summary',
444426
substepOf: 'Finish',
@@ -451,7 +433,6 @@ export const wizardSchemaMoreSubsteps = {
451433
component: 'summary'
452434
}
453435
],
454-
stepKey: 'summary2',
455436
name: 'summary2',
456437
title: 'Summary2',
457438
substepOf: 'Finish'

‎packages/pf4-component-mapper/demo/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ class App extends React.Component {
5252
...componentMapper,
5353
summary: Summary
5454
}}
55-
FormTemplate={() => <FormTemplate showFormControls={this.state.additionalOptions.showFormControls} />}
55+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
5656
onCancel={console.log}
5757
schema={this.state.schema}
5858
uiSchema={this.state.ui}
@@ -67,7 +67,7 @@ class App extends React.Component {
6767
summary: Summary
6868
}}
6969
onCancel={() => console.log('Cancel action')}
70-
FormTemplate={() => <FormTemplate showFormControls={this.state.additionalOptions.showFormControls} />}
70+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
7171
schema={wizardSchemaWithFunction}
7272
{...this.state.additionalOptions}
7373
/>
@@ -80,7 +80,7 @@ class App extends React.Component {
8080
}}
8181
onCancel={() => console.log('Cancel action')}
8282
schema={wizardSchemaSubsteps}
83-
FormTemplate={() => <FormTemplate showFormControls={this.state.additionalOptions.showFormControls} />}
83+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
8484
{...this.state.additionalOptions}
8585
/>
8686
<div>More substep</div>
@@ -92,7 +92,7 @@ class App extends React.Component {
9292
}}
9393
onCancel={() => console.log('Cancel action')}
9494
schema={wizardSchemaMoreSubsteps}
95-
FormTemplate={() => <FormTemplate showFormControls={this.state.additionalOptions.showFormControls} />}
95+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
9696
{...this.state.additionalOptions}
9797
/>
9898
<div>Simple wizard</div>
@@ -104,7 +104,7 @@ class App extends React.Component {
104104
}}
105105
onCancel={() => console.log('Cancel action')}
106106
schema={wizardSchemaSimple}
107-
FormTemplate={() => <FormTemplate showFormControls={this.state.additionalOptions.showFormControls} />}
107+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
108108
{...this.state.additionalOptions}
109109
/>
110110
</>}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Wizard = ({
4545
const formOptions = useFormApi();
4646

4747
const [state, dispatch] = useReducer(reducer, {
48-
activeStep: fields[0].stepKey,
48+
activeStep: fields[0].name,
4949
prevSteps: [],
5050
activeStepIndex: 0,
5151
maxStepIndex: 0,
@@ -176,7 +176,7 @@ Wizard.propTypes = {
176176
description: PropTypes.any,
177177
fields: PropTypes.arrayOf(
178178
PropTypes.shape({
179-
stepKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
179+
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
180180
})
181181
).isRequired,
182182
isCompactNav: PropTypes.bool,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const DYNAMIC_WIZARD_TYPES = ['function', 'object'];
55
const createSchema = ({ currentIndex, isDynamic, formOptions, predictSteps, fields }) => {
66
const { values } = formOptions.getState();
77
let schema = [];
8-
let field = fields.find(({ stepKey }) => stepKey === 1 || stepKey === '1'); // find first wizard step
8+
let field = fields[0]; // find first wizard step
99
let index = -1;
1010

1111
while (field) {
@@ -35,7 +35,7 @@ const createSchema = ({ currentIndex, isDynamic, formOptions, predictSteps, fiel
3535
}
3636

3737
if (nextStep) {
38-
field = fields.find(({ stepKey }) => stepKey === nextStep);
38+
field = fields.find(({ name }) => name === nextStep);
3939
} else {
4040
field = undefined;
4141
}
@@ -67,7 +67,7 @@ const handleNext = (state, nextStep, formOptions, fields, predictSteps) => {
6767
};
6868
};
6969

70-
export const findCurrentStep = (activeStep, fields) => fields.find(({ stepKey }) => stepKey === activeStep);
70+
export const findCurrentStep = (activeStep, fields) => fields.find(({ name }) => name === activeStep);
7171

7272
const jumpToStep = (state, index, valid, fields, predictSteps, crossroads, formOptions) => {
7373
const clickOnPreviousStep = state.prevSteps[index];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class WizardStep extends React.Component {
2727
// to fill all the data for the next step. If the next step contains instructions
2828
// at the top, the user will miss them because the scrollbar offset will stay at
2929
// the same place it was.
30-
if (prevProps.stepKey !== this.props.stepKey) {
30+
if (prevProps.name !== this.props.name) {
3131
// HACK: I can not pass ref to WizardBody because it is not
3232
// wrapped by forwardRef. However, the step body (the one that overflows)
3333
// is the grand parent of the form element.
@@ -63,7 +63,7 @@ WizardStep.propTypes = {
6363
showTitles: PropTypes.bool,
6464
showTitle: PropTypes.bool,
6565
customTitle: PropTypes.node,
66-
stepKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
66+
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
6767
};
6868

6969
export default WizardStep;

0 commit comments

Comments
 (0)