Skip to content

Commit e1e167b

Browse files
rvsiarvsia
authored
Merge pull request #877 from rvsia/wizardDropdownNav
Wizard dropdown nav
2 parents 222b52c + 7dde16f commit e1e167b

11 files changed

Lines changed: 563 additions & 78 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.50.4/patternfly-base.css"/>
8-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@4.50.4/patternfly-addons.css"/>
7+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@latest/patternfly-base.css"/>
8+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@patternfly/patternfly@latest/patternfly-addons.css"/>
99
<title>Data driven forms</title>
1010
</head>
1111
<body>

‎packages/pf4-component-mapper/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
3131
"@babel/preset-env": "^7.1.6",
3232
"@babel/preset-react": "^7.0.0",
33-
"@patternfly/react-core": "^4.63.3",
34-
"@patternfly/react-icons": "^4.7.11",
33+
"@patternfly/react-core": "^4.75.2",
34+
"@patternfly/react-icons": "^4.7.16",
3535
"@semantic-release/git": "^7.0.5",
3636
"@semantic-release/npm": "^5.1.1",
3737
"babel-core": "^7.0.0-bridge.0",
@@ -74,8 +74,8 @@
7474
},
7575
"peerDependencies": {
7676
"@data-driven-forms/react-form-renderer": "^2.4.6",
77-
"@patternfly/react-core": "^4.63.3",
78-
"@patternfly/react-icons": "^4.7.11"
77+
"@patternfly/react-core": "^4.75.2",
78+
"@patternfly/react-icons": "^4.7.16"
7979
},
8080
"dependencies": {
8181
"prop-types": "^15.7.2",

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import './wizard/wizard-styles.scss';
1111

1212
import WizardNavigation from './wizard/wizard-nav';
1313
import reducer from './wizard/reducer';
14+
import WizardToggle from './wizard/wizard-toggle';
1415

1516
const Modal = ({ children, container, inModal }) =>
1617
inModal
@@ -55,7 +56,7 @@ const WizardInternal = ({
5556
maxStepIndex,
5657
isDynamic
5758
} = useContext(WizardContext);
58-
const [state, dispatch] = useReducer(reducer, { loading: true, container });
59+
const [state, dispatch] = useReducer(reducer, { loading: true, container, openNav: false });
5960

6061
useEffect(() => {
6162
if (inModal) {
@@ -102,17 +103,21 @@ const WizardInternal = ({
102103
closeButtonAriaLabel={closeButtonAriaLabel}
103104
/>
104105
)}
106+
<WizardToggle activeStepIndex={activeStepIndex} currentStep={currentStep} navSchema={navSchema} isOpen={state.openNav} dispatch={dispatch} />
105107
<div className="pf-c-wizard__outer-wrap">
106108
<div className="pf-c-wizard__inner-wrap">
107-
<WizardNav aria-label={navAriaLabel}>
109+
<WizardNav aria-label={navAriaLabel} isOpen={state.openNav}>
108110
<FormSpy subscription={{ values: true, valid: true, validating: true }}>
109111
{({ values, valid, validating }) => (
110112
<WizardNavigation
111113
navSchema={navSchema}
112114
activeStepIndex={activeStepIndex}
113115
valid={valid}
114116
maxStepIndex={maxStepIndex}
115-
jumpToStep={jumpToStep}
117+
jumpToStep={(...args) => {
118+
state.openNav && dispatch({ type: 'closeNav' });
119+
return jumpToStep(...args);
120+
}}
116121
crossroads={crossroads}
117122
isDynamic={isDynamic}
118123
values={values}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
const reducer = (state, { type }) => {
22
switch (type) {
3+
case 'openNav':
4+
return {
5+
...state,
6+
openNav: true
7+
};
8+
case 'closeNav':
9+
return {
10+
...state,
11+
openNav: false
12+
};
313
case 'finishLoading':
414
return {
515
...state,

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { AngleRightIcon, CaretDownIcon } from '@patternfly/react-icons';
4+
5+
const WizardToggle = ({ activeStepIndex, currentStep, navSchema, isOpen, dispatch }) => {
6+
const substepTitle = navSchema.find((step) => step.name === currentStep.name)?.substepOfTitle;
7+
const substepName = navSchema.find((step) => step.name === currentStep.name)?.substepOf;
8+
9+
const index = substepName ? navSchema.find((step) => step.substepOf === substepName)?.index : activeStepIndex;
10+
11+
const activeStepName = substepTitle || currentStep.title;
12+
const activeStepSubName = substepTitle ? currentStep.title : undefined;
13+
14+
return (
15+
<button
16+
onClick={() => dispatch({ type: isOpen ? 'closeNav' : 'openNav' })}
17+
className={`pf-c-wizard__toggle ${isOpen ? 'pf-m-expanded' : ''}`}
18+
aria-label="Wizard Toggle"
19+
aria-expanded={isOpen}
20+
type="button"
21+
>
22+
<ol className="pf-c-wizard__toggle-list">
23+
<li className="pf-c-wizard__toggle-list-item">
24+
<span className="pf-c-wizard__toggle-num">{index + 1}</span> {activeStepName}
25+
{activeStepSubName && <AngleRightIcon className="pf-c-wizard__toggle-separator" aria-hidden="true" />}
26+
</li>
27+
{activeStepSubName && <li className="pf-c-wizard__toggle-list-item">{activeStepSubName}</li>}
28+
</ol>
29+
<span className="pf-c-wizard__toggle-icon">
30+
<CaretDownIcon aria-hidden="true" />
31+
</span>
32+
</button>
33+
);
34+
};
35+
36+
WizardToggle.propTypes = {
37+
activeStepIndex: PropTypes.number,
38+
currentStep: PropTypes.object,
39+
navSchema: PropTypes.array,
40+
isOpen: PropTypes.bool,
41+
dispatch: PropTypes.func
42+
};
43+
44+
export default WizardToggle;

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

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -761,7 +761,7 @@ exports[`FormFields should render DatePicker correctly 1`] = `
761761
<div
762762
className="pf-c-form__group-control"
763763
>
764-
<ForwardRef
764+
<TextInput
765765
id="someIdKey"
766766
name="Name of the field"
767767
onBlur={[Function]}
@@ -804,7 +804,7 @@ exports[`FormFields should render DatePicker correctly 1`] = `
804804
value=""
805805
/>
806806
</TextInputBase>
807-
</ForwardRef>
807+
</TextInput>
808808
</div>
809809
</div>
810810
</FormGroup>
@@ -1265,7 +1265,7 @@ exports[`FormFields should render TextField correctly 1`] = `
12651265
<div
12661266
className="pf-c-form__group-control"
12671267
>
1268-
<ForwardRef
1268+
<TextInput
12691269
id="someIdKey"
12701270
name="Name of the field"
12711271
onBlur={[Function]}
@@ -1307,7 +1307,7 @@ exports[`FormFields should render TextField correctly 1`] = `
13071307
value=""
13081308
/>
13091309
</TextInputBase>
1310-
</ForwardRef>
1310+
</TextInput>
13111311
</div>
13121312
</div>
13131313
</FormGroup>
@@ -1380,7 +1380,7 @@ exports[`FormFields should render TextField with description correctly 1`] = `
13801380
</Text>
13811381
</div>
13821382
</TextContent>
1383-
<ForwardRef
1383+
<TextInput
13841384
id="someIdKey"
13851385
name="Name of the field"
13861386
onBlur={[Function]}
@@ -1422,7 +1422,7 @@ exports[`FormFields should render TextField with description correctly 1`] = `
14221422
value=""
14231423
/>
14241424
</TextInputBase>
1425-
</ForwardRef>
1425+
</TextInput>
14261426
</div>
14271427
</div>
14281428
</FormGroup>
@@ -1476,7 +1476,7 @@ exports[`FormFields should render TextField without id correctly 1`] = `
14761476
<div
14771477
className="pf-c-form__group-control"
14781478
>
1479-
<ForwardRef
1479+
<TextInput
14801480
id="Name of the field"
14811481
name="Name of the field"
14821482
onBlur={[Function]}
@@ -1518,7 +1518,7 @@ exports[`FormFields should render TextField without id correctly 1`] = `
15181518
value=""
15191519
/>
15201520
</TextInputBase>
1521-
</ForwardRef>
1521+
</TextInput>
15221522
</div>
15231523
</div>
15241524
</FormGroup>
@@ -1574,30 +1574,41 @@ exports[`FormFields should render Textarea correctly 1`] = `
15741574
className="pf-c-form__group-control"
15751575
>
15761576
<TextArea
1577-
aria-label={null}
1578-
className=""
15791577
id="someIdKey"
1580-
isRequired={false}
15811578
name="Name of the field"
15821579
onBlur={[Function]}
15831580
onChange={[Function]}
15841581
onFocus={[Function]}
1585-
resizeOrientation="both"
15861582
validated="default"
15871583
value=""
15881584
>
1589-
<textarea
1590-
aria-invalid={false}
1585+
<TextArea
15911586
aria-label={null}
1592-
className="pf-c-form-control"
1587+
className=""
15931588
id="someIdKey"
1589+
innerRef={null}
1590+
isRequired={false}
15941591
name="Name of the field"
15951592
onBlur={[Function]}
15961593
onChange={[Function]}
15971594
onFocus={[Function]}
1598-
required={false}
1595+
resizeOrientation="both"
1596+
validated="default"
15991597
value=""
1600-
/>
1598+
>
1599+
<textarea
1600+
aria-invalid={false}
1601+
aria-label={null}
1602+
className="pf-c-form-control"
1603+
id="someIdKey"
1604+
name="Name of the field"
1605+
onBlur={[Function]}
1606+
onChange={[Function]}
1607+
onFocus={[Function]}
1608+
required={false}
1609+
value=""
1610+
/>
1611+
</TextArea>
16011612
</TextArea>
16021613
</div>
16031614
</div>
@@ -1653,7 +1664,7 @@ exports[`FormFields should render TimePicker correctly 1`] = `
16531664
<div
16541665
className="pf-c-form__group-control"
16551666
>
1656-
<ForwardRef
1667+
<TextInput
16571668
id="someIdKey"
16581669
name="Name of the field"
16591670
onBlur={[Function]}
@@ -1696,7 +1707,7 @@ exports[`FormFields should render TimePicker correctly 1`] = `
16961707
value=""
16971708
/>
16981709
</TextInputBase>
1699-
</ForwardRef>
1710+
</TextInput>
17001711
</div>
17011712
</div>
17021713
</FormGroup>
@@ -2921,32 +2932,44 @@ exports[`FormFields should render disabled Textarea correctly 1`] = `
29212932
className="pf-c-form__group-control"
29222933
>
29232934
<TextArea
2924-
aria-label={null}
2925-
className=""
29262935
disabled={true}
29272936
id="someIdKey"
2928-
isRequired={false}
29292937
name="Name of the field"
29302938
onBlur={[Function]}
29312939
onChange={[Function]}
29322940
onFocus={[Function]}
2933-
resizeOrientation="both"
29342941
validated="default"
29352942
value=""
29362943
>
2937-
<textarea
2938-
aria-invalid={false}
2944+
<TextArea
29392945
aria-label={null}
2940-
className="pf-c-form-control"
2946+
className=""
29412947
disabled={true}
29422948
id="someIdKey"
2949+
innerRef={null}
2950+
isRequired={false}
29432951
name="Name of the field"
29442952
onBlur={[Function]}
29452953
onChange={[Function]}
29462954
onFocus={[Function]}
2947-
required={false}
2955+
resizeOrientation="both"
2956+
validated="default"
29482957
value=""
2949-
/>
2958+
>
2959+
<textarea
2960+
aria-invalid={false}
2961+
aria-label={null}
2962+
className="pf-c-form-control"
2963+
disabled={true}
2964+
id="someIdKey"
2965+
name="Name of the field"
2966+
onBlur={[Function]}
2967+
onChange={[Function]}
2968+
onFocus={[Function]}
2969+
required={false}
2970+
value=""
2971+
/>
2972+
</TextArea>
29502973
</TextArea>
29512974
</div>
29522975
</div>
@@ -3008,7 +3031,7 @@ exports[`FormFields should render touched TextField id correctly 1`] = `
30083031
<div
30093032
className="pf-c-form__group-control"
30103033
>
3011-
<ForwardRef
3034+
<TextInput
30123035
id="someIdKey"
30133036
name="Name of the field"
30143037
onBlur={[Function]}
@@ -3050,7 +3073,7 @@ exports[`FormFields should render touched TextField id correctly 1`] = `
30503073
value=""
30513074
/>
30523075
</TextInputBase>
3053-
</ForwardRef>
3076+
</TextInput>
30543077
</div>
30553078
</div>
30563079
</FormGroup>

0 commit comments

Comments
 (0)