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

Commit3599137

Browse files
committed
setup tutorial level process events viewer
1 parent5133dad commit3599137

File tree

5 files changed

+76
-43
lines changed

5 files changed

+76
-43
lines changed

‎typings/index.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,8 @@ interface MessageState {
103103

104104
// todo: type each string param and payload
105105
exporttypeEditorDispatch=(type:string,payload?:MessageData|MessageState|any)=>void
106+
107+
exportinterfaceProcessEvent{
108+
title:string
109+
description:string
110+
}
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import*asReactfrom'react'
2+
import{MessageasAlifdMessage}from'@alifd/next'
3+
import*asTfrom'typings'
4+
5+
interfaceProcess{
6+
title:string
7+
description:string
8+
}
9+
10+
interfaceProps{
11+
processes:T.ProcessEvent[]
12+
}
13+
14+
conststyles={
15+
container:{
16+
display:'flex',
17+
flexDirection:'column'as'column',
18+
},
19+
}
20+
21+
// display a list of active processes
22+
constProcessEvents=(props:Props)=>{
23+
if(!props.processes.length){
24+
returnnull
25+
}
26+
return(
27+
<divstyle={styles.container}>
28+
{props.processes.map(process=>(
29+
<AlifdMessagekey={process.title}type="loading"size="medium"title={process.title}>
30+
{process.description}...
31+
</AlifdMessage>
32+
))}
33+
</div>
34+
)
35+
}
36+
37+
exportdefaultProcessEvents

‎web-app/src/components/Processes/index.tsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎web-app/src/containers/Tutorial/LevelPage/Level.tsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as T from 'typings'
55
importStepfrom'./Step'
66
importButtonfrom'../../../components/Button'
77
importMarkdownfrom'../../../components/Markdown'
8+
importProcessEventsfrom'../../../components/ProcessEvents'
89

910
conststyles={
1011
page:{
@@ -51,11 +52,12 @@ const styles = {
5152

5253
interfaceProps{
5354
level:G.Level&{status:T.ProgressStatus;index:number;steps:Array<G.Step&{status:T.ProgressStatus}>}
55+
processes:T.ProcessEvent[]
5456
onContinue():void
5557
onLoadSolution():void
5658
}
5759

58-
constLevel=({ level, onContinue, onLoadSolution}:Props)=>{
60+
constLevel=({ level, onContinue, onLoadSolution, processes}:Props)=>{
5961
if(!level.steps){
6062
thrownewError('No Stage steps found')
6163
}
@@ -92,17 +94,22 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
9294
</div>
9395
</div>
9496

95-
{level.status==='COMPLETE'&&(
96-
<divstyle={styles.options}>
97-
<ButtononClick={onContinue}>Continue</Button>
98-
</div>
99-
)}
10097
<div>
101-
<divstyle={styles.footer}>
102-
<span>
103-
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
104-
{level.title}
105-
</span>
98+
{level.status==='COMPLETE'&&(
99+
<divstyle={styles.options}>
100+
<ButtononClick={onContinue}>Continue</Button>
101+
</div>
102+
)}
103+
104+
<ProcessEventsprocesses={processes}/>
105+
106+
<div>
107+
<divstyle={styles.footer}>
108+
<span>
109+
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
110+
{level.title}
111+
</span>
112+
</div>
106113
</div>
107114
</div>
108115
</div>

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,9 @@ storiesOf('Level', module)
7272
},
7373
],
7474
}
75-
return<Levellevel={level}onContinue={action('onContinue')}onLoadSolution={action('onLoadSolution')}/>
75+
return(
76+
<Levellevel={level}onContinue={action('onContinue')}onLoadSolution={action('onLoadSolution')}processes={[]}/>
77+
)
7678
})
7779
.add('Level 2',()=>{
7880
constlevel={
@@ -118,5 +120,17 @@ storiesOf('Level', module)
118120
],
119121
status:'ACTIVE',
120122
}
121-
return<Levellevel={level}onContinue={action('onContinue')}onLoadSolution={action('onLoadSolution')}/>
123+
return(
124+
<Level
125+
level={level}
126+
onContinue={action('onContinue')}
127+
onLoadSolution={action('onLoadSolution')}
128+
processes={[
129+
{
130+
title:'npm install',
131+
description:'Installing dependencies',
132+
},
133+
]}
134+
/>
135+
)
122136
})

0 commit comments

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