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

Commitb44914a

Browse files
committed
refactor traverse content component
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parenta87e5c7 commitb44914a

File tree

2 files changed

+62
-41
lines changed

2 files changed

+62
-41
lines changed
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import*asReactfrom'react'
2+
import*asTfrom'typings'
3+
import*asTTfrom'typings/tutorial'
4+
import{Menu}from'@alifd/next'
5+
importIconfrom'../../components/Icon'
6+
7+
interfaceProps{
8+
tutorial:TT.Tutorial
9+
position:T.Position
10+
progress:T.Progress
11+
setTitle:(title:string)=>void
12+
setContent:(content:string)=>void
13+
}
14+
15+
constContentMenu=({ tutorial, position, progress, setTitle, setContent}:Props)=>{
16+
constsetMenuContent=(levelId:string)=>{
17+
constselectedLevel:TT.Level|undefined=tutorial.levels.find((l:TT.Level)=>l.id===levelId)
18+
if(selectedLevel){
19+
setTitle(selectedLevel.title)
20+
setContent(selectedLevel.content)
21+
}
22+
}
23+
return(
24+
<Menu>
25+
{tutorial.levels.map((level:TT.Level)=>{
26+
constisCurrent=level.id===position.levelId
27+
constisComplete=progress.levels[level.id]
28+
leticon
29+
letdisabled=false
30+
31+
if(isComplete){
32+
// completed icon
33+
icon=<Icontype="minus"size="xs"/>
34+
}elseif(isCurrent){
35+
// current icon`
36+
icon=<Icontype="minus"size="xs"/>
37+
}else{
38+
// upcoming
39+
disabled=true
40+
icon=<Icontype="lock"size="xs"/>
41+
}
42+
return(
43+
<Menu.Itemkey={level.id}disabled={disabled}onSelect={()=>setMenuContent(level.id)}>
44+
{icon}&nbsp;&nbsp;&nbsp;{level.title}
45+
</Menu.Item>
46+
)
47+
})}
48+
</Menu>
49+
)
50+
}
51+
52+
exportdefaultContentMenu

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

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import*asTTfrom'typings/tutorial'
4-
import{Menu}from'@alifd/next'
54
import*asselectorsfrom'../../services/selectors'
6-
importIconfrom'../../components/Icon'
5+
importContentMenufrom'./ContentMenu'
76
importLevelfrom'./components/Level'
8-
importloggerfrom'../../services/logger'
97

108
interfacePageProps{
119
context:T.MachineContext
@@ -45,48 +43,19 @@ const TutorialPage = (props: PageProps) => {
4543
return{ ...step, status}
4644
})
4745

48-
constsetMenuContent=(levelId:string)=>{
49-
constselectedLevel:TT.Level|undefined=tutorial.levels.find((l:TT.Level)=>l.id===levelId)
50-
if(selectedLevel){
51-
setTitle(selectedLevel.title)
52-
setContent(selectedLevel.content)
53-
}
54-
}
55-
56-
constmenu=(
57-
<Menu>
58-
{tutorial.levels.map((level:TT.Level)=>{
59-
constisCurrent=level.id===position.levelId
60-
logger('progress',progress)
61-
constisComplete=progress.levels[level.id]
62-
leticon
63-
letdisabled=false
64-
65-
if(isComplete){
66-
// completed icon
67-
icon=<Icontype="minus"size="xs"/>
68-
}elseif(isCurrent){
69-
// current icon`
70-
icon=<Icontype="minus"size="xs"/>
71-
}else{
72-
// upcoming
73-
disabled=true
74-
icon=<Icontype="lock"size="xs"/>
75-
}
76-
return(
77-
<Menu.Itemkey={level.id}disabled={disabled}onSelect={()=>setMenuContent(level.id)}>
78-
{icon}&nbsp;&nbsp;&nbsp;{level.title}
79-
</Menu.Item>
80-
)
81-
})}
82-
</Menu>
83-
)
84-
8546
return(
8647
<Level
8748
title={title}
8849
content={content}
89-
menu={menu}
50+
menu={
51+
<ContentMenu
52+
tutorial={tutorial}
53+
position={position}
54+
progress={progress}
55+
setTitle={setTitle}
56+
setContent={setContent}
57+
/>
58+
}
9059
index={tutorial.levels.findIndex((l:TT.Level)=>l.id===position.levelId)}
9160
steps={steps}
9261
status={progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'}

0 commit comments

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