11import * as React from 'react'
22import * as CR from 'typings'
33import * as TT from 'typings/tutorial'
4+ import { Progress } from '@alifd/next'
45import BetaBadge from '../../components/BetaBadge'
56import { css , jsx } from '@emotion/core'
67import Button from '../../components/Button'
@@ -55,7 +56,7 @@ const styles = {
5556borderColor :theme [ '$color-line1-4' ] ,
5657} ) ,
5758} ) ,
58- tutorialTitle :( theme :Theme ) => ( {
59+ continueTitle :( theme :Theme ) => ( {
5960color :theme [ '$color-text1-3' ] ,
6061fontSize :'12px' ,
6162} ) ,
@@ -72,6 +73,7 @@ interface Props {
7273onContinue ( ) :void
7374onNew ( ) :void
7475tutorial ?:TT . Tutorial
76+ progress ?:number
7577}
7678
7779export const StartPage = ( props :Props ) => (
@@ -96,7 +98,8 @@ export const StartPage = (props: Props) => (
9698< div css = { styles . buttonContainer } >
9799< button onClick = { props . onContinue } css = { styles . buttonLarge } >
98100 Continue Tutorial
99- < div css = { styles . tutorialTitle } > "{ props . tutorial . summary . title } "</ div >
101+ < div css = { styles . continueTitle } > "{ props . tutorial . summary . title } "</ div >
102+ < Progress style = { { marginLeft :'1rem' } } percent = { props . progress || 0 } hasBorder size = "large" />
100103</ button >
101104</ div >
102105) }
@@ -111,11 +114,18 @@ interface ContainerProps {
111114
112115const StartPageContainer = ( { context, send} :ContainerProps ) => {
113116const tutorial = context . tutorial || undefined
117+ let progress
118+ if ( tutorial ) {
119+ const totalLevels = tutorial . levels . length
120+ const firstIncompleteLevelIndex = tutorial . levels . findIndex ( ( level ) => ! context . progress . levels [ level . id ] )
121+ progress = Math . round ( ( firstIncompleteLevelIndex / totalLevels ) * 100 )
122+ }
114123return (
115124< StartPage
116125onContinue = { ( ) => send ( { type :'CONTINUE_TUTORIAL' } ) }
117126onNew = { ( ) => send ( { type :'NEW_TUTORIAL' } ) }
118127tutorial = { tutorial }
128+ progress = { progress }
119129/>
120130)
121131}