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

Commitf486127

Browse files
committed
setup Step styles
1 parentd904e6f commitf486127

File tree

2 files changed

+34
-39
lines changed

2 files changed

+34
-39
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,47 @@
11
import*asReactfrom'react'
2+
import*asTfrom'typings'
3+
import{Button,Checkbox}from'@alifd/next'
4+
25
importMarkdownfrom'../../../../../components/Markdown'
3-
import{Button}from'@alifd/next'
6+
7+
interfaceProps{
8+
order:number
9+
content:string
10+
status:T.ProgressStatus
11+
onLoadSolution():void
12+
}
413

514
conststyles={
6-
// active: {
7-
// backgroundColor: '#e6f7ff',
8-
// },
915
card:{
16+
display:'grid',
17+
1018
padding:'0 1rem 1rem 0.5rem',
1119
},
1220
}
1321

14-
interfaceProps{
15-
text?:string|null
16-
mode:'INCOMPLETE'|'ACTIVE'|'COMPLETE'
17-
onLoadSolution():void
18-
}
19-
20-
constStepDescription=({ text, mode, onLoadSolution}:Props)=>{
22+
constStep=(props:Props)=>{
2123
const[loadedSolution,setLoadedSolution]=React.useState()
2224

2325
constonClickHandler=()=>{
2426
if(!loadedSolution){
2527
setLoadedSolution(true)
26-
onLoadSolution()
28+
props.onLoadSolution()
2729
}
2830
}
2931

30-
if(mode==='INCOMPLETE'){
31-
returnnull
32-
}
32+
constshowLoadSolution=status==='ACTIVE'&&!loadedSolution
3333

34-
constshowLoadSolution=mode==='ACTIVE'&&!loadedSolution
3534
return(
3635
<divstyle={styles.card}>
37-
<Markdown>{text||''}</Markdown>
36+
<Checkbox
37+
checked={status==='COMPLETE'}
38+
indeterminate={false}
39+
disabled={status==='INCOMPLETE'}
40+
/>
41+
<Markdown>{props.content||''}</Markdown>
3842
{showLoadSolution&&<ButtononClick={onClickHandler}>Load Solution</Button>}
3943
</div>
4044
)
4145
}
4246

43-
exportdefaultStepDescription
47+
exportdefaultStep

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

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import{Button,Step}from'@alifd/next'
1+
import{Button}from'@alifd/next'
22
import*asReactfrom'react'
33
import*asGfrom'typings/graphql'
44
import*asTfrom'typings'
55

6+
importStepfrom'./Step'
67
importMarkdownfrom'../../../../components/Markdown'
7-
importStepDescriptionfrom'./StepDescription'
88

99
conststyles={
1010
card:{
@@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
5656
thrownewError('No Stage steps found')
5757
}
5858

59-
// grab the active step
60-
constactiveIndex:number=level.steps.findIndex((step:G.Step&{status:T.ProgressStatus}|null)=>{
61-
returnstep&&step.status==='ACTIVE'
62-
})
63-
6459
return(
6560
<divstyle={styles.card}>
6661
<div>
@@ -76,20 +71,16 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
7671
<div>
7772
<divstyle={styles.header}>Tasks</div>
7873
<divstyle={styles.steps}>
79-
<Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
80-
{level.steps.map((step:G.Step&{status:T.ProgressStatus}|null,index:number)=>{
81-
if(!step){
82-
returnnull
83-
}
84-
return(
85-
<Step.Item
86-
key={step.id}
87-
title={step.title||`Step${index+1}`}
88-
content={<StepDescriptiontext={step.content}mode={step.status}onLoadSolution={onLoadSolution}/>}
89-
/>
90-
)
91-
})}
92-
</Step>
74+
{level.steps.map((step:G.Step&{status:T.ProgressStatus}|null,index:number)=>{
75+
if(!step){
76+
returnnull
77+
}
78+
return<Step
79+
order={index+1}
80+
status={step.status}
81+
content={step.content}
82+
/>
83+
})}
9384
</div>
9485
</div>
9586

0 commit comments

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