Skip to content

Commit f8b8c79

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #636 from rvsia/makeWizardMoreTranslatable
Make PF4 wizard more translatable
2 parents d1b8eac + 0d2128b commit f8b8c79

File tree

7 files changed

+122
-12
lines changed

7 files changed

+122
-12
lines changed

‎packages/common/src/wizard/reducer.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ const createSchema = ({ formOptions, fields }) => {
1313
schema = [
1414
...schema,
1515
{
16+
name: field.name,
1617
title: field.title,
17-
substepOf: field.substepOf,
18+
substepOf: field.substepOf?.name || field.substepOf,
19+
substepOfTitle: field.substepOf?.title || field.substepOf,
1820
index,
1921
primary: !schema[schema.length - 1] || !field.substepOf || field.substepOf !== schema[schema.length - 1].substepOf
2022
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
2424
class App extends React.Component {
2525
constructor(props) {
2626
super(props);
27-
this.state = {schema: selectSchema, additionalOptions: {}}
27+
this.state = {schema: wizardSchema, additionalOptions: {}}
2828
}
2929

3030
render() {

‎packages/pf4-component-mapper/src/files/wizard.d.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,16 @@ export interface WizardButtonsProps {
4747
selectNext: SelectNextFunction;
4848
}
4949

50+
export interface SubstepOfObject {
51+
name: string;
52+
title?: ReactNode;
53+
}
54+
5055
export interface WizardField {
5156
name: string | number;
5257
fields: Field[];
5358
nextStep?: WizardNextStep;
54-
substepOf?: string | number;
59+
substepOf?: string | number | SubstepOfObject;
5560
title?: ReactNode;
5661
showTitle?: boolean;
5762
customTitle?: ReactNode;

‎packages/pf4-component-mapper/src/files/wizard/wizard-nav.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const WizardNavigationInternal = React.memo(
3030

3131
return (
3232
<WizardNavItem
33-
key={step.substepOf || step.title}
34-
content={step.substepOf || step.title}
33+
key={step.substepOf || step.name}
34+
content={step.substepOfTitle || step.title}
3535
isCurrent={substeps ? activeStepIndex >= step.index && activeStepIndex < step.index + substeps.length : activeStepIndex === step.index}
3636
isDisabled={isValid ? maxStepIndex < step.index : step.index > activeStepIndex}
3737
onNavItemClick={(ind) => jumpToStep(ind, isValid)}
@@ -41,7 +41,7 @@ const WizardNavigationInternal = React.memo(
4141
<WizardNav returnList>
4242
{substeps.map((substep) => (
4343
<WizardNavItem
44-
key={substep.title}
44+
key={substep.name}
4545
content={substep.title}
4646
isCurrent={activeStepIndex === substep.index}
4747
isDisabled={isValid ? maxStepIndex < substep.index : substep.index > activeStepIndex}

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -463,14 +463,18 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
463463
Array [
464464
Object {
465465
"index": 0,
466+
"name": "1",
466467
"primary": true,
467468
"substepOf": undefined,
469+
"substepOfTitle": undefined,
468470
"title": "foo-step",
469471
},
470472
Object {
471473
"index": 1,
474+
"name": "2",
472475
"primary": true,
473476
"substepOf": undefined,
477+
"substepOfTitle": undefined,
474478
"title": "bar-step",
475479
},
476480
]
@@ -489,14 +493,18 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
489493
Array [
490494
Object {
491495
"index": 0,
496+
"name": "1",
492497
"primary": true,
493498
"substepOf": undefined,
499+
"substepOfTitle": undefined,
494500
"title": "foo-step",
495501
},
496502
Object {
497503
"index": 1,
504+
"name": "2",
498505
"primary": true,
499506
"substepOf": undefined,
507+
"substepOfTitle": undefined,
500508
"title": "bar-step",
501509
},
502510
]
@@ -508,7 +516,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
508516
content="foo-step"
509517
isCurrent={true}
510518
isDisabled={false}
511-
key="foo-step"
519+
key="1"
512520
onNavItemClick={[Function]}
513521
step={0}
514522
>
@@ -529,7 +537,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
529537
content="bar-step"
530538
isCurrent={false}
531539
isDisabled={true}
532-
key="bar-step"
540+
key="2"
533541
onNavItemClick={[Function]}
534542
step={1}
535543
>
@@ -1660,14 +1668,18 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
16601668
Array [
16611669
Object {
16621670
"index": 0,
1671+
"name": "1",
16631672
"primary": true,
16641673
"substepOf": undefined,
1674+
"substepOfTitle": undefined,
16651675
"title": "foo-step",
16661676
},
16671677
Object {
16681678
"index": 1,
1679+
"name": "2",
16691680
"primary": true,
16701681
"substepOf": undefined,
1682+
"substepOfTitle": undefined,
16711683
"title": "bar-step",
16721684
},
16731685
]
@@ -1686,14 +1698,18 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
16861698
Array [
16871699
Object {
16881700
"index": 0,
1701+
"name": "1",
16891702
"primary": true,
16901703
"substepOf": undefined,
1704+
"substepOfTitle": undefined,
16911705
"title": "foo-step",
16921706
},
16931707
Object {
16941708
"index": 1,
1709+
"name": "2",
16951710
"primary": true,
16961711
"substepOf": undefined,
1712+
"substepOfTitle": undefined,
16971713
"title": "bar-step",
16981714
},
16991715
]
@@ -1705,7 +1721,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
17051721
content="foo-step"
17061722
isCurrent={true}
17071723
isDisabled={false}
1708-
key="foo-step"
1724+
key="1"
17091725
onNavItemClick={[Function]}
17101726
step={0}
17111727
>
@@ -1726,7 +1742,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
17261742
content="bar-step"
17271743
isCurrent={false}
17281744
isDisabled={true}
1729-
key="bar-step"
1745+
key="2"
17301746
onNavItemClick={[Function]}
17311747
step={1}
17321748
>

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

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,63 @@ describe('<Wizard />', () => {
205205
expect(enterHandle.default).toHaveBeenCalledWith(event, formOptions, '1', findCurrentStep, handleNext, handleSubmit);
206206
});
207207

208+
it('should render correctly with objects as substepOf and nodes titles', () => {
209+
schema = {
210+
fields: [
211+
{
212+
name: 'wizard',
213+
component: 'wizard',
214+
inModal: true,
215+
fields: [
216+
{
217+
title: <h1>Custom title</h1>,
218+
name: 'first-step',
219+
fields: [],
220+
nextStep: 'middle-step',
221+
substepOf: { name: 'summary', title: <h2>Custom title 2</h2> }
222+
},
223+
{
224+
name: 'middle-step',
225+
title: 'middle-step',
226+
fields: [],
227+
substepOf: 'summary',
228+
nextStep: 'end'
229+
},
230+
{
231+
name: 'end',
232+
title: <h3>Custom title 3</h3>,
233+
fields: []
234+
}
235+
]
236+
}
237+
]
238+
};
239+
240+
const wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
241+
242+
expect(
243+
wrapper
244+
.find(WizardNavItem)
245+
.first()
246+
.props().content
247+
).toEqual(<h2>Custom title 2</h2>);
248+
249+
expect(
250+
wrapper
251+
.find(WizardNavItem)
252+
.first()
253+
.children()
254+
.find(WizardNavItem)
255+
).toHaveLength(2);
256+
257+
expect(
258+
wrapper
259+
.find(WizardNavItem)
260+
.last()
261+
.props().content
262+
).toEqual(<h3>Custom title 3</h3>);
263+
});
264+
208265
it('should render correctly in modal and unmount', () => {
209266
schema = {
210267
fields: [
@@ -315,8 +372,8 @@ describe('<Wizard />', () => {
315372
loading: false,
316373
maxStepIndex: 1,
317374
navSchema: [
318-
{ index: 0, primary: true, substepOf: undefined, title: 'foo-step' },
319-
{ index: 1, primary: true, substepOf: undefined, title: 'bar-step' }
375+
{ index: 0, name: '1', primary: true, substepOf: undefined, substepOfTitle: undefined, title: 'foo-step' },
376+
{ index: 1, name: '2', primary: true, substepOf: undefined, substepOfTitle: undefined, title: 'bar-step' }
320377
],
321378
prevSteps: ['1'],
322379
registeredFieldsHistory: { 1: ['foo-field'] }

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,36 @@ Schema: [
127127
Progressive Wizard works same way. It checks if previous step has the same \`substepOf\` value and if so, it grouped them together.
128128
If the value is different, a new primary step is created with the step as a substep.
129129

130+
**React node as substepOf**
131+
132+
You can put a React node as `substepOf`. In this case you have to provide an object with keys `name: string` and `title?: ReactNode`.
133+
134+
```jsx
135+
<h2>Custom title</h2> // name: Configuration
136+
Security
137+
Credentials
138+
Summary
139+
```
140+
141+
```jsx
142+
Schema: [
143+
{
144+
name: 'security',
145+
title: 'Security',
146+
nextStep: 'credentials',
147+
substepOf: { name: 'Configuration', title: <h2>Custom title</h2> }
148+
},{
149+
name: 'credentials',
150+
title: 'Credentials',
151+
nextStep: 'summary',
152+
substepOf: 'Configuration' // title can be put only in the first step
153+
},{
154+
name: 'summary',
155+
title: 'Summary'
156+
},
157+
]
158+
```
159+
130160
**First step**
131161

132162
First step should have on the first position of the `fields` array.

0 commit comments

Comments
 (0)