Skip to content

Commit 167d687

Browse files
devrntdevrnt
authored
Merge pull request #77 from devrnt/feat/76-go-to-step
Feat/76 go to step
2 parents 90ebab1 + 3476901 commit 167d687

File tree

10 files changed

+1532
-1613
lines changed

10 files changed

+1532
-1613
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,9 @@ Provide an optional `stepIndex` to either `nextStep` or `previousStep` to overwr
120120

121121
| name | type | description |
122122
| ------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
123-
| nextStep | (stepIndex?: number) => Promise<void> | Go to the next step. Overwrite the default behaviour by providing a step index |
124-
| previousStep | (stepIndex?: number) => void | Go to the previous step. Overwrite the default behaviour by providing a step index |
123+
| nextStep | () => Promise<void> | Go to the next step |
124+
| previousStep | () => void | Go to the previous step index |
125+
| goToStep | (stepIndex: number) => void | Go to the given step index |
125126
| handleStep | (handler: Handler) => void | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async |
126127
| isLoading | boolean | \* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |
127128
| activeStep | number | The current active step of the wizard |
@@ -152,6 +153,7 @@ const Step1 = () => {
152153
activeStep,
153154
previousStep,
154155
nextStep,
156+
goToStep,
155157
handleStep,
156158
} = useWizard();
157159

@@ -166,13 +168,13 @@ const Step1 = () => {
166168
{isLoading && <p>loading...</p>}
167169
<button onClick={() => previousStep()}>Previous</button>
168170
<button onClick={() => nextStep()}>Next</button>
171+
<button onClick={() => goToStep(2)}>Go to the last step</button>
169172
<div>
170173
Has next step: {!isLastStep ? '✅' : '⛔'}
171174
<br />
172175
Has previous step : {!isFirstStep ? '✅' : '⛔'}
173176
</div>
174177
Active step: {activeStep + 1} <br />
175-
</>
176178
);
177179
};
178180
```

‎package.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,26 +82,27 @@
8282
"registry": "https://registry.npmjs.org"
8383
},
8484
"devDependencies": {
85-
"@babel/core": "^7.13.16",
86-
"@babel/preset-env": "^7.13.15",
85+
"@babel/core": "^7.15.8",
86+
"@babel/preset-env": "^7.15.8",
8787
"@size-limit/preset-small-lib": "^4.10.2",
88-
"@testing-library/jest-dom": "^5.12.0",
89-
"@testing-library/react": "^11.2.6",
90-
"@testing-library/react-hooks": "^5.1.2",
91-
"@types/react": "^17.0.3",
92-
"@types/react-dom": "^17.0.3",
93-
"babel-jest": "^26.6.3",
94-
"eslint-plugin-jsdoc": "^32.3.1",
88+
"@testing-library/jest-dom": "^5.14.1",
89+
"@testing-library/react": "^12.1.2",
90+
"@testing-library/react-hooks": "^7.0.2",
91+
"@types/react": "^17.0.29",
92+
"@types/react-dom": "^17.0.9",
93+
"babel-jest": "^27.2.5",
94+
"eslint-plugin-jsdoc": "^36.1.1",
9595
"eslint-plugin-promise": "^5.1.0",
9696
"eslint-plugin-simple-import-sort": "^7.0.0",
97-
"husky": "^6.0.0",
98-
"np": "^7.4.0",
97+
"husky": "^7.0.2",
98+
"np": "^7.5.0",
9999
"react": "^17.0.2",
100100
"react-dom": "^17.0.2",
101101
"react-test-renderer": "^17.0.2",
102102
"size-limit": "^4.10.2",
103103
"tsdx": "^0.14.1",
104-
"tslib": "^2.2.0",
105-
"typescript": "^4.2.4"
106-
}
104+
"tslib": "^2.3.1",
105+
"typescript": "^4.4.3"
106+
},
107+
"dependencies": {}
107108
}

‎playground/components/footer/footerStepIndex.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { useWizard } from '../../../dist';
44
import { Button } from '../../modules/common';
55
import { Actions, Info } from './footer';
66

7-
const FooterCustomStepIndex: React.FC = () => {
7+
const FooterGoToStepIndex: React.FC = () => {
88
const {
9-
nextStep,
9+
goToStep,
1010
previousStep,
1111
isLoading,
1212
activeStep,
@@ -35,8 +35,8 @@ const FooterCustomStepIndex: React.FC = () => {
3535
Previous
3636
</Button>
3737
<Button
38-
label="Next"
39-
onClick={() => nextStep(2)}
38+
label="Go to step 3"
39+
onClick={() => goToStep(2)}
4040
disabled={isLoading || isLastStep}
4141
/>
4242
</Actions>
@@ -45,4 +45,4 @@ const FooterCustomStepIndex: React.FC = () => {
4545
);
4646
};
4747

48-
export default FooterCustomStepIndex;
48+
export default FooterGoToStepIndex;

playground/modules/wizard/customNextStepIndex/index.tsx renamed to playground/modules/wizard/goToStepIndex/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { Wizard } from '../../../../dist';
44
import { AsyncStep, FooterStepIndex, Step } from '../../../components';
55
import Section from '../../common/section';
66

7-
const CustomNextStepIndex: React.FC = () => {
7+
const GoToStepIndex: React.FC = () => {
88
return (
99
<Section
10-
title="Custom step index"
11-
description="With custom step index on next step"
10+
title="Go To Step"
11+
description="Jump to given certain step index"
1212
showDivider={false}
1313
>
1414
<Wizard footer={<FooterStepIndex />}>
@@ -21,4 +21,4 @@ const CustomNextStepIndex: React.FC = () => {
2121
);
2222
};
2323

24-
export default CustomNextStepIndex;
24+
export default GoToStepIndex;

‎playground/modules/wizard/wizard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { styled } from 'goober';
22
import * as React from 'react';
33

44
import AnimatedSection from './animated';
5-
import CustomNextStepIndex from './customNextStepIndex';
5+
import GoToStepIndex from './goToStepIndex';
66
import ReactQuerySection from './reactQuery';
77
import SimpleSection from './simple';
88

@@ -18,7 +18,7 @@ const WizardModule = () => {
1818
<SimpleSection />
1919
<AnimatedSection />
2020
<ReactQuerySection />
21-
<CustomNextStepIndex />
21+
<GoToStepIndex />
2222
</Container>
2323
);
2424
};

‎playground/yarn.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2287,9 +2287,9 @@ caniuse-api@^3.0.0:
22872287
lodash.uniq "^4.5.0"
22882288

22892289
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219:
2290-
version "1.0.30001230"
2291-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
2292-
integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
2290+
version "1.0.30001265"
2291+
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001265.tgz"
2292+
integrity sha512-YzBnspggWV5hep1m9Z6sZVLOt7vrju8xWooFAgN6BA5qvy98qPAPb7vNUzypFaoh2pb3vlfzbDO8tB57UPGbtw==
22932293

22942294
caseless@~0.12.0:
22952295
version "0.12.0"

‎src/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ export type WizardValues = {
2222
* @param stepIndex Overwrite the default behaviour by providing a step index
2323
* */
2424
previousStep: (stepIndex?: number) => void;
25+
/**
26+
* Go to the given step index
27+
*
28+
* @param stepIndex The step index, starts at 0
29+
*/
30+
goToStep: (stepIndex: number) => void;
2531
/**
2632
* Attach a callback that will be called when calling `nextStep()`
2733
*

‎src/wizard.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,34 @@ const Wizard: React.FC<WizardProps> = React.memo(
1616
activeStep < React.Children.toArray(children).length - 1;
1717
hasPreviousStep.current = activeStep > 0;
1818

19-
const goToNextStep = React.useRef((stepIndex?: number) => {
20-
if (hasNextStep.current || stepIndex) {
21-
setActiveStep((activeStep) => stepIndex ?? activeStep + 1);
19+
const goToNextStep = React.useRef(() => {
20+
if (hasNextStep.current) {
21+
setActiveStep((activeStep) => activeStep + 1);
2222
}
2323
});
2424

25-
const goToPreviousStep = React.useRef((step?: number) => {
25+
const goToPreviousStep = React.useRef(() => {
2626
if (hasPreviousStep.current) {
27-
setActiveStep((activeStep) => step ?? activeStep - 1);
27+
setActiveStep((activeStep) => activeStep - 1);
28+
}
29+
});
30+
31+
const goToStep = React.useRef((stepIndex: number) => {
32+
if (
33+
stepIndex > 0 &&
34+
stepIndex < React.Children.toArray(children).length
35+
) {
36+
setActiveStep(stepIndex);
37+
} else {
38+
if (__DEV__) {
39+
logger.log(
40+
'warn',
41+
[
42+
`Invalid step index [${stepIndex}] passed to 'goToStep'. `,
43+
`Ensure the given stepIndex is not out of boundaries.`,
44+
].join(''),
45+
);
46+
}
2847
}
2948
});
3049

@@ -33,20 +52,20 @@ const Wizard: React.FC<WizardProps> = React.memo(
3352
nextStepHandler.current = handler;
3453
});
3554

36-
const doNextStep = React.useRef(async (stepIndex?: number) => {
55+
const doNextStep = React.useRef(async () => {
3756
if (hasNextStep.current && nextStepHandler.current) {
3857
try {
3958
setIsLoading(true);
4059
await nextStepHandler.current();
4160
setIsLoading(false);
4261
nextStepHandler.current = null;
43-
goToNextStep.current(stepIndex);
62+
goToNextStep.current();
4463
} catch (error) {
4564
setIsLoading(false);
4665
throw error;
4766
}
4867
} else {
49-
goToNextStep.current(stepIndex);
68+
goToNextStep.current();
5069
}
5170
});
5271

@@ -59,6 +78,7 @@ const Wizard: React.FC<WizardProps> = React.memo(
5978
activeStep,
6079
isFirstStep: !hasPreviousStep.current,
6180
isLastStep: !hasNextStep.current,
81+
goToStep: goToStep.current,
6282
}),
6383
[activeStep, isLoading],
6484
);
@@ -93,11 +113,9 @@ const Wizard: React.FC<WizardProps> = React.memo(
93113

94114
return (
95115
<WizardContext.Provider value={wizardValue}>
96-
<>
97-
{header}
98-
{activeStepContent}
99-
{footer}
100-
</>
116+
{header}
117+
{activeStepContent}
118+
{footer}
101119
</WizardContext.Provider>
102120
);
103121
},

0 commit comments

Comments
 (0)