Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite192e43

Browse files
committed
progress indicator continue
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent60c171d commite192e43

File tree

5 files changed

+72
-28
lines changed

5 files changed

+72
-28
lines changed

‎web-app/src/containers/Tutorial/components/Continue.tsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,65 @@
11
import*asReactfrom'react'
22
import{Dialog}from'@alifd/next'
3+
import{css,jsx}from'@emotion/core'
34
importButtonfrom'../../../components/Button'
45
importProgressPiefrom'./ProgressPie'
56

7+
conststyles={
8+
content:{
9+
display:'flex'as'flex',
10+
flexDirection:'column',
11+
justifyContent:'center',
12+
},
13+
message:{
14+
textAlign:'center'as'center',
15+
},
16+
}
17+
618
interfaceProps{
19+
title:string
20+
current:number// level index
21+
max:number// level count
722
onContinue():void
823
}
924

1025
constContinue=(props:Props)=>{
11-
const[modalState,setModalState]=React.useState<'none'|'continue'>('none')
26+
const[modalState,setModalState]=React.useState<'closed'|'open'>('closed')
1227

1328
constonClose=()=>{
14-
setModalState('none')
29+
setModalState('closed')
30+
}
31+
32+
constonOpen=()=>{
33+
setModalState('open')
1534
}
1635

17-
constonOk=()=>{
18-
setModalState('continue')
36+
constonContinue=()=>{
1937
props.onContinue()
20-
returnsetTimeout(()=>{
21-
setModalState('none')
22-
},3000)
38+
onClose()
2339
}
2440

2541
return(
2642
<>
27-
<Buttontype="primary"size="medium"onClick={()=>setModalState('continue')}>
43+
<Buttontype="primary"size="medium"onClick={onOpen}>
2844
Continue
2945
</Button>
3046
<Dialog
31-
visible={modalState==='continue'}
32-
onOk={onOk}
33-
onCancel={onClose}
47+
title="Level Complete!"
48+
visible={modalState==='open'}
3449
onClose={onClose}
35-
footerActions={['ok']}
50+
footer={false}
51+
css={{padding:'1rem'}}
3652
>
37-
<ProgressPie/>
53+
<divcss={styles.content}>
54+
<ProgressPiecurrent={props.current}max={props.max}/>
55+
<divcss={styles.message}>
56+
<h3>{props.title}</h3>
57+
<br/>
58+
<Buttontype="primary"size="large"onClick={onContinue}>
59+
Continue
60+
</Button>
61+
</div>
62+
</div>
3863
</Dialog>
3964
</>
4065
)

‎web-app/src/containers/Tutorial/components/ProgressPie.tsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,35 @@
11
import*asReactfrom'react'
22
import{Progress,Icon}from'@alifd/next'
33

4-
constProgressPie=()=>{
4+
interfaceProps{
5+
current:number
6+
max:number
7+
}
8+
9+
constProgressPie=(props:Props)=>{
510
const[progress,setProgress]=React.useState(0)
611

712
React.useEffect(()=>{
8-
if(progress<100){
9-
constintervals=[10,20]
10-
constrandomInteval=intervals[Math.floor(Math.random()*intervals.length)]
11-
setTimeout(()=>{
12-
setProgress(progress+randomInteval)
13-
},200)
13+
lettimeout:any
14+
if(progress<props.current){
15+
timeout=setTimeout(()=>{
16+
setProgress(progress+1)
17+
},100)
18+
}
19+
return()=>{
20+
if(timeout){
21+
clearTimeout(timeout)
22+
}
1423
}
1524
},[progress])
1625

26+
constprogressPercent=Math.floor((progress/props.max)*100)
27+
1728
return(
1829
<Progress
19-
percent={progress}
30+
percent={progressPercent}
2031
shape="circle"
21-
textRender={()=>(progress===100 ?<Icontype="select"size="xl"/> :null)}
32+
textRender={()=>(progressPercent===100 ?<Icontype="select"size="xl"/> :`${progressPercent}%`)}
2233
/>
2334
)
2435
}

‎web-app/src/containers/Tutorial/formatLevels.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface Input {
1111
typeOutput={
1212
level:T.LevelUI
1313
levels:T.LevelUI[]
14+
levelIndex:number
1415
stepIndex:number
1516
}
1617

@@ -89,7 +90,7 @@ const formatLevels = ({ progress, position, levels, testStatus }: Input): Output
8990
if(stepIndex===-1){
9091
stepIndex=levels[levelIndex].steps.length
9192
}
92-
return{level:levelUI,levels:levelsUI, stepIndex}
93+
return{level:levelUI,levels:levelsUI,levelIndex,stepIndex}
9394
}
9495

9596
exportdefaultformatLevels

‎web-app/src/containers/Tutorial/index.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
1313
importformatLevelsfrom'./formatLevels'
1414
// import SettingsPage from './containers/Settings'
1515
importResetfrom'./components/Reset'
16+
importContinuefrom'./components/Continue'
1617

1718
conststyles={
1819
header:{
@@ -103,7 +104,7 @@ const TutorialPage = (props: PageProps) => {
103104
const[page,setPage]=React.useState<'level'|'settings'|'review'>('level')
104105

105106
// format level code with status for easy rendering
106-
const{ level, levels, stepIndex}=formatLevels({
107+
const{ level, levels,levelIndex,stepIndex}=formatLevels({
107108
progress,
108109
position,
109110
levels:tutorial.levels,
@@ -154,9 +155,12 @@ const TutorialPage = (props: PageProps) => {
154155
{/* Right */}
155156
<divcss={{flex:1,display:'flex',justifyContent:'flex-end'}}>
156157
{level.status==='COMPLETE'||!level.steps.length ?(
157-
<Buttonstyle={{marginRight:'1rem'}}type="primary"onClick={onContinue}>
158-
Continue
159-
</Button>
158+
<Continue
159+
onContinue={onContinue}
160+
current={levelIndex+1}
161+
max={level.steps.length}
162+
title={tutorial.summary.title}
163+
/>
160164
) :(
161165
<StepProgresscurrent={stepIndex}max={level.steps.length}/>
162166
)}

‎web-app/stories/Modals.stories.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,7 @@ storiesOf('Modals', module)
1010
.addDecorator(SideBarDecorator)
1111
.addDecorator(withKnobs)
1212
.add('Reset',()=><ResetonReset={action('onReset')}/>)
13-
.add('Continue',()=><ContinueonContinue={action('onContinue')}/>)
13+
.add('Continue',()=><Continuetitle="Tutorial Title"current={9}max={11}onContinue={action('onContinue')}/>)
14+
.add('Continue Complete',()=>(
15+
<Continuetitle="Tutorial Title"current={11}max={11}onContinue={action('onContinue')}/>
16+
))

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp