11import { Button , Step } from '@alifd/next'
22import * as React from 'react'
3- import CR from 'typings'
3+ import * as T from 'typings/graphql '
44
55import Markdown from '../Markdown'
66import StepDescription from './StepDescription'
@@ -23,36 +23,39 @@ const styles = {
2323}
2424
2525interface Props {
26- stage :CR . TutorialStage
27- steps :{
28- [ stepId :string ] :any // CC.Step
29- }
26+ stage :T . Stage
3027complete :boolean
3128onContinue ( ) :void
3229}
3330
34- const Stage = ( { stage, steps, onContinue, complete} :Props ) => {
35- const { stepList, content} = stage
36- const { title, text} = content
31+ const Stage = ( { stage, onContinue, complete} :Props ) => {
32+ if ( ! stage . steps ) {
33+ throw new Error ( 'No Stage steps found' )
34+ }
35+
3736// grab the active step
38- const activeIndex = stepList . findIndex ( ( stepId : string ) => {
39- return steps [ stepId ] . status . active
37+ const activeIndex : number = stage . steps . findIndex ( ( step : T . Step | null ) => {
38+ return step && step . status === 'ACTIVE'
4039} )
40+
4141return (
4242< div style = { styles . card } >
4343< div style = { styles . content } >
44- < h2 style = { styles . title } > { title } </ h2 >
45- < Markdown > { text } </ Markdown >
44+ < h2 style = { styles . title } > { stage . title } </ h2 >
45+ < Markdown > { stage . text || '' } </ Markdown >
4646</ div >
4747< div style = { styles . steps } >
4848< Step current = { activeIndex } direction = "ver" shape = "dot" animation readOnly >
49- { stepList . map ( ( stepId :string , index :number ) => {
50- const step = steps [ stepId ]
49+ { stage . steps . map ( ( step :T . Step | null , index :number ) => {
50+ if ( ! step ) {
51+ return null
52+ }
53+ const hide = status === 'INCOMPLETE'
5154return (
5255< Step . Item
53- key = { stepId }
54- title = { step . content . title || `Step${ index + 1 } }
55- content = { < StepDescription content = { step . content } status = { step . status } /> }
56+ key = { step . id }
57+ title = { step . title || `Step${ index + 1 } }
58+ content = { < StepDescription text = { step . text } hide = { hide } /> }
5659/>
5760)
5861} ) }