-
Notifications
You must be signed in to change notification settings - Fork 4
/
example.tsx
70 lines (63 loc) · 1.95 KB
/
example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import * as React from "react";
import Stepper, { Step, StepperContext, StepperController } from "react-material-stepper";
import LoadingProvider, { LoadingContext } from "../loadingContext";
import { Step1, STEP1, Step2, STEP2, Step3, STEP3 } from "./steps";
import './style.scss';
const StepperExample: React.FunctionComponent = () => {
const { isLoading, setLoading } = React.useContext(LoadingContext);
const stepperControllerRef = React.useRef<StepperController>();
const onComplete = (stepId: string) => {
setLoading(STEP3, true);
setTimeout(() => {
setLoading(STEP3, false);
alert(`completed ${stepId}`);
}, 1000);
};
const onResolve = (stepId: any) => {
const controller = stepperControllerRef.current;
const steps = controller.getSteps();
if (steps.length && steps.every(step => step.completed)) {
onComplete(stepId);
}
};
const initial = {
step2: true,
step3: true
};
return (
<Stepper contextRef={stepperControllerRef} initialStep={STEP2} onResolve={onResolve}>
<Step
stepId={STEP1}
data={initial}
title="Step One"
description="This step is optional"
loading={isLoading(STEP1)}
>
<Step1 />
</Step>
<StepperContext.Consumer>
{stepperContext =>
stepperContext.getData(STEP1, initial).step2 && (
<Step stepId={STEP2} title="Step Two" loading={isLoading(STEP2)} description="Login is required">
<Step2 />
</Step>
)
}
</StepperContext.Consumer>
<StepperContext.Consumer>
{stepperContext =>
stepperContext.getData(STEP1, initial).step3 && (
<Step stepId={STEP3} title="Step Three" loading={isLoading(STEP3)}>
<Step3 />
</Step>
)
}
</StepperContext.Consumer>
</Stepper>
);
};
export default () => (
<LoadingProvider>
<StepperExample />
</LoadingProvider>
);