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

Commit11f7ec1

Browse files
committed
setup menu dropdown for level
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent1d9cf71 commit11f7ec1

File tree

3 files changed

+74
-40
lines changed

3 files changed

+74
-40
lines changed

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

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -87,18 +87,33 @@ const styles = {
8787

8888
interfaceProps{
8989
menu:any
90-
level:TT.Level&{status:T.ProgressStatus;index:number;steps:Array<TT.Step&{status:T.ProgressStatus}>}
90+
steps:Array<TT.Step&{status:T.ProgressStatus}>
91+
title:string
92+
index:number
93+
content:string
94+
status:'COMPLETE'|'ACTIVE'|'INCOMPLETE'
9195
processes:T.ProcessEvent[]
9296
testStatus:T.TestStatus|null
9397
onContinue():void
9498
onLoadSolution():void
9599
}
96100

97-
constLevel=({ menu, level, onContinue, onLoadSolution, processes, testStatus}:Props)=>{
101+
constLevel=({
102+
menu,
103+
steps,
104+
title,
105+
content,
106+
index,
107+
status,
108+
onContinue,
109+
onLoadSolution,
110+
processes,
111+
testStatus,
112+
}:Props)=>{
98113
//@ts-ignore
99-
letcurrentStep=level.steps.findIndex((s)=>s.status==='ACTIVE')
114+
letcurrentStep=steps.findIndex((s)=>s.status==='ACTIVE')
100115
if(currentStep===-1){
101-
currentStep=level.steps.length
116+
currentStep=steps.length
102117
}
103118

104119
constpageBottomRef=React.useRef(null)
@@ -116,7 +131,7 @@ const Level = ({ menu, level, onContinue, onLoadSolution, processes, testStatus
116131
<Dropdown
117132
trigger={
118133
<acss={styles.learn}>
119-
Learn<Icontype="arrow-down"size="xxs"/>{' '}
134+
Learn<Icontype="arrow-down"size="xxs"/>
120135
</a>
121136
}
122137
triggerType="click"
@@ -125,15 +140,15 @@ const Level = ({ menu, level, onContinue, onLoadSolution, processes, testStatus
125140
</Dropdown>
126141
</div>
127142
<divcss={styles.text}>
128-
<h2css={styles.title}>{level.title}</h2>
129-
<Markdown>{level.content||''}</Markdown>
143+
<h2css={styles.title}>{title}</h2>
144+
<Markdown>{content||''}</Markdown>
130145
</div>
131146

132-
{level.steps.length ?(
147+
{steps.length ?(
133148
<divcss={styles.tasks}>
134149
<divcss={styles.header}>Tasks</div>
135150
<divcss={styles.steps}>
136-
{level.steps.map((step:(TT.Step&{status:T.ProgressStatus})|null,index:number)=>{
151+
{steps.map((step:(TT.Step&{status:T.ProgressStatus})|null,index:number)=>{
137152
if(!step){
138153
returnnull
139154
}
@@ -165,17 +180,17 @@ const Level = ({ menu, level, onContinue, onLoadSolution, processes, testStatus
165180

166181
<divcss={styles.footer}>
167182
<span>
168-
{typeoflevel.index==='number' ?`${level.index+1}. ` :''}
169-
{level.title}
183+
{typeofindex==='number' ?`${index+1}. ` :''}
184+
{title}
170185
</span>
171186
<span>
172-
{level.status==='COMPLETE'||!level.steps.length ?(
187+
{status==='COMPLETE'||!steps.length ?(
173188
<Buttontype="primary"onClick={onContinue}>
174189
Continue
175190
</Button>
176191
) :(
177192
<spancss={styles.taskCount}>
178-
{currentStep} of{level.steps.length} tasks
193+
{currentStep} of{steps.length} tasks
179194
</span>
180195
)}
181196
</span>

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

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const TutorialPage = (props: PageProps) => {
1717

1818
consttutorial=selectors.currentTutorial(props.context)
1919
constlevelData:TT.Level=selectors.currentLevel(props.context)
20+
const[content,setContent]=React.useState<string>(levelData.content)
2021

2122
constonContinue=():void=>{
2223
props.send({
@@ -31,25 +32,16 @@ const TutorialPage = (props: PageProps) => {
3132
props.send({type:'STEP_SOLUTION_LOAD'})
3233
}
3334

34-
constlevel:TT.Level&{
35-
status:T.ProgressStatus
36-
index:number
37-
steps:Array<TT.Step&{status:T.ProgressStatus}>
38-
}={
39-
...levelData,
40-
index:tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId),
41-
status:progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE',
42-
steps:levelData.steps.map((step:TT.Step)=>{
43-
// label step status for step component
44-
letstatus:T.ProgressStatus='INCOMPLETE'
45-
if(progress.steps[step.id]){
46-
status='COMPLETE'
47-
}elseif(step.id===position.stepId){
48-
status='ACTIVE'
49-
}
50-
return{ ...step, status}
51-
}),
52-
}
35+
conststeps=levelData.steps.map((step:TT.Step)=>{
36+
// label step status for step component
37+
letstatus:T.ProgressStatus='INCOMPLETE'
38+
if(progress.steps[step.id]){
39+
status='COMPLETE'
40+
}elseif(step.id===position.stepId){
41+
status='ACTIVE'
42+
}
43+
return{ ...step, status}
44+
})
5345

5446
constmenu=(
5547
<Menu>
@@ -79,8 +71,12 @@ const TutorialPage = (props: PageProps) => {
7971

8072
return(
8173
<Level
74+
title={levelData.title}
75+
content={content}
8276
menu={menu}
83-
level={level}
77+
index={tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)}
78+
steps={steps}
79+
status={progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'}
8480
onContinue={onContinue}
8581
onLoadSolution={onLoadSolution}
8682
processes={processes}

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

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ storiesOf('Level', module)
3939
description:'A summary of the level',
4040
content:'Some content here in markdown',
4141
setup:null,
42-
status:'ACTIVE',
42+
status:'ACTIVE'as'ACTIVE',
4343
steps:[
4444
{
4545
id:'L1:S1',
@@ -88,7 +88,11 @@ storiesOf('Level', module)
8888
return(
8989
<Level
9090
menu={menu}
91-
level={level}
91+
title={level.title}
92+
content={level.content}
93+
index={0}
94+
status={level.status}
95+
steps={level.steps}
9296
onContinue={action('onContinue')}
9397
onLoadSolution={action('onLoadSolution')}
9498
processes={[]}
@@ -104,6 +108,7 @@ storiesOf('Level', module)
104108
description:'A description',
105109
content:'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
106110
setup:{commits:['77e57cd'],commands:['npm install'],files:[]},
111+
status:'ACTIVE'as'ACTIVE',
107112
steps:[
108113
{
109114
id:'L1:S1',
@@ -143,7 +148,11 @@ storiesOf('Level', module)
143148
return(
144149
<Level
145150
menu={menu}
146-
level={level}
151+
title={level.title}
152+
content={level.content}
153+
index={0}
154+
status={level.status}
155+
steps={level.steps}
147156
onContinue={action('onContinue')}
148157
onLoadSolution={action('onLoadSolution')}
149158
processes={[
@@ -167,6 +176,7 @@ storiesOf('Level', module)
167176
commits:['6adeb95'],
168177
commands:['npm install'],
169178
},
179+
status:'ACTIVE'as'ACTIVE',
170180
steps:[
171181
{
172182
id:'L1:S1',
@@ -227,7 +237,11 @@ storiesOf('Level', module)
227237
return(
228238
<Level
229239
menu={menu}
230-
level={level}
240+
title={level.title}
241+
content={level.content}
242+
index={0}
243+
status={level.status}
244+
steps={level.steps}
231245
onContinue={action('onContinue')}
232246
onLoadSolution={action('onLoadSolution')}
233247
processes={[]}
@@ -246,6 +260,7 @@ storiesOf('Level', module)
246260
commits:['0d7543c'],
247261
commands:['npm install'],
248262
},
263+
status:'ACTIVE'as'ACTIVE',
249264
steps:[
250265
{
251266
id:'L2:S1',
@@ -300,7 +315,11 @@ storiesOf('Level', module)
300315
return(
301316
<Level
302317
menu={menu}
303-
level={level}
318+
title={level.title}
319+
content={level.content}
320+
index={0}
321+
status={level.status}
322+
steps={level.steps}
304323
onContinue={action('onContinue')}
305324
onLoadSolution={action('onLoadSolution')}
306325
processes={[]}
@@ -316,13 +335,17 @@ storiesOf('Level', module)
316335
description:'A summary of the level',
317336
content:'Some content here in markdown',
318337
setup:null,
319-
status:'ACTIVE',
338+
status:'ACTIVE'as'ACTIVE',
320339
steps:[],
321340
}
322341
return(
323342
<Level
324343
menu={menu}
325-
level={level}
344+
title={level.title}
345+
content={level.content}
346+
index={0}
347+
status={level.status}
348+
steps={level.steps}
326349
onContinue={action('onContinue')}
327350
onLoadSolution={action('onLoadSolution')}
328351
processes={[]}

0 commit comments

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