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

Commit0e806fb

Browse files
authored
Merge pull request#390 from coderoad/feature/progress
Feature/progress
2 parentse85ca35 +bd28a70 commit0e806fb

File tree

7 files changed

+147
-37
lines changed

7 files changed

+147
-37
lines changed
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import*asReactfrom'react'
2+
import{Dialog}from'@alifd/next'
3+
import{css,jsx}from'@emotion/core'
4+
importButtonfrom'../../../components/Button'
5+
importProgressPiefrom'./ProgressPie'
6+
7+
conststyles={
8+
content:{
9+
display:'flex'as'flex',
10+
flexDirection:'column'as'column',
11+
justifyContent:'center'as'center',
12+
alignItems:'center'as'center',
13+
},
14+
message:{
15+
textAlign:'center'as'center',
16+
},
17+
}
18+
19+
interfaceProps{
20+
title:string
21+
current:number// level index
22+
max:number// level count
23+
onContinue():void
24+
}
25+
26+
constContinue=(props:Props)=>{
27+
const[modalState,setModalState]=React.useState<'closed'|'open'>('closed')
28+
29+
constonClose=()=>{
30+
setModalState('closed')
31+
}
32+
33+
constonOpen=()=>{
34+
setModalState('open')
35+
}
36+
37+
constonContinue=()=>{
38+
props.onContinue()
39+
onClose()
40+
}
41+
42+
return(
43+
<>
44+
<Buttontype="primary"size="medium"onClick={onOpen}>
45+
Continue
46+
</Button>
47+
<Dialog
48+
title="Level Complete!"
49+
visible={modalState==='open'}
50+
onClose={onClose}
51+
footer={false}
52+
css={{padding:'1rem'}}
53+
>
54+
<divcss={styles.content}>
55+
<ProgressPiecurrent={props.current}max={props.max}/>
56+
<divcss={styles.message}>
57+
<h3>{props.title}</h3>
58+
<br/>
59+
<Buttontype="primary"size="large"onClick={onContinue}>
60+
Continue
61+
</Button>
62+
</div>
63+
</div>
64+
</Dialog>
65+
</>
66+
)
67+
}
68+
69+
exportdefaultContinue
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import*asReactfrom'react'
2+
import{Progress,Icon}from'@alifd/next'
3+
4+
interfaceProps{
5+
current:number
6+
max:number
7+
}
8+
9+
constProgressPie=(props:Props)=>{
10+
const[progress,setProgress]=React.useState(0)
11+
12+
React.useEffect(()=>{
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+
}
23+
}
24+
},[progress])
25+
26+
constprogressPercent=Math.floor((progress/props.max)*100)
27+
28+
return(
29+
<Progress
30+
percent={progressPercent}
31+
shape="circle"
32+
textRender={()=>(progressPercent===100 ?<Icontype="select"size="xl"/> :`${progressPercent}%`)}
33+
/>
34+
)
35+
}
36+
37+
exportdefaultProgressPie

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Dialog, Message } from '@alifd/next'
33
importButtonfrom'../../../components/Button'
44

55
interfaceProps{
6-
disabled:boolean
6+
disabled?:boolean
77
onReset():void
88
}
99

‎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: 13 additions & 7 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,12 +155,17 @@ 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>
160-
) :(
161-
<StepProgresscurrent={stepIndex}max={level.steps.length}/>
162-
)}
158+
<divcss={{marginRight:'0.5rem'}}>
159+
<Continue
160+
onContinue={onContinue}
161+
current={levelIndex+1}
162+
max={levels.length}
163+
title={tutorial.summary.title}
164+
/>
165+
</div>
166+
) :level.steps.length>1 ?(
167+
<StepProgresscurrent={stepIndex+1}max={level.steps.length}/>
168+
) :null}
163169
</div>
164170
</div>
165171
<SideMenuvisible={menuVisible}toggleVisible={setMenuVisible}page={page}setPage={setPage}/>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import{action}from'@storybook/addon-actions'
2+
import{withKnobs}from'@storybook/addon-knobs'
3+
import{storiesOf}from'@storybook/react'
4+
importReactfrom'react'
5+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
6+
importResetfrom'../src/containers/Tutorial/components/Reset'
7+
importContinuefrom'../src/containers/Tutorial/components/Continue'
8+
9+
storiesOf('Modals',module)
10+
.addDecorator(SideBarDecorator)
11+
.addDecorator(withKnobs)
12+
.add('Reset',()=><ResetonReset={action('onReset')}/>)
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+
))

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

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,9 @@ import { withKnobs } from '@storybook/addon-knobs'
33
import{storiesOf}from'@storybook/react'
44
importReactfrom'react'
55
import*asTfrom'../../typings'
6-
import*asTTfrom'../../typings/tutorial'
76
importTutorialfrom'../src/containers/Tutorial'
87
importSideBarDecoratorfrom'./utils/SideBarDecorator'
98

10-
typeModifiedLevel=TT.Level&{
11-
status:T.ProgressStatus
12-
index:number
13-
steps:Array<TT.Step&{status:T.ProgressStatus}>
14-
}
15-
169
constcontext:Partial<T.MachineContext>={
1710
env:{machineId:'',sessionId:'',token:''},
1811
error:null,
@@ -58,26 +51,6 @@ const context: Partial<T.MachineContext> = {
5851
},
5952
hints:['First Hint','Second Hint'],
6053
},
61-
{
62-
id:'1.2',
63-
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
64-
setup:{
65-
commits:['abcdefg'],
66-
},
67-
solution:{
68-
commits:['hijklmn'],
69-
},
70-
},
71-
{
72-
id:'1.3',
73-
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
74-
setup:{
75-
commits:['abcdefg'],
76-
},
77-
solution:{
78-
commits:['hijklmn'],
79-
},
80-
},
8154
],
8255
},
8356
{
@@ -168,4 +141,12 @@ const context: Partial<T.MachineContext> = {
168141
storiesOf('Tutorial',module)
169142
.addDecorator(SideBarDecorator)
170143
.addDecorator(withKnobs)
171-
.add('Example',()=><Tutorialcontext={context}send={action('send')}/>)
144+
.add('1 step',()=>{
145+
constfirstLevel={
146+
...context,
147+
position:{levelId:'1',stepId:'1.2'},
148+
progress:{levels:{},steps:{},complete:false},
149+
}
150+
return<Tutorialcontext={firstLevel}send={action('send')}/>
151+
})
152+
.add('3 step',()=><Tutorialcontext={context}send={action('send')}/>)

0 commit comments

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