1
1
import * as React from 'react' ;
2
2
import QuickStartContent from './controller/QuickStartContent' ;
3
3
import QuickStartFooter from './controller/QuickStartFooter' ;
4
- import { QuickStartContext , QuickStartContextValues } from './utils/quick-start-context' ;
4
+ import {
5
+ getDefaultQuickStartState ,
6
+ QuickStartContext ,
7
+ QuickStartContextValues ,
8
+ } from './utils/quick-start-context' ;
5
9
import { QuickStart , QuickStartStatus , QuickStartTaskStatus } from './utils/quick-start-types' ;
6
10
7
11
interface QuickStartControllerProps {
12
+ /** The current active quickstart */
8
13
quickStart : QuickStart ;
14
+ /** The next quickstart */
9
15
nextQuickStarts ?: QuickStart [ ] ;
10
- footerClass : string ;
11
- contentRef : React . Ref < HTMLDivElement > ;
16
+ /** Additional footer classes */
17
+ footerClass ?: string ;
18
+ /** Ref for the quickstart content */
19
+ contentRef ?: React . Ref < HTMLDivElement > ;
12
20
}
13
21
14
- const QuickStartController : React . FC < QuickStartControllerProps > = ( {
22
+ export const QuickStartController : React . FC < QuickStartControllerProps > = ( {
15
23
quickStart,
16
24
nextQuickStarts,
17
25
contentRef,
@@ -23,13 +31,26 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
23
31
} = quickStart ;
24
32
const totalTasks = tasks ?. length ;
25
33
const {
34
+ activeQuickStartID,
35
+ allQuickStartStates,
36
+ setAllQuickStartStates,
26
37
activeQuickStartState,
27
38
setActiveQuickStart,
28
39
setQuickStartTaskNumber,
29
40
setQuickStartTaskStatus,
30
41
nextStep,
31
42
previousStep,
32
43
} = React . useContext < QuickStartContextValues > ( QuickStartContext ) ;
44
+ React . useEffect ( ( ) => {
45
+ // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
46
+ if ( activeQuickStartID && ! allQuickStartStates [ activeQuickStartID ] ) {
47
+ setAllQuickStartStates ( {
48
+ ...allQuickStartStates ,
49
+ [ activeQuickStartID ] : getDefaultQuickStartState ( ) ,
50
+ } ) ;
51
+ }
52
+ } , [ activeQuickStartID , allQuickStartStates , setAllQuickStartStates ] ) ;
53
+
33
54
const status = activeQuickStartState ?. status as QuickStartStatus ;
34
55
const taskNumber = activeQuickStartState ?. taskNumber as number ;
35
56
const allTaskStatuses = tasks . map (
0 commit comments